Section and Article MarkUp
If you look at the screenshots layout at this point, you will see that each section begins with a heading level.
We’ve already used H1 for the site-title in the Header, so our next level of document structure is the H2 element.
In other words, wrap an H2 around the first line inside each section here. Give each a class of “section-title”.
Below the H2 in our first section is our first story. With it, let’s insert the image, mark up the textual content, and wrap the story content inside an ARTICLE tag.
<section class="section-exclusive">
<h2 class="section-title">Exclusive</h2>
<article class="story">
<img src="images/exclusive/london-thames-panorama.jpg" alt="London Panorama">
<h3 class="story-title">London In Crisis</h3>
<p>In the hottest real estate market in the world, property speculation has inexorably driven away the lower, the middle, and the upper-middle classes. Who’s left? The bankers.</p>
<p>Experts in urban planning discuss what can be done to make London a livable city again.</p>
<div class="story-byline">by Lidka Krzesimir</div>
</article>
</section>
A TIP: if you have a long or complex path path to an image (or any file), you can right-click or control-click it in the sidebar and choose Copy Relative Path from the contextual menu. Then you can paste that copied path inside the quotation marks of the SRC attribute value. Make sure, though, that you use Relative Paths here. The others might break if you move the site.
The Semantics of Sectioning Tags
Why we use the sectioning elements we do is worth examining. (By sectioning tags, I mean things like section, article, nav, header, footer, main, and div.)
Visually, these elements all behave identically, with no default properties other than that they are block-level elements.
However, each of these sectioning elements carries with it different semantics or implied meanings about content and structure:
- Header: the top of page or an article. As a page header, it’s typically used to create a banner area across all the pages in a site, with an H1, nav, logos, search field, etc. In an article, it might contain a heading, publication date, author, etc.
- Nav: a significant menu for a site.
- Article: a piece of content that is seen as complete. Something that could make sense outside the page it is in. Something that could be shared or placed on another web page and seem complete.
- Footer: typically used to create a repeating area at the bottom of all pages in the site. Here we can place secondary or repeated navigation, copyright notices, etc
- Section: used for major structural divisions within a page or article. Typically, a section will begin with some level of heading.
- Main: often used for the main part content area of each page. For example, a typical page might have these following tags as the direct children of the body: header, main, footer.
- Div: generic grouping element for styling. No implied meaning about the content.
Again, in purely visual terms, we could use DIVs in place of all the other sectioning tags. However, that means that it is harder for a search engine to understand the content, and harder for screen reading software to make sense of the content.
In purely selfish terms, perhaps, it makes editing our code more difficult, too.
Here is just a small example to illustrate what I mean:
<!-- Example One: Using Sectioning Tags -->
<section class="section-exclusive">
<h2 class="section-title">Exclusive</h2>
<article class="story">
<img src="images/exclusive/london-thames-panorama.jpg" alt="London Panorama">
<h3 class="story-title">London In Crisis</h3>
<p>In the hottest real estate market in the world, property speculation has inexorably driven away the lower, the middle, and the upper-middle classes. Who’s left? The bankers.</p>
<p>Experts in urban planning discuss what can be done to make London a livable city again.</p>
<div class="story-byline">by Lidka Krzesimir</div>
</article>
</section>
<!-- Example Two: the same content using DIVS instead of sectioning tags -->
<div class="section-exclusive">
<h2 class="section-title">Exclusive</h2>
<div class="story">
<img src="images/exclusive/london-thames-panorama.jpg" alt="London Panorama">
<h3 class="story-title">London In Crisis</h3>
<p>In the hottest real estate market in the world, property speculation has inexorably driven away the lower, the middle, and the upper-middle classes. Who’s left? The bankers.</p>
<p>Experts in urban planning discuss what can be done to make London a livable city again.</p>
<div class="story-byline">by Lidka Krzesimir</div>
</div>
</div>
In the second example chunk of code, we’ve replaced the section and article tags with DIVs.
Which code is easier to read? Imagine this difference amplified over thousands of lines of code.
Notice the last line of the article: the author byline. Here I used a DIV for that content. It’s not a paragraph, it’s not really a heading for any content, so a generic block container (div) is a reasonable choice.
Return to the Markup
We can follow this same pattern in the next two sections.
For the FEATURE section, this HTML would be reasonable:
<section class="section-feature">
<h2 class="section-title">Feature</h2>
<article class="story">
<img src="images/feature/bulldog.jpg" alt="Bulldog Bitten by Man">
<h3>Exclusive: Man Bites Dog, Dog Reveals Post-Bite Complications</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae modi officiis at recusandae vitae! Minima aliquid sunt illo tempore illum, aspernatur sit. Ipsam illum quas incidunt perspiciatis qui. Hic recusandae asperiores dolor, sit dignissimos rerum deserunt maxime a. Eligendi enim consectetur alias tempore porro debitis numquam. Minus veniam expedita nulla corporis ipsum inventore ipsam vel dolorum labore?</p>
<div class="story-byline">by Stefek Hafeez</div>
</article>
</section>
For the NEW THIS MONTH section, here is the marked up section and the first article. Repeat the article pattern on subsequent stories.
<section class="section-new-this-month">
<h2 class="section-title">New This Month</h2>
<article class="story">
<img src="images/new-this-month/ferris-wheel.jpg" alt="Ferris Wheel">
<h3 class="story-title">Ferris Wheel</h3>
<p>Nothing is more terrifying than a stopped Ferris Wheel.</p>
<div class="byline">by Gilroy Vikram</div>
<div class="story-category">Psychology</div>
</article>
<!-- five more articles go here... -->
</section>
You might wonder with this one how to categorize the word PSYCHOLOGY here. Is it another heading level?
I decided against that, on the belief that the category isn’t really dividing the document, section, or article, but more so just describing part of the content in it (like tagging), but you might well argue that it should be an H4.
Ultimately, the idea is that we would make each category-word into a link to another page that would contain other articles from the same category.
Because I will use positioning later to place that element at the top of the article, its order in the HTML can be more flexible than that for “normal flow” content. By moving the .category DIV to the bottom of the article markup and wrapping it in a DIV rather than a heading, I imply to search engines and screen readers that this piece of content is not as important as the heading or the paragraph text.
The Other Five Articles in This Section
Please mark up the rest of the articles in this section, following the same pattern as above.
Then test the page in a browser. Scroll down and make sure that you have the order of content correct and that there are no formatting inconsistencies: for example, an unclosed heading level will make all the next content look like that heading level, so it’s easy to spot.
If there are inconsistencies you can’t find the reasons for, validate your HTML.
The code below is what we end up with if we follow the pattern above.
( If using “special characters” in a comment to make a dividing line in your HTML, you can use anything except for the dash, or minus, because the comment tag closes with two of those characters ).
The Gallery Section
Finally make the last section—nine images and a section heading.
<section class="section-around-our-city">
<h2 class="section-title">Around Our City</h2>
<img src="images/bikes/bike-beach.jpg" alt="Bike on beach">
<img src="images/bikes/bike-bridge.jpg" alt="Bike on bridge">
<img src="images/bikes/bike-courier.jpg" alt="Bike courier">
<img src="images/bikes/bike-gears.jpg" alt="Bike gears">
<img src="images/bikes/bike-hipster.jpg" alt="Man on bicycle">
<img src="images/bikes/bike-parked.jpg" alt="Woman on bicycle">
<img src="images/bikes/bike-pink-seat.jpg" alt="Bike seat">
<img src="images/bikes/bike-tattoos.jpg" alt="Bike at seaside">
<img src="images/bikes/bike-white.jpg" alt="White bicycle">
</section>
Then, onward to work on the initial typography.