What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <img>, <table>, and <article> - Clearly defines its content.

HTML <section> Element:

Output:

HTML <article> Element

Output:

HTML <header> Element:

Output:

HTML <footer> Element:

Output:

HTML <nav> Element:

Output5:

HTML <aside> Element:

Output:

HTML <figure> and <figcaption> Elements

Output:

Practice Exercises

Task 1: How to group multiple related <article> tags inside a <section>?

Goal: Create a "Latest News" section that contains two distinct news articles.
💡 Hint: Wrap multiple <article> blocks within a single <section> container.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Section and Article Example</title>
  </head>
  <body>

    <section>
      <h2>Tech Updates</h2>
      
      <article>
        <h3>AI Advancements in 2026</h3>
        <p>Artificial intelligence tools are now seamlessly integrated into modern web development workflows.</p>
      </article>

      <article>
        <h3>New CSS Features</h3>
        <p>Modern CSS standardizes responsive design without needing excessive media queries.</p>
      </article>
    </section>

  </body>
</html>

Output :

Tech Updates

AI Advancements in 2026

Artificial intelligence tools are now seamlessly integrated into modern web development workflows.

New CSS Features

Modern CSS standardizes responsive design without needing excessive media queries.

Explanation: A <section> groups thematic content together, while individual standalone items inside that theme are structured using <article> elements.

Task 2: How to combine the <header> and <nav> tags for a website header block?

Goal: Build a website header containing a site title and main navigation bar.
💡 Hint: Place the <nav> element inside the top-level <header> element.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Header and Nav Example</title>
  </head>
  <body>

    <header>
      <h1>DevPortal</h1>
      <nav>
        <a href="#home">Home</a> | 
        <a href="#articles">Articles</a> | 
        <a href="#about">About Us</a>
      </nav>
    </header>

  </body>
</html>

Output :

DevPortal

Explanation: Combining <header> and <nav> provides a standard semantic architecture for website top-navigation bars.

Task 3: How to present metadata and contact info inside a <footer> tag?

Goal: Construct a web page footer containing copyright details and a direct email contact link.
💡 Hint: Include copyright text along with a mailto: link within a <footer> element.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Footer Semantic Example</title>
  </head>
  <body>

    <footer>
      <p>&copy; 2026 DevPortal. All rights reserved.</p>
      <p>Contact Support: <a href="mailto:support@devportal.com">support@devportal.com</a></p>
    </footer>

  </body>
</html>

Output :

Explanation: The <footer> element represents a footer for its nearest sectioning content or page root, typically containing authorship, copyright data, or contact info.

« Previous Next »