HTML · Semantic Elements

Detailed Semantic Elements

Header, Footer, Nav, Main, Article, Section, Aside, Address, Time

Find videos you like?

Save to resource drawer for future reference!

All Semantic HTML Elements

Detailed guide to each semantic element with examples

Each semantic element serves a specific purpose and tells browsers and assistive technologies what the content means. This guide covers all major semantic elements with practical examples.

<header>

Intro, logo, nav

<footer>

<nav>

Navigation links

<main>

Main content

<article>

Independent content

<section>

Thematic group

<aside>

Sidebar content

<address>

Contact info

<time>

Date/time

Remember

Semantic elements improve accessibility for screen readers, SEO for search engines, and readability for developers!

Header & Footer Elements

Introduction and conclusion sections

<header>: Contains introductory content for a page or section. Usually includes logo, title, navigation. Can appear in page, article, and section elements.

<footer>: Contains concluding content. Usually has copyright, links, contact info. Can appear at page or section level.

Header & Footer Examples

Page-level and article-level headers and footers

Frontend

<h2>Header & Footer Elements</h2>
<!-- Page Header -->
<header class="page-header">
  <div class="header-content">
    <h1>Tech Blog</h1>
    <p>Latest articles about web development</p>
  </div>
</header>
<!-- Article with Header and Footer -->
<article class="article">
  <header class="article-header">
    <h2>Getting Started with HTML5</h2>
    <p class="meta">Published on <time datetime="2025-12-03">Dec 3, 2025</time></p>
  </header>
  <p>HTML5 introduces semantic elements that make our code more meaningful...</p>
  <footer class="article-footer">
    <p>By: Jane Developer | <a href="#">Read comments (5)</a></p>
  </footer>
</article>
<!-- Section with Header -->
<section class="section">
  <header>
    <h2>Recommended Articles</h2>
  </header>
  <ul>
    <li><a href="#">Advanced CSS Tips</a></li>
    <li><a href="#">JavaScript Best Practices</a></li>
  </ul>
</section>
<!-- Page Footer -->
<footer class="page-footer">
  <p>&copy; 2025 Tech Blog. All rights reserved.</p>
  <nav>
    <a href="#">About</a> |
    <a href="#">Privacy</a> |
    <a href="#">Contact</a>
  </nav>
</footer>

Live Preview

Loading preview...

Navigation, Main & Aside

Page structure and layout elements

<nav>: Contains major navigation links. Only use for primary navigation, not all links.

<main>: The unique, primary content of the page. Only one per page! Helps skip repetitive content.

<aside>: Sidebar or related content. Typically ads, related links, author info, or sidebars.

Nav, Main & Aside Layout

Typical page layout with navigation, main content, and sidebar

Frontend

<h2>Nav, Main & Aside</h2>
<!-- Navigation -->
<nav class="top-nav">
  <h3>Site Navigation</h3>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">Features</a></li>
    <li><a href="/">Documentation</a></li>
    <li><a href="/">Community</a></li>
  </ul>
</nav>
<!-- Main Content -->
<main class="main-content">
  <section class="content-section">
    <h2>Welcome to Our Site</h2>
    <p>This is the primary content area. All main content goes here.</p>
  </section>
</main>
<!-- Sidebar -->
<aside class="sidebar">
  <h3>Quick Links</h3>
  <ul>
    <li><a href="#">Getting Started</a></li>
    <li><a href="#">API Reference</a></li>
    <li><a href="#">Examples</a></li>
  </ul>
  <h3>Recent Updates</h3>
  <ul>
    <li>Version 2.0 Released</li>
    <li>New Tutorial Added</li>
  </ul>
</aside>

Live Preview

Loading preview...

Address & Time Elements

Contact information and temporal data

<address>: Contact information (email, phone, physical address). Not for postal addresses of content, only contact info.

<time>: Dates, times, or durations. The datetime attribute provides machine-readable format.

Address & Time Examples

Contact information and temporal content

Frontend

<h2>Address & Time Elements</h2>
<!-- Address Example -->
<section class="example-section">
  <h3>&lt;address&gt; Element</h3>
  <address class="address-block">
    <strong>TechCorp Inc.</strong><br>
    123 Developer Lane<br>
    San Francisco, CA 94105<br>
    <a href="tel:+14155551234">+1 (415) 555-1234</a><br>
    <a href="mailto:info@techcorp.com">info@techcorp.com</a>
  </address>
