Labs ICT

HTML Semantics

← HTML IDs
HTML Layout →

Semantic HTML elements are those that clearly describe their meaning to both the browser and developer. Elements such as <header>, <footer>, <article>, and <section> clearly define their content, making the HTML more readable, accessible, and SEO-friendly. Semantic markup helps search engines understand the structure and content of your web pages.

Why Use Semantic HTML?

  • Accessibility: Screen readers can better understand and navigate the page structure
  • SEO: Search engines can better understand content hierarchy and relevance
  • Readability: Code is more maintainable and easier to understand
  • Consistency: Standard structure across different websites and applications
  • Future-proof: More likely to work with future web technologies

Non-semantic vs Semantic

Non-semantic HTML uses generic elements like <div> and <span> to structure content, while semantic HTML uses elements that clearly describe their meaning likes <header>, <main> and many more. 

<!-- Non-semantic HTML -->
<div id="header">
  <div class="logo">Logo</div>
  <div class="nav">Navigation</div>
</div>

<div class="content">
  <div class="article">Article content</div>
  <div class="sidebar">Sidebar content</div>
</div>

<div id="footer">Footer content</div>

<!-- Semantic HTML -->
<header>
  <div class="logo">Logo</div>
  <nav>Navigation</nav>
</header>

<main>
  <article>Article content</article>
  <aside>Sidebar content</aside>
</main>

<footer>Footer content</footer>
Try it Yourself →

Document Structure Elements

Here are some common document structure elements:

The <header> Element

The <header> element represents introductory content, typically a group of introductory or navigational aids. It can contain headings, logos, search forms, author names, and more: 

<!-- Page header -->
<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- Article header -->
<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on <time datetime="2024-01-15">January 15, 2024</time> by John Doe</p>
  </header>
  <!-- Article content -->
</article>
Try it Yourself →

The <footer> Element

The <footer> element represents the footer for its nearest sectioning content or sectioning root element. It typically contains information about the author, copyright, contact information, sitemap, back to top links, and related documents: 

<!-- Page footer -->
<footer>
  <p>© 2024 My Website. All rights reserved.</p>
  <nav>
    <ul>
      <li><a href="#privacy">Privacy Policy</a></li>
      <li><a href="#terms">Terms of Service</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <address>
    Contact us at: <a href="mailto:info@example.com">info@example.com</a>
  </address>
</footer>

<!-- Article footer -->
<article>
  <!-- Article content -->
  <footer>
    <p>Article written by John Doe</p>
    <p>Last updated: <time datetime="2024-01-20">January 20, 2024</time></p>
  </footer>
</article>
Try it Yourself →

<main> Element

The <main> element represents the dominant content of the <body> of a document. There should only be one <main> element per page, and it shouldn't contain content that is repeated across documents such as site navigation, copyright information, site logos, and banners: 

<body>
  <header>Site header with navigation</header>
  
  <main>
    <h1>Main Page Title</h1>
    <article>
      <h2>First Article</h2>
      <p>Article content...</p>
    </article>
    
    <article>
      <h2>Second Article</h2>
      <p>Article content...</p>
    </article>
  </main>
  
  <footer>Site footer</footer>
</body>
Try it Yourself →

The <section> Element

The <section> element represents a standalone section of a document. It should have a heading and typically groups related content together: 

<main>
  <section>
    <h2>About Us</h2>
    <p>Learn about our company and mission.</p>
  </section>
  
  <section>
    <h2>Our Services</h2>
    <article>
      <h3>Web Design</h3>
      <p>Professional web design services.</p>
    </article>
    <article>
      <h3>SEO Optimization</h3>
      <p>Improve your search engine rankings.</p>
    </article>
  </section>
  
  <section>
    <h2>Contact Information</h2>
    <p>Get in touch with us.</p>
  </section>
</main>
Try it Yourself →

The <article> Element

The <article> element represents a self-contained composition in a document, page, application, or site. It's intended to be independently distributable or reusable: 

<main>
  <article>
    <header>
      <h1>Understanding Semantic HTML</h1>
      <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
    </header>
    
    <section>
      <h2>What is Semantic HTML?</h2>
      <p>Semantic HTML uses HTML elements that clearly describe their meaning...</p>
    </section>
    
    <section>
      <h2>Benefits of Semantic HTML</h2>
      <p>Using semantic HTML provides several benefits...</p>
    </section>
    
    <footer>
      <p>Written by Jane Smith</p>
      <p>Tags: HTML, semantics, web development</p>
    </footer>
  </article>
</main>
Try it Yourself →

The <aside> Element

The <aside> element represents a section of a page that consists of content that is tangentially related to the content around it. This could be a sidebar, advertisement, or related links: 

