Document Structure and Semantic Tags
Document Structure and Semantic Tags
HTML5 introduced semantic tags that describe the purpose of content. Using semantic tags makes your pages more accessible, SEO-friendly, and easier to maintain.
The Page Skeleton
A well-structured HTML5 page uses semantic elements instead of generic <div> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav><a href="/">Home</a></nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Content goes here...</p>
</article>
<aside>Related links</aside>
</main>
<footer>© 2025 My Website</footer>
</body>
</html>
Semantic Elements Explained
<header> contains introductory content or navigation. <nav> wraps navigation links. <main> contains the primary content of the page - there should be only one. <article> is self-contained content like a blog post or news story. <section> groups related content under a heading. <aside> is tangential content like a sidebar. <footer> contains footer information.
Why Semantics Matter
Screen readers use semantic tags to help visually impaired users navigate your page. Search engines use them to understand content hierarchy and importance. Other developers use them to quickly understand your page layout.
Nesting Rules
Elements must be properly nested - the last tag opened must be the first tag closed. Block-level elements (<div>, <p>, <section>) start on a new line. Inline elements (<span>, <a>, <strong>) flow within text.
Key Points
- HTML5 semantic tags describe the purpose of content.
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>are the core layout elements.- Semantic tags improve accessibility, SEO, and code readability.
- Elements must be properly nested - tags opened last close first.
- Block elements start on new lines; inline elements flow within text.
