HTML Semantic Elements

HTML CODES & EXAMPLES

HTML Semantic Elements

Learn how to structure webpages using meaningful HTML5 semantic elements for better organization, accessibility, maintainability and search-engine understanding.

← HTML Iframe Start Learning →

What are Semantic Elements?

Meaningful HTML structure

Semantic HTML elements clearly describe the purpose of different parts of a webpage. Instead of using generic containers everywhere, semantic elements help browsers, developers, assistive technologies and search engines understand the page structure.

Example:<header> represents introductory content, while <footer> represents footer content.

<header>

Page or section header

The <header> element represents introductory content for a webpage or section.

header.html

<header>

  <h1>
    Shree Narayan Computers & Education Center
  </h1>

  <p>
    Computer Education & Skill Development
  </p>

</header>

<nav>

Navigation links

The <nav> element contains important navigation links.

nav.html

<nav>

  <a href="/">Home</a>

  <a href="/courses/">Courses</a>

  <a href="/about-us/">About Us</a>

  <a href="/contact/">Contact</a>

</nav>

<main>

Main content of the webpage

The <main> element contains the primary content of the document.

main.html

<main>

  <h1>
    Computer Courses
  </h1>

  <p>
    Explore our computer education courses.
  </p>

</main>

<section>

Group related content

section.html

<section>

  <h2>
    Our Courses
  </h2>

  <p>
    Learn computer applications,
    programming and digital skills.
  </p>

</section>

<article>

Independent content

The <article> element represents content that can stand independently, such as a blog post, news article, course lesson or forum post.

article.html

<article>

  <h2>
    Introduction to Computers
  </h2>

  <p>
    Learn the fundamentals of computer systems,
    hardware and software.
  </p>

</article>

<aside>

<footer>

Footer information

footer.html

<footer>

  <p>
    &copy; 2026 Shree Narayan Computers
    & Education Center
  </p>

  <a href="/privacy-policy/">
    Privacy Policy
  </a>

</footer>

<figure> and <figcaption>

Images with descriptions

figure.html

<figure>

  <img
    src="computer-lab.jpg"
    alt="Modern computer laboratory"
  >

  <figcaption>
    Computer Laboratory
  </figcaption>

</figure>

<details> and <summary>

Expandable information

details.html

<details>

  <summary>
    What is HTML?
  </summary>

  <p>
    HTML is the standard markup language
    used to structure webpages.
  </p>

</details>

Open Details

Show expandable content by default

details-open.html

<details open>

  <summary>
    Course Information
  </summary>

  <p>
    This course covers HTML fundamentals,
    semantic elements and webpage structure.
  </p>

</details>

<time>

Represent dates and times

time.html

<p>

  Course starts on

  <time datetime="2026-08-20">
    August 20, 2026
  </time>

</p>

<mark>

Highlight relevant text

mark.html

<p>

  Learn

  <mark>
    HTML
  </mark>

  for webpage development.

</p>

Complete Semantic Structure

Combine multiple semantic elements

semantic-layout.html

<header>

  <h1>
    Computer Education
  </h1>

  <nav>

    <a href="/">Home</a>

    <a href="/courses/">
      Courses
    </a>

    <a href="/contact/">
      Contact
    </a>

  </nav>

</header>


<main>

  <section>

    <h2>
      Our Courses
    </h2>

    <article>

      <h3>
        Computer Fundamentals
      </h3>

      <p>
        Learn the basics of computers.
      </p>

    </article>

  </section>


  <aside>

    <h3>
      Related Courses
    </h3>

    <p>
      Explore more computer courses.
    </p>

  </aside>

</main>


<footer>

  <p>
    &copy; 2026 Computer Education
  </p>

</footer>