Qarpeo LogoInstitute

Semantics

HTML semantic elements are tags that convey meaningful structure and content, improving accessibility and SEO, such as (<header>), (<footer>), and (<article>).

What are Semantic Elements?

A semantic element provides clear meaning about its content to both the browser and the developer.

  • Non-semantic elements like <div> and <span> do not convey any specific meaning about the content they hold.
  • Semantic elements, such as <img>, <table>, and <article>, clearly define the type of content they represent.

Common Semantic Elements

  • <header>: Represents the introductory section, often containing a logo or navigation.
What Does WWF Do?

WWF's mission:

WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.

index.html
<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment and build a future in which humans live in harmony with nature.</p>
</article>
  • <nav>: Defines a navigation menu for links.
index.html
<nav>
  <a href="home.html">Home</a>
  <a href="about.html">About</a>
</nav>
  • <section>: Groups related content into sections.
About Us

We provide quality services.

index.html
<section>
  <h2>About Us</h2>
  <p>We provide quality services.</p>
</section>
  • <article>: Represents independent content like a blog post or news article.
Breaking News

Today’s top story...

index.html
<article>
  <h2>Breaking News</h2>
  <p>Today’s top story...</p>
</article>
  • <footer>: Contains footer information like copyright or contact details.

© 2025 My Website

index.html
<footer>
  <p>&copy; 2025 My Website</p>
</footer>

Benefits of Semantic HTML

  • Improves SEO: Search engines better understand content.
  • Enhances Accessibility: Screen readers interpret the page more effectively.
  • Better Code Readability: Developers easily understand the structure.

Conclusion

Semantic elements in HTML provide clear meaning about the content, improving both the structure and functionality of a webpage. They enhance SEO, accessibility, and code readability, making it easier for developers and search engines to interpret the content. Elements like <header>, <nav>, <section>, <article> and <footer> help create a well-structured and meaningful layout.

<title>

The HTML <title> element specifies the document's title, which appears in the browser's title bar or tab. It aids in search engine indexing and helps identify the page.

<html>

The HTML (<html>) element acts as the root of an HTML document, containing all other elements and marking the start and end of the document structure.