0
0
HTMLmarkup~5 mins

Why semantic HTML matters

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Semantic HTML helps browsers and people understand the structure and meaning of a webpage. It makes websites easier to use, find, and maintain.

When building a webpage that should be easy to read by screen readers for people with disabilities.
When you want search engines to better understand your page content for improved search results.
When you want your code to be clear and organized for yourself and other developers.
When you want your website to work well on different devices and browsers.
When you want to improve the accessibility and usability of your website.
Syntax
HTML
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<section> ... </section>
<article> ... </article>
<footer> ... </footer>

Semantic tags describe the role of the content inside them, like <header> for page header or <nav> for navigation links.

Using semantic tags helps assistive technologies and search engines understand your page better.

Examples
The <header> tag holds the main heading of the page.
HTML
<header>
  <h1>My Website</h1>
</header>
The <nav> tag groups navigation links.
HTML
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
The <main> tag holds the main content, and <article> is for a self-contained piece of content.
HTML
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>
The <footer> tag contains footer information like copyright.
HTML
<footer>
  <p>Ā© 2024 My Website</p>
</footer>
Sample Program

This webpage uses semantic tags to organize content clearly. It includes a header, navigation, main content with sections and articles, and a footer. The aria-label on the nav helps screen readers understand the navigation purpose.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>Welcome to My Site</h1>
  </header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>About Us</h2>
      <p>We provide helpful web development tutorials.</p>
    </section>
    <article>
      <h2>Latest Article</h2>
      <p>Learn why semantic HTML matters for everyone.</p>
    </article>
  </main>
  <footer>
    <p>Ā© 2024 My Site</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always use semantic tags instead of generic <div> when possible.

Semantic HTML improves accessibility for people using screen readers.

Search engines use semantic tags to better rank and display your pages.

Summary

Semantic HTML gives meaning to your webpage structure.

It helps users, search engines, and developers understand your content.

Use semantic tags like <header>, <nav>, <main>, <section>, <article>, and <footer>.