Semantic HTML as graphic design without graphics
The best way to understand semantic HTML is to think of it as an alternative to graphic design.
I’ve been studying web development for the past several months. There is one concept in web development that I have been struggling to fully grasp: semantic HTML.
I got really confused about how to actually implement it. Even Interneting Is Hard, one of the best introductory tutorials to web development, didn’t completely demystify the subject.
After several months of struggle, CodeCademy’s tutorial video entitled HTML Structure (from 2'28'’) finally gave me the confidence in my understanding of semantic HTML.
In a nutshell, semantic HTML is a graphic design method without the use of graphic.
Okay, I know I’m like a zen monk now. Let me explain what I mean by this, by going through the steps to implement semantic HTML, with Apple’s webpage on Mac computers as an example.
There are only three steps to implement semantic HTML. First, headings (h1 h2 h3). Second, the section elements. Third, header, main, footer. The rest is optional, depending on the nature of a webpage.
Step 1: Mark up the headings
Graphic designers make a string of text for headings bigger, thicker, in different color, etc. In semantic HTML, web developers make a string of text for headings enclosed by heading tags.
1.1 Page title
The first step to build a webpage is to use h1 to mark up the title of the webpage. For Mac’s webpage, it should be
<h1>Mac</h1>Interestingly, Apple’s webpage on Mac DOES NOT have the word Mac anywhere:
But the source HTML code does (on line 297):
Anyone who visits the page immediately sees the photo of a Mac machine (as seen above). The explicit page title “Mac” would then go against the minimalist aesthetics of Apple’s. But those visually impaired who use screen readers and those search engines do not see the photo of a Mac. The h1 tag makes it clear that the page is about Mac.
A close inspection of the webpage with Chrome’s DevTool reveals that the title “Mac” is in an extremely small print (inside the box of 1 pixel by 1 pixel) so that no one can see. For more detail on this technique, see my other article entitled “Web Dev Survey: the ‘visually-hidden’ technique”.
Apple’s web developers know that the explicit title tagged with h1 is critical for today’s webpage.
1.2 Section titles
The second step to build a webpage is to divide the page content into sections and mark up each section’s heading with h2. On the Mac’s page, we have
<h1>Mac</h1>
<h2>iMac</h2>
<h2>MacBook Air</h2>
<h2>MacBook Pro</h2>
...Graphic designers would, for example, make section titles bigger than, or in a different color from, the body text. In Apple’s case, the font size and color of section titles does not stand out, but the center-top position in each section makes it clear that what section titles are.
Web developers do the same thing by enclosing section title text with h2 tags.
I initially got confused about these heading elements because I thought there were for font sizes. That’s completely wrong. For design aesthetics, you may want to use a smaller font size for the page title and a bigger one for section titles. Still, you should mark up the page title with h1 and section titles with h2, not the other way around.
I also initially misunderstood that heading elements were for emphasis. Actually, Apple’s webpage uses h3 for the slogan of each Mac model.
<h1>Mac</h1>
<h2>iMac</h2>
<h3>Pretty. Freaking powerful.</h3>
<h2>MacBook Air</h2>
<h3>Lightness strikes again.</h3>As far as I understand, this is a wrong use of h3. The phrase “Pretty. Freaking powerful.” or “Lightness strikes again.” is not really the title of a subsection for iMac or MacBook Air section. (If you don’t agree, please let me know by posting a comment below this article.)
1.3 Sub-section titles
If a section further divides into sub-sections, mark up a sub-section’s heading with h3.
Scrolling down the Mac webpage takes you to the section where Apple describes how we can “Get more out of Mac”:
To mark up this part of the page, it should be like
<h2>Get more out of Mac</h2>
<h3>Mac for education<h3>
<h3>Mac for higher education<h3>
...(The actual source code uses h2 for “Mac for education” and “Mac for higher education”, but logically speaking this should be incorrect.)
Even though there are h4, h5, h6 available, most likely you don’t want sub-sub-sections or sub-sub-sub-sections, or sub-sub-sub-sub sections on your page. That’s too much for the user to understand. When I was writing a PhD thesis (my former job was an academic economist), my supervisor forced me to throw away “section 3.1.4.1” etc. I now fully agree with him.
Step 2: Enclose each heading with section tags
Now we want to make our webpage’s hierarchical structure explicit. For this purpose, we use section elements.
<h1>Mac</h1>
<section>
<h2>iMac</h2>
</section>
<section>
<h2>MacBook Air</h2>
</section>
<section>
<h2>MacBook Pro</h2>
</section>
<section>
<h2>Mac Mini</h2>
</section>
<section>
<h2>iMac Pro</h2>
</section>
...
<section>
<h2>Get more out of Mac</h2>
<section>
<h3>Mac for education<h3>
</section>
<section>
<h3>Mac for higher education<h3>
</section>
</section>
...The benefit of doing this is two-fold. The nested structure of section elements makes it clear for web developers, screen readers (for the visually impaired), and search engines to quickly understand the hierarchy of the page content. The other benefit is the ease of styling each section, and sub-section, of the page.
Step 3: Overall page structure
3.1 Header and Footer
A typical webpage today has not only the content of information but also the header and the footer for navigation across the website, for contact information, legal notices, etc. We make this explicit:
<header>
...
</header>
<h1>Mac</h1>
<section>
<h2>iMac</h2>
</section>
<section>
<h2>MacBook Air</h2>
</section>
<section>
<h2>MacBook Pro</h2>
</section>
<section>
<h2>Mac Mini</h2>
</section>
<section>
<h2>iMac Pro</h2>
</section>
...
<section>
<h2>Get more out of Mac</h2>
<section>
<h3>Mac for education<h3>
</section>
<section>
<h3>Mac for higher education<h3>
</section>
</section>
...
<footer>
...
</footer>3.2 Main
We also let the screen reader and the search engine know where the main content of the page is located by enclosing it with the main tag.
<header>
...
</header>
<main>
<h1>Mac</h1>
<section>
<h2>iMac</h2>
</section>
<section>
<h2>MacBook Air</h2>
</section>
<section>
<h2>MacBook Pro</h2>
</section>
<section>
<h2>Mac Mini</h2>
</section>
<section>
<h2>iMac Pro</h2>
</section>
...
<section>
<h2>Get more out of Mac</h2>
<section>
<h3>Mac for education<h3>
</section>
<section>
<h3>Mac for higher education<h3>
</section>
</section>
...
</main>
<footer>
...
</footer>For most of us, the visual appearance of a webpage makes it clear where the main content of the page is located. But for those visually impaired and for search engines, it is not clear at all. The main element helps them detect where the main content is on a webpage.
The above is the absolute minimum for any webpage. Below is optional.
Step 4: Other page-specific elements
Depending on the type of a webpage, you will have more semantic HTML elements.
4.1 Navigation bar
The list of links to other pages on the website should be enclosed with nav tags. In the Mac webpage, there is a navigation bar at the top to each Mac model’s detail page:
The source code has the following:
<header>
<nav>
<ul>
<li>MacBook</li>
<li>MacBook Air</li>
<li>MacBook Pro</li>
<li>iMac</li>
<li>iMac Pro</li>
...
</ul>
</nav>
</header>
...4.2 Small prints
In the footer of the Mac webpage, there is a legal notice about the price offered:
Such small prints should be enclosed with the small tag (Apple’s source code doesn’t, though).
<footer>
<small>Trade-in values will vary based on the condition, year, and configuration of your trade-in device. You must be at least 18 years old to be eligible to trade in for credit or for an Apple Store Gift Card. ... Some stores may have additional requirements.</small></footer>4.3 Article
For news media webpages (including blogs), each news article or blog post is self-contained: it makes sense even if the other parts of the same webpage are not visible. If so, enclose it with the article tag.
Examples include each news article that will be syndicated on other websites; each blog post on a blog’s landing page, each comment to a blog post.
Many tutorials on semantic HTML often start with this article element. Which confused me a lot. For many webpages, we don’t need article elements. (Apple’s webpage on Mac doesn’t have it.) The default choice should be thesection element.
4.4 Aside
Some webpages feature advertisements. Other webpages have a side bar navigation for the desktop screen layout. Some news articles may have a pull quote or the definition of a word as a footnote. These should be enclosed with the aside tag. It signifies the pieces of information relevant but not essential for the main content.
4.5 Section Break
Sometimes we want to indicate there is a section break without using a new section title. Resist the temptation to insert a horizontal bar with the border-top or border-bottom property of a non-semantic div element, or a paragraph with *** center-aligned. Use the hr element.
The hr element “carries less significance than the separation created by a new heading element, but more significance than a new paragraph.” The example of use includes “[t]he transition from one scene of a story into the next or between the end of a letter and a postscript” (citation source: Interneting Is Hard on empty HTML elements).
To use the center-aligned *** as a section break, use the following CSS rules (HT: Ry-♦ for his StackOverflow post):
hr {
border: none;
}hr::before {
content: '***';
display: block;
text-align: center;
}
If the typeface of your choice supports fancy typographic characters, replace *** in the above code with an asterism if the webpage concerns history or a fleuron if the webpage is of more romantic type.
A CSS Tricks article on the hr element provides several other options for styling the section break.
Graphic design without graphics
Graphic designers change the appearance (size, color, thickness, etc.) of letters to tell the reader what role each chunk of letters plays in written communication.
Semantic HTML achieves the same purpose without the use of graphics as described above.
