Frontend // Structure

HTML &
SEMANTICS

HyperText Markup Language is the skeleton of the web. Semantics is the practice of using the correct bone for the job, ensuring that content has meaning to machines (browsers, screen readers) as well as humans.

The DOM Tree

The browser doesn't see "text"; it sees a tree of objects. Every tag you write creates a node in the Document Object Model. Writing clean HTML means building a stable, predictable tree.

// Bad
<div class="nav">Menu</div>
// Good (Semantic)
<nav aria-label="Main">
  <ul>...</ul>
</nav>

Structure Scanner

<header>
Header
<main>
Main Content
<article>
Article
<aside>
Sidebar
<footer>
Footer

Why Semantics Matter?

  • Accessibility: Screen readers rely on tags like <nav> and <main> to navigate.
  • SEO: Search engines weigh content inside <h1> or <article> heavier than generic divs.
  • Maintainability: It is easier to read code that describes what it is.