Hack Frontend Community

Semantic HTML

What is Semantic Markup?

Semantic markup is an approach to creating HTML documents that uses tags reflecting the meaning of content. Unlike using only <div> or <span>, semantic tags give document structure more significance, making it more understandable for people, search engines, and assistive technologies.

Why is Semantic Markup Important?

  1. Improved Accessibility: Semantic tags help assistive technologies (such as screen readers) better interpret and interact with content. For example, using the <article> tag for an article allows screen readers to understand that it's a separate article.

  2. SEO (Search Engine Optimization): Search engines like Google use semantic elements to better understand page structure. Tags such as <header>, <footer>, <nav> help search engines accurately understand which parts of the page are important, which can affect rankings.

  3. Maintainability and Scalability: Semantic markup makes code more readable and easier to maintain. Other developers can quickly understand your code structure and make changes without errors.

  4. Better Interaction with Browsers and Devices: Semantic markup makes pages more compatible with various browsers and devices, helping improve performance and optimize pages.

Examples of Semantic Tags

TagDescription
<header>Represents the top part of a page or section, usually contains navigation, logo, and headings.
<footer>Contains footer information, such as links to privacy policy or contact details.
<article>Description of independent content, such as an article or blog post.
<section>Page section that usually includes a heading and themes.
<nav>Represents a navigation block containing links to other pages or site sections.
<aside>Contains auxiliary information that is not the main part of content, such as a sidebar.
<main>Main part of the page containing content directly related to the page's primary context.

<h1>, <h2>, <h3>

Headings of various levels that help structure text and make it more understandable.

Semantic Markup Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Markup Example | HackFrontend</title>
</head>
<body>

  <header>
    <h1>HackFrontend</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>Article Title</h2>
      <p>Article text...</p>
    </article>

    <aside>
      <h3>Recommended Articles</h3>
      <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 HackFrontend</p>
  </footer>

</body>
</html>

Tip:

Use semantic tags to improve your HTML code structure. This will not only increase accessibility and SEO, but also simplify project maintenance.