<main>
  <article>
    <h1>Main Article Content</h1>
    <p>This is the main content of the page...</p>
  </article>
  
  <aside>
    <h2>Related Articles</h2>
    <ul>
      <li><a href="#article1">Understanding HTML5</a></li>
      <li><a href="#article2">CSS Best Practices</a></li>
      <li><a href="#article3">JavaScript Fundamentals</a></li>
    </ul>
  </aside>
</main>

<!-- Sidebar example -->
<div class="layout">
  <main>
    <h1>Main Content</h1>
    <p>Primary content goes here...</p>
  </main>
  
  <aside>
    <h2>Sidebar</h2>
    <section>
      <h3>Categories</h3>
      <ul>
        <li><a href="#cat1">Technology</a></li>
        <li><a href="#cat2">Design</a></li>
        <li><a href="#cat3">Business</a></li>
      </ul>
    </section>
    
    <section>
      <h3>Recent Posts</h3>
      <ul>
        <li><a href="#post1">Latest Article</a></li>
        <li><a href="#post2">Previous Article</a></li>
      </ul>
    </section>
  </aside>
</div>
Try it Yourself →

The <nav> Element

The <nav> element represents a section of a page that links to other pages or to parts within the page. It's intended for major navigation blocks: 

<!-- Site navigation -->
<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#electronics">Electronics</a></li>
    <li><span aria-current="page">Smartphones</span></li>
  </ol>
</nav>

<!-- Page navigation -->
<nav>
  <h2>Table of Contents</h2>
  <ol>
    <li><a href="#section1">Introduction</a></li>
    <li><a href="#section2">Main Content</a></li>
    <li><a href="#section3">Conclusion</a></li>
  </ol>
</nav>
Try it Yourself →

Content Grouping Elements

<!-- Blockquote for quotations -->
<blockquote cite="https://www.example.com/quote">
  <p>"The best way to predict the future is to invent it."</p>
  <footer>
    <cite>Alan Kay</cite>
  </footer>
</blockquote>

<!-- Figure for images with captions -->
<figure>
  <img src="chart.png" alt="Sales chart showing growth">
  <figcaption>Figure 1: Sales growth from 2020 to 2024</figcaption>
</figure>

<!-- Address for contact information -->
<address>
  Written by <a href="mailto:author@example.com">John Doe</a>.<br>
  Visit us at:<br>
  123 Main Street<br>
  Anytown, USA 12345
</address>
Try it Yourself →

Time and Data Elements

<!-- Time element -->
<p>The meeting is scheduled for <time datetime="2024-03-15T14:30">March 15, 2024 at 2:30 PM</time>.</p>

<p>Published: <time datetime="2024-01-15">January 15, 2024</time></p>

<p>Reading time: <time datetime="PT5M">5 minutes</time></p>

<!-- Data element -->
<p>Price: <data value="29.99" currency="USD">$29.99</data></p>

<p>Rating: <data value="4.5">4.5 out of 5</data> stars</p>
Try it Yourself →

Semantic HTML Best Practices

✓ Do:

  • Use semantic elements for their intended purpose
  • Ensure each sectioning element has a heading
  • Use only one <main> element per page
  • Nest elements logically (articles within sections, etc.)
  • Use ARIA attributes to enhance accessibility
  • Test with screen readers for accessibility
  • Validate your HTML with semantic elements

✗ Don't:

  • Use semantic elements just for styling
  • Nest <main> inside another <main>
  • Forget headings in sectioning elements
  • Overuse semantic elements when not needed
  • Nest <header> or <footer> inside <address>
  • Use <nav> for every link list
  • Ignore semantic meaning for visual design

Screen Reader Support

<!-- Enhanced with ARIA attributes -->
<header role="banner">
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home" aria-current="page">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>

<main role="main">
  <article aria-labelledby="article-title">
    <h2 id="article-title">Article Title</h2>
    <p>Article content...</p>
  </article>
</main>

<aside role="complementary" aria-label="Related content">
  <h2>Related Articles</h2>
  <ul>
    <li><a href="#related1">Related Article 1</a></li>
  </ul>
</aside>

<footer role="contentinfo">
  <p>Copyright information</p>
</footer>
Try it Yourself →

SEO Optimization

<!-- SEO-friendly semantic structure -->
<article itemscope itemtype="https://schema.org/Article">
  <header>
    <h1 itemprop="headline">Article Title</h1>
    <time itemprop="datePublished" datetime="2024-01-15">January 15, 2024</time>
    <address itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">John Doe</span>
    </address>
  </header>
  
  <section itemprop="articleBody">
    <p>Article content...</p>
  </section>
  
  <footer>
    <p>Tags: <span itemprop="keywords">HTML, semantics, web development</span></p>
  </footer>
</article>
Try it Yourself →

Don't worry on how to style the page, we will cover that in the CSS tutorials part.

🧪 Quick Quiz

Which element defines content aside from the main content?

← HTML IDs
HTML Layout →