GoBrain

Share

Semantic HTML

By gobrain

Jun 26th, 2024

HTML provides dozens of elements to create web pages. These elements can be categorized as, semantic and non-semantic. In the context of web development, semantic means "related to meaning", and following this definition, semantic elements in HTML are tags that clearly convey the meaning and purpose of their content.

So, what are HTML semantic elements? Let's discover them.

What Are HTML5 Semantic Elements

Semantic Elements are HTML elements that have a descriptive and meaningful tag name, indicating the purpose of the content contained within them unlike non-semantic elements like <div> and <span>. Examples of semantic elements include <header>, <footer>, <nav>, <main>, <article>, <section>, <aside> and <figure>, among others.

Benefits of Using Semantic Elements

Using semantic elements can improve the accessibility, usability, and search engine optimization(SEO) of a web page, as well as create a more meaningful and organized code structure. This makes it easier for both humans and machines to understand the content.

Now Let's discover each of them.

Header

The header element typically displays introductory content found at the top of the page or within other semantic elements.

<header>
  <div>Logo</div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
  <button>Sign Up</button>
</header>

A Header element may include:

  • Logo or branding: The header may contain a company or website logo to establish the brand identity.
  • Site navigation: The header may include links to important pages within the site, such as the homepage, about page, contact page, or product pages.
  • Contact information: The header may include contact information such as a phone number, email address, or physical address.
  • Social media links: The header may include links to the website's social media profiles, allowing users to easily access and follow the brand on different platforms.
  • Headline or tagline: The header may include a catchy headline or tagline that summarizes the website's purpose or value proposition.
  • Call-to-action: The header may include a call-to-action button, encouraging users to take a specific action such as signing up for a newsletter or making a purchase.

Nav

The nav element represents the part including navigation links to the main blocks of the website. These links are used to guide visitors to the main sections or blocks of the website, such as:

  • homepage
  • about page
  • contact page and more.
<header>
  <div>Logo</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>    
  <button>Sign Up</button>
</header>

Section

The section element is useful for grouping related content together, such as text, images, videos, and other media, that typically have a common theme or topic. Each <section> element can have its own unique heading, such as an <h1> or <h2> tag, which serves as a title for the section and provides context for the content that follows.

<section>
  <h2>Recent Articles</h2>
  <div>
    <ul>
      <li><a href="#">My Article 1</a></li>
      <li><a href="#">My Article 2</a></li>
    </ul>
  </div>    
</section>

The section element can be used in many places on a web page, such as:

  • Inside other semantic elements like article or main to divide them into smaller sections.
  • Within an article element to divide it into sub-sections.
  • Inside a div element to group related content and provide semantic meaning to it.
  • Within a nav element to group navigation links into sections.

Main

The main element is used to identify the primary and most essential content of a web page. This element should be unique and only appear once per page, as it serves as the main content area that sets the page apart from other pages on the same website.

The content inside the main element should be directly related to the purpose of the page, and should not include elements that are common across all pages, such as navigation links, site logos, footer information, and so on.

<main>
  <h2>Article Title</h2>
  <p>
      Article content .... 
  </p>    
</main>

Article

The article tag represents a grouping on a page, similar to a section element. It is intended for more reusable structures such as:

  • forum comments
  • cards
  • widgets and so on.
<article>
  <h2>Card Title</h2>
  <p>
      Card description
  </p>   
  <button>Read More</button>
</article>

Aside

The aside element represents content that is not directly related to the main section of the page, but still provides additional context or support for the main content.

<aside>
  <h3>Did you know that?</h3>
  <p>
     An Information Text
  </p>   
</aside>

Footer

The footer tag represents a section located at the bottom of a page or section. It typically includes information such as:

  • site details
  • contact information
  • primary navigation links
  • copyright information and so on.
<footer>
    <ul>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Privacy</a></li>
    </ul>
</footer>

Put Them All Together

After explaining all semantic elements in HTML let's create a HTML document using most used semantic elements.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Semantic HTML Page</title>
</head>
<body>

  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h1>Welcome to my website!</h1>
      <p>This is a paragraph of text that describes what my website is all about.</p>
      <button>Learn More</button>
    </section>

    <article>
      <h2>Article Title</h2>
      <p>This is a paragraph of text that provides more information about the article.</p>
      <p>Another paragraph goes here.</p>
      <blockquote>
        <p>This is a quote from an important person or source.</p>
        <cite>Source Name</cite>
      </blockquote>
    </article>

    <aside>
      <h3>Related Content</h3>
      <ul>
        <li><a href="#">Related Link 1</a></li>
        <li><a href="#">Related Link 2</a></li>
        <li><a href="#">Related Link 3</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2023 My Website Name</p>
  </footer>

</body>
</html>

In this example, I've used the following semantic elements:

  • header to contain the main navigation of the website.
  • nav to indicate that the list of links inside it is for navigation purposes.
  • main to contain the main content of the website.
  • section to group related content together.
  • article to represent a standalone piece of content.
  • aside to contain content related to the main content.
  • footer to contain information about the website.

I've also used other common elements like h1 for the main heading, p for paragraphs, ul and li for unordered lists, a for links, button for a call-to-action button, blockquote for a quote, and cite to indicate the source of the quote.

Conclusion

In this guide, we have discussed semantic elements in HTML5 that clearly communicate their purpose to browsers, screen readers, and developers. Using these elements is crucial for improving the accessibility of your website.

Thank you for reading.