Guide to semantic HTML5 tags

Semantics, the study of meaning in the fields of linguistics and logic, plays a crucial role in web development. By using semantic HTML, we assign a clear identity to the content of our pages through various tags.

From an HTML perspective, tags fall into two categories:

• Semantic tags, which clearly define the content they enclose. For example, <p> denotes a paragraph, <h1> indicates a main title.
• Non-semantic tags, such as <div> and <span>, which do not intrinsically convey information about their content.

The Div Trap

Web developers often fall into the trap of overusing <div> and <span> tags, a phenomenon affecting both novices and seasoned developers alike. Despite the obvious advantages of semantic HTML, moving away from reliance on <div> can be challenging.

Many websites use standard structures with common sections like headers, footers, and navigation bars. Caught in the div trap, developers often mark these areas as follows:

<div class="header">
    <div class="nav-bar">
        <span class="home">Home</span>
        <span class="service">Service</span>
        <span class="contact">Contact</span>
    </div>
</div>

Unfortunately, this practice does not convey any semantic information to browsers since they do not understand this style of language.

Why You Should Adopt Semantic Tags

• Improved Accessibility: Using elements like <header>, <section>, and <article> makes content more accessible and navigable, especially for users of assistive technologies, thus broadening your audience.
• Better SEO: Semantic tags act as indicators for search engines, improving your site's visibility and ranking.
• Efficient Maintenance and Collaboration: Reducing the use of <div> simplifies code, facilitating collaboration and updates.
• Prepared for the Future: The web is constantly evolving; using semantic HTML helps your projects stay relevant and functional.

Whether you're new to the field or an expert, the challenge is to fully embrace semantic HTML5, break old habits, and enjoy a better-structured, more accessible web. Breaking this cycle requires a conscious commitment to prioritize semantics and accessibility. This journey may take some out of their comfort zone, but the result—a more inclusive and sustainable web—is well worth the effort.

How to Choose the Right Semantic Tag

Wondering about the proper use of semantic tags? We'll dive into the details to help you choose the right tag for each piece of content. In terms of the HTML specification, the elements we will be looking at fall into one of three groups:

• Sectioning elements, for broad strokes on an HTML page, like headers, footers, sections, and sidebar areas.
• Grouping elements, which are used to wrap associated elements. Think of paragraphs, blockquotes, and related content.
• Text-level semantics, which designate particulars, like <b>, <i>, <em>, <strong> tags.

Let's see some of the common used tags:

a. The <main> Element

Meet the <main> element in HTML5—it's perfect for highlighting the main part of your webpage. This tag helps clearly show what's unique about each page, ensuring it doesn't get mixed up with repeating elements, like navigation links or footers.

Just remember two simple rules: only use one <main> per page to keep things clear, and don't place it inside other specific tags like <article>, <aside>, <header>, <footer>, or <nav>. Using <main> correctly makes your website easier to understand and use.

<!-- Header -->
<main>
    Our main content
</main>
<!-- Footer -->

b. The <section> Element

The <section> element organizes different parts of a webpage or application into clear segments. For example, you might use one <section> for contact information and another for news feeds. It's important to remember that <section> is not for styling purposes; if you just want to style a part of your page, you should use a <div> instead.

Using <section> to wrap visual components, helps clearly identify where each component starts and ends in the code.

Decide if you should use a <section> by checking if the content has a natural heading (like h1 to h6). If it doesn't, you're probably better off using a <div>.

<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
    </section>
    ...
</main>

c. The <nav> Element

The <nav> element in HTML5 is ideal for grouping major navigation links that direct users to different pages or sections of the same page. While it's typically not used for footers, it can be used there too. Instead of using an unordered list (<ul>) with list items (<li>), try using <nav> with nested <a> tags (links) for a cleaner and more appropriate structure. This approach is especially suited for primary navigation areas.

<nav>
    <a href="#home">Home</a>
    <a href="#service">Services</a>
    ...
</nav>

d. The <article> Element

The <article> element in HTML5 groups content that stands on its own. Ask yourself: If I moved this content to another website, would it still make complete sense? Or, would this content work as a separate article in an RSS feed? Good examples of when to use <article> include blog posts and news stories.

<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
       <article>My post</article>
    </section>
    ...
</main>

e. The <aside> Element

The <aside> element in HTML is great for content that isn't the main focus but still relates to the main story, such as sidebars or tips in a blog post. It's also suitable for pull quotes, ads, and navigation links. For example, on an e-commerce site, the "Customers who bought this also bought" section would fit well in an <aside>. Use it for anything that supports but isn't central to your main content.

f. The <header> Element

The <header> element is versatile. You can use it for the top part of a website, called the "masthead," or as an introduction at the start of different sections, like articles. Feel free to use multiple headers on the same page—one for each section if you like!

<header>The masthead</header>
<main>
    <section class="contact-infos">
    </section>
    <section class="newsfeeds">
        <header>The newsfeed section head</header>
    </section>
    ...
</main>

g. The <footer> Element

The <footer> element in HTML5 is similar to the <header>. It is used for displaying information related to the content around it, such as copyright information or links to other documents. You can use multiple footers on one page, such as one for the overall blog and another within an individual blog post.

However, if you're adding contact information for the blog post's author, use the <address> element instead of putting it in the footer. This helps keep your page organized and makes the type of information clear to users.

In this example, the footer contains contact information and a copyright notice.

<footer>
     <address>
          For more details, contact
          <a href="mailto:semjomagene@example.com">Sem Joel Magene</a>.
     </address>
     <p><small>© Copyright 2038 Example Corp.</small></p>