</section>
<!-- Article with Author Address -->
<article class="example-section">
  <h3>Article with Author Info</h3>
  <header>
    <h4>Understanding Web Standards</h4>
  </header>
  <p>Web standards help create consistent, accessible experiences...</p>
  <footer>
    <h5>About the Author</h5>
    <address>
      <strong>Dr. Sarah Chen</strong><br>
      <a href="https://example.com">example.com</a><br>
      <a href="mailto:sarah@example.com">sarah@example.com</a>
    </address>
  </footer>
</article>
<!-- Time Examples -->
<section class="example-section">
  <h3>&lt;time&gt; Element</h3>
  <p>
    Published: <time datetime="2025-12-03">December 3, 2025</time>
  </p>
  <p>
    Event time: <time datetime="2025-12-15T14:30:00">3:30 PM on Dec 15</time>
  </p>
  <p>
    Duration: <time datetime="PT2H30M">2 hours 30 minutes</time>
  </p>
</section>

Live Preview

Loading preview...

<address>

Use: Only for contact info, not postal addresses
Machine-readable: N/A

<time>

Use: Dates, times, durations
Machine-readable: datetime attribute

Best Practices

✅ Do This

✓ Use semantic elements appropriately
✓ One <main> per page
✓ Use <nav> for major navigation
✓ Include <address> for contact
✓ Use <time datetime> for dates

❌ Avoid This

✗ Multiple <main> elements
✗ <nav> for non-navigation
✗ Omitting <datetime> attribute
✗ <address> for postal addresses
✗ Overusing <header>/<footer>

Accessibility Impact

These elements create landmarks that screen reader users can navigate to directly. Always use them semantically!

Previous Topic

Div & Span

Generic containers: <div> for blocks and <span> for inline content.

Next Topic

Header & Footer

<header> and <footer> for page/section headers and footers.

Ask a Question

Have a question about Semantic Elements? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Semantic Elements

Detailed Semantic Elements

Header, Footer, Nav, Main, Article, Section, Aside, Address, Time

Find videos you like?

Save to resource drawer for future reference!

All Semantic HTML Elements

Detailed guide to each semantic element with examples

Each semantic element serves a specific purpose and tells browsers and assistive technologies what the content means. This guide covers all major semantic elements with practical examples.

<header>

Intro, logo, nav

<footer>

<nav>

Navigation links

<main>

Main content

<article>

Independent content

<section>

Thematic group

<aside>

Sidebar content

<address>

Contact info

<time>

Date/time

Remember

Semantic elements improve accessibility for screen readers, SEO for search engines, and readability for developers!

Header & Footer Elements

Introduction and conclusion sections

<header>: Contains introductory content for a page or section. Usually includes logo, title, navigation. Can appear in page, article, and section elements.

<footer>: Contains concluding content. Usually has copyright, links, contact info. Can appear at page or section level.

Header & Footer Examples

Page-level and article-level headers and footers

Frontend

<h2>Header & Footer Elements</h2>
<!-- Page Header -->
<header class="page-header">
  <div class="header-content">
    <h1>Tech Blog</h1>
    <p>Latest articles about web development</p>
  </div>
</header>
<!-- Article with Header and Footer -->
<article class="article">
  <header class="article-header">
    <h2>Getting Started with HTML5</h2>
    <p class="meta">Published on <time datetime="2025-12-03">Dec 3, 2025</time></p>
  </header>
  <p>HTML5 introduces semantic elements that make our code more meaningful...</p>
  <footer class="article-footer">
    <p>By: Jane Developer | <a href="#">Read comments (5)</a></p>
  </footer>
</article>
<!-- Section with Header -->
<section class="section">
  <header>
    <h2>Recommended Articles</h2>
  </header>
  <ul>
    <li><a href="#">Advanced CSS Tips</a></li>
    <li><a href="#">JavaScript Best Practices</a></li>
  </ul>
</section>
<!-- Page Footer -->
<footer class="page-footer">
  <p>&copy; 2025 Tech Blog. All rights reserved.</p>
  <nav>
    <a href="#">About</a> |
    <a href="#">Privacy</a> |
    <a href="#">Contact</a>
  </nav>
</footer>

Live Preview

Loading preview...

Navigation, Main & Aside

Page structure and layout elements

<nav>: Contains major navigation links. Only use for primary navigation, not all links.

<main>: The unique, primary content of the page. Only one per page! Helps skip repetitive content.

