HTML Semantic Elements

A semantic element is a tag whose name tells its meaning. <footer> clearly says “this is a footer”, but <div> says nothing. HTML5 added many semantic tags, so that browsers, search engines and screen readers understand the page better.

---

Main semantic elements

Tag	Meaning
<header>	Top part of a page or section: logo, title, intro
<nav>	Main navigation links
<main>	The main content of the page. Use it only once
<section>	A group of related content, usually with a heading
<article>	Independent content that makes sense alone, like a blog post or a news story
<aside>	Side content, like a sidebar or related links
<footer>	Bottom part of a page or section: copyright, links
<figure>, <figcaption>	An image or a diagram with its caption
<time>	A date or time, readable by machines

---

Example page layout

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Learn HTML</h2>
      <p>Posted on <time datetime="2025-01-15">15 January 2025</time></p>
      <p>Article text goes here.</p>
    </article>

    <aside>
      <h3>Related posts</h3>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog</p>
  </footer>
</body>

---

Why use semantic elements?

• SEO: search engines understand which part is the main content.
• Accessibility: screen readers can jump to the navigation or to the main content directly.
• Readable code: <nav> is easier to understand than <div class="nav">.

---

Summary

• Use header, nav, main, section, article, aside and footer to describe your page.
• They help SEO and accessibility.
• Next: HTML Responsive Design.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.