</footer>

Note on The HTML5 Outline Algorithm

In simple HTML documents, you typically start with an <h1> tag for the main title and use lower-level heading tags (<h2>, <h3>, etc.) for subtitles. However, HTML5 introduced a feature that allows each section of your document to have its own headings independently. This means you no longer have to worry about the heading levels for the entire document. Instead, you can focus on the headings within each specific section you are working on. For example, in a blog, both the post titles and the blog's main title can use <h1> tags independently, thanks to this feature.

h. H1-H6 and <hgroup> Elements

When creating web pages, it's best to use heading tags (h1 to h6) for main section titles only and not for their subheadings. For example, instead of:

<h1>Scones:</h1>
<h2>The most resplendent of snacks</h2>

Consider using a different approach like this:

<hgroup>
  <h1>Scones:</h1>
  <p>The most resplendent of snacks</p>
</hgroup>

Here, hgroup holds the main heading and the subheading, but the subheading is in a paragraph tag (p) instead of a heading tag (h2). This helps keep your page structure clear and simple.

Grouping Elements

We’ve now covered the lion’s share of the HTML sectioning elements. Let’s now consider grouping elements, like the one we’ve just seen. These elements are used to contain groups of other elements.

i. The <div> Element

This is the most common way to group parts of a webpage. It's used a lot because it doesn't suggest any particular meaning—it simply groups content. However, it's best to use <div> only when no other element fits your needs. HTML has many other elements, and learning to use them can help you find better matches for your content.

j. The <p> Element

This element is for marking paragraphs, but it's not just for short texts. Use it for any text that doesn't fit better in another element. It's a better choice than <div> for general text because it specifically indicates that the content is a paragraph.

k. The <blockquote> Element

In the world of HTML, the <blockquote> tag is your go-to when you need to highlight text quoted from another source. You don't necessarily need to encase the quoted text in another element, but you certainly can, like wrapping it with a <p> tag for added structure. Here’s an example:

<p>I did like Ben's book, but he kept going on about scones. For example:</p>
<blockquote>
    All this writing about scones in our sample page and there's no image of the beauties! I'm going to add an image of a scone near the top of the page; a sort of 'hero' image to entice users to read the page.
</blockquote>

l. The <figure> and <figcaption> Elements

The <figure> element in HTML is perfect for wrapping visuals like illustrations, photos, or code snippets, with the optional <figcaption> to add a text description. While the alt attribute is crucial for accessibility, providing a <figcaption> is optional—use it if you want to explain or comment on the visual directly alongside it.

<figure class="MoneyShot">
  <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones baked to perfection and ready to eat" />
  <figcaption class="ImageCaption">
    This image isn't of scones I have made, instead, it's a stock photo from Wikipedia
  </figcaption>
</figure>

m. The <details> and <summary> Elements

Modern HTML gives us cool tools like the <details> and <summary> elements to create expandable sections in web pages. Here’s a quick example:

<details>
    <summary>I ate 15 scones in one day</summary>
    <p>
        Of course I didn't. It would probably kill me if I did. What a way
        to go. Mmmmmm, scones!
    </p>
</details>

Click the summary, and voilà! The text expands. Click again, and it collapses. Want it open from the start? Just add the open attribute to the <details> tag. However, without some JavaScript, these elements won't automatically close others when one is opened. Despite this limitation, <details> and <summary> are still great for adding simple toggle functionality to your site, far more neatly than the old display: none; trick on a <div>.

HTML Text-Level Semantic Elements

Before HTML5, what we now refer to as text-level semantic elements were called inline elements. If you're familiar with that term, you're already on the right track! Let’s dive into the most common and useful text-level elements to get a better understanding of them.

n. The <span> Element

The <span> element is like the simpler, text-focused cousin of the <div>. It's the go-to choice when you need to style a section of text without adding any extra meaning or structure. It's straightforward and ideal for those little tweaks to your text.

o. The <b> Element

Traditionally, the <b> element in HTML was used to make text bold. But its modern definition has shifted; now, the <b> tag is used to highlight text for practical reasons, such as drawing attention to keywords or product names, without implying any extra emphasis or change in tone.

b {
  font-weight: normal;
}

This CSS tweak helps ensure that the text within <b> tags appears as intended without automatic bolding.

p. The <strong> Element

When you need to highlight text because it's crucial, urgent, or serious, the <strong> element is your go-to tool. Use it to make parts of a heading, caption, or paragraph stand out as especially important. It's perfect for spotlighting key details in a sea of text. Additionally, <strong> works great for emphasizing warnings or urgent notices, ensuring that these critical messages catch the user's eye quickly. Keep this in mind to make essential information pop on your page.

q. The <em> Element

Often misused just to make text italic, the <em> tag in HTML is actually meant to represent stress emphasis on its contents, not just to style text as italic.

r. The <i> Element

In HTML5, the <i> element isn't just for making text italic. It's meant to give a different voice or mood to a span of text, setting it apart from the rest in a meaningful way. For instance, you might use it to highlight a scientific name in a paragraph or to indicate a special note like "No Salt Added" on a menu item in a web app.

<p>However, discussion on the frameset element is now frustraneous as it's now gone the way of the <i>Raphus cucullatus</i>.</p>
<button type="button">French Fries <i>No Salt Added</

i></button>

s. The <code> Element

For developers, the <code> element is indispensable when discussing code directly in HTML documents. It wraps code snippets, preserving the integrity of programming-related text and ensuring that it's easily recognizable as code.