<aside>: Sidebar or related content. Typically ads, related links, author info, or sidebars.

Nav, Main & Aside Layout

Typical page layout with navigation, main content, and sidebar

Frontend

<h2>Nav, Main & Aside</h2>
<!-- Navigation -->
<nav class="top-nav">
  <h3>Site Navigation</h3>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">Features</a></li>
    <li><a href="/">Documentation</a></li>
    <li><a href="/">Community</a></li>
  </ul>
</nav>
<!-- Main Content -->
<main class="main-content">
  <section class="content-section">
    <h2>Welcome to Our Site</h2>
    <p>This is the primary content area. All main content goes here.</p>
  </section>
</main>
<!-- Sidebar -->
<aside class="sidebar">
  <h3>Quick Links</h3>
  <ul>
    <li><a href="#">Getting Started</a></li>
    <li><a href="#">API Reference</a></li>
    <li><a href="#">Examples</a></li>
  </ul>
  <h3>Recent Updates</h3>
  <ul>
    <li>Version 2.0 Released</li>
    <li>New Tutorial Added</li>
  </ul>
</aside>

Live Preview

Loading preview...

Address & Time Elements

Contact information and temporal data

<address>: Contact information (email, phone, physical address). Not for postal addresses of content, only contact info.

<time>: Dates, times, or durations. The datetime attribute provides machine-readable format.

Address & Time Examples

Contact information and temporal content

Frontend

<h2>Address & Time Elements</h2>
<!-- Address Example -->
<section class="example-section">
  <h3>&lt;address&gt; Element</h3>
  <address class="address-block">
    <strong>TechCorp Inc.</strong><br>
    123 Developer Lane<br>
    San Francisco, CA 94105<br>
    <a href="tel:+14155551234">+1 (415) 555-1234</a><br>
    <a href="mailto:info@techcorp.com">info@techcorp.com</a>
  </address>
</section>
<!-- Article with Author Address -->
<article class="example-section">
  <h3>Article with Author Info</h3>
  <header>
    <h4>Understanding Web Standards</h4>
  </header>
  <p>Web standards help create consistent, accessible experiences...</p>
  <footer>
    <h5>About the Author</h5>
    <address>
      <strong>Dr. Sarah Chen</strong><br>
      <a href="https://example.com">example.com</a><br>
      <a href="mailto:sarah@example.com">sarah@example.com</a>
    </address>
  </footer>
</article>
<!-- Time Examples -->
<section class="example-section">
  <h3>&lt;time&gt; Element</h3>
  <p>
    Published: <time datetime="2025-12-03">December 3, 2025</time>
  </p>
  <p>
    Event time: <time datetime="2025-12-15T14:30:00">3:30 PM on Dec 15</time>
  </p>
  <p>
    Duration: <time datetime="PT2H30M">2 hours 30 minutes</time>
  </p>
</section>

Live Preview

Loading preview...

<address>

Use: Only for contact info, not postal addresses
Machine-readable: N/A

<time>

Use: Dates, times, durations
Machine-readable: datetime attribute

Best Practices

✅ Do This

✓ Use semantic elements appropriately
✓ One <main> per page
✓ Use <nav> for major navigation
✓ Include <address> for contact
✓ Use <time datetime> for dates

❌ Avoid This

✗ Multiple <main> elements
✗ <nav> for non-navigation
✗ Omitting <datetime> attribute
✗ <address> for postal addresses
✗ Overusing <header>/<footer>

Accessibility Impact

These elements create landmarks that screen reader users can navigate to directly. Always use them semantically!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Div & Span

Header & Footer

HTML Code Editor

Building Your Learning Module...

Detailed Semantic Elements

<header>

<footer>

<nav>

<main>

<article>

<section>

<aside>

<address>

<time>

Remember

Header & Footer Examples

Nav, Main & Aside Layout

Address & Time Examples

&lt;address&gt;

&lt;time&gt;

✅ Do This

❌ Avoid This

Accessibility Impact

Div & Span

Header & Footer

HTML Code Editor

Detailed Semantic Elements

<header>

<footer>

<nav>

<main>

<article>

<section>

<aside>

<address>

<time>

Remember

Header & Footer Examples

Nav, Main & Aside Layout

Address & Time Examples

&lt;address&gt;

&lt;time&gt;

✅ Do This

❌ Avoid This

Accessibility Impact

<address>

<time>

<address>

<time>