HTML Notes
HubHTML Document Structure — DOCTYPE, Head, Body, and Meta TagsWhat is HTML? — The Language of the WebHTML Headings, Paragraphs, and Text FormattingHTML Links and Images — Anchor Tags, href, src, altHTML Lists — Ordered, Unordered, and Description ListsHTML Tables — Structure, Colspan, Rowspan, AccessibilityHTML Forms — Input Types, Labels, Validation, and AccessibilityHTML Interview Questions — 50 Questions with AnswersHTML5 Features — Audio, Video, Canvas, Storage, and APIsSemantic HTML5 — Elements, Structure, SEO, and Accessibility
Master semantic HTML5 elements — article, section, aside, header, footer, main, nav, figure, time, address — understand why semantics matter for SEO, accessibility, and maintainability with real-world page structure examples.
Semantic HTML means using elements that describe the meaning and purpose of content, not just its appearance. A <div> tells the browser nothing. An <article> says: "this is a self-contained piece of content." A <nav> says: "this is navigation." That meaning benefits search engines, screen readers, and developers reading your code.
The Core Semantic Layout Elements
<header>
The introductory content of a page or section. Can appear at the top of the page, or inside an <article> / <section>:
Example
<!-- Page-level header -->
<header>
<a href="/" aria-label="WoHoTech Home">
<img src="/logo.svg" alt="WoHoTech" width="120" height="40">
</a>
<nav aria-label="Main navigation">
<a href="/subjects">Subjects</a>
<a href="/problems">Problems</a>
</nav>
</header>
<!-- Article-level header -->
<article>
<header>
<h1>Understanding CSS Grid</h1>
<p>Published by <a href="/author/priya">Priya Sharma</a> on
<time datetime="2026-06-15">June 15, 2026</time></p>
</header>
<p>Article content...</p>
</article>
<footer>
Closing content for a page or section — author info, copyright, related links:
Example
<!-- Page-level footer -->
<footer>
<div class="footer-links">
<nav aria-label="Footer navigation">
<a href="/about">About</a>
<a href="/privacy">Privacy Policy</a>
<a href="/contact">Contact</a>
</nav>
</div>
<p>© 2026 WoHoTech. All rights reserved.</p>
</footer>
<!-- Article-level footer -->
<article>
<h1>Article Title</h1>
<p>Content...</p>
<footer>
<p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/css">CSS</a></p>
<p>Last updated: <time datetime="2026-07-01">July 1, 2026</time></p>
</footer>
</article>
<main>
The dominant content of the page — the central topic. Only one <main> per page. It should not contain navigation, headers, or footers:
Example
<body>
<header>...</header>
<nav>...</nav>
<main id="main-content">
<!-- All primary page content goes here -->
<h1>HTML Complete Guide</h1>
<article>...</article>
</main>
<footer>...</footer>
</body>
id="main-content" is a convention for skip navigation links:
html example
<a href="#main-content" class="skip-link">Skip to main content</a><nav>
Navigation links — site menus, breadcrumbs, table of contents, pagination. Not every group of links needs <nav> — only major navigation blocks:
Example
<!-- Main site navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/subjects">Subjects</a></li>
<li><a href="/problems">Problems</a></li>
</ul>
</nav>
<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/subjects">Subjects</a></li>
<li aria-current="page">HTML Guide</li>
</ol>
</nav>
<!-- Pagination -->
<nav aria-label="Article pagination">
<a href="/page/1" rel="prev">← Previous</a>
<a href="/page/3" rel="next">Next →</a>
</nav>
Use aria-label on each <nav> if there are multiple on the page — screen readers use it to differentiate them.
Content Sectioning Elements
<article>
A self-contained, independently distributable piece of content. If you could copy it to another site and it still makes complete sense on its own, it's an <article>:
- Blog post
- News article
- Forum post
- Comment
- Product card
- Tutorial
html example
<article>
<header>
<h2>Getting Started with React Hooks</h2>
<p>By <strong>Arjun Mehta</strong> ·
<time datetime="2026-06-20">June 20, 2026</time> ·
8 min read</p>
</header>
<p>React Hooks revolutionised how we write functional components...</p>
<section>
<h3>useState Hook</h3>
<p>The useState hook lets you add state to functional components...</p>
</section>
<footer>
<p>Filed under: <a href="/react">React</a>, <a href="/javascript">JavaScript</a></p>
</footer>
</article><section>
A thematic grouping of content, typically with a heading. Used to break a long article or page into logical parts:
html example
<main>
<h1>HTML Complete Guide</h1>
<section id="introduction">
<h2>Introduction</h2>
<p>HTML is the foundation of every webpage...</p>
</section>
<section id="elements">
<h2>Core Elements</h2>
<p>HTML uses tags to define elements...</p>
</section>
<section id="forms">
<h2>Forms and User Input</h2>
<p>Forms allow users to interact with your page...</p>
</section>
</main><article> vs <section> — The Key Difference
| Element | When to use |
|---|---|
<article> | Content that is self-contained — makes sense on its own |
<section> | A thematic group within a larger piece — does not stand alone |
A page of blog posts: each post is an <article>. Inside one post, chapters are <section>.
<aside>
Content tangentially related to the main content — a sidebar, pull quote, biography box, related articles panel:
Example
<main>
<article>
<h1>Introduction to Machine Learning</h1>
<p>Machine learning is a subset of AI that enables computers to...</p>
<aside>
<h3>Quick Definition</h3>
<p>A neural network is a computational model loosely inspired by the
human brain, consisting of interconnected nodes (neurons).</p>
</aside>
<p>Continuing the main article content...</p>
</article>
<!-- Page-level sidebar -->
<aside aria-label="Related articles">
<h2>You Might Also Like</h2>
<ul>
<li><a href="/deep-learning">Deep Learning Guide</a></li>
<li><a href="/python-ml">Python for ML</a></li>
</ul>
</aside>
</main>
Text-Level Semantic Elements
<time>
Represents a specific time or date. The datetime attribute provides a machine-readable version:
Example
<!-- Date -->
<p>Published on <time datetime="2026-06-15">June 15, 2026</time></p>
<!-- Time -->
<p>Class starts at <time datetime="09:30">9:30 AM</time></p>
<!-- Date and time -->
<p>Event: <time datetime="2026-12-25T10:00">December 25, 10:00 AM</time></p>
<!-- Duration -->
<p>This course takes <time datetime="PT6H">6 hours</time> to complete.</p>
The datetime format:
- Date:
YYYY-MM-DD(e.g.,2026-06-15) - Time:
HH:MM(e.g.,14:30) - Date + time:
YYYY-MM-DDTHH:MM(e.g.,2026-06-15T14:30) - Duration:
PTnHnM(e.g.,PT2H30M= 2 hours 30 minutes)
<address>
Contact information for the nearest <article> or <body>:
html example
<address>
WoHoTech Learning Platform<br>
123 Tech Park, Koramangala<br>
Bengaluru, Karnataka 560095<br>
India<br>
<a href="mailto:hello@wohotech.in">hello@wohotech.in</a><br>
<a href="tel:+918012345678">+91 80 1234 5678</a>
</address><figure> and <figcaption>
Groups media content (image, video, code, chart) with its caption:
Example
<figure>
<img src="dom-tree.png" alt="DOM tree diagram showing html, head, and body nodes" width="600" height="400">
<figcaption>Figure 1: The HTML DOM tree structure. Every element becomes a node.</figcaption>
</figure>
<!-- Can also be used for code examples -->
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example: A simple JavaScript greeting function using template literals.</figcaption>
</figure>
Complete Page Structure Example
A real-world, semantically correct blog page:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn semantic HTML5 — use meaningful elements for better SEO and accessibility.">
<title>Semantic HTML5 Guide | WoHoTech</title>
</head>
<body>
<!-- Skip to main content (accessibility) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header role="banner">
<a href="/" aria-label="WoHoTech home page">
<img src="/logo.svg" alt="WoHoTech" width="120" height="40">
</a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/subjects">Subjects</a></li>
<li><a href="/problems">Problems</a></li>
<li><a href="/assistant">AI Assistant</a></li>
</ul>
</nav>
</header>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/subjects">Subjects</a></li>
<li><a href="/subjects/html-complete-guide">HTML Guide</a></li>
<li aria-current="page">Semantic HTML</li>
</ol>
</nav>
<main id="main-content">
<article>
<header>
<h1>Semantic HTML5 — Structure with Meaning</h1>
<p>
By <address><a href="/author/team">WoHoTech Team</a></address> ·
<time datetime="2026-07-01">July 1, 2026</time> ·
12 min read
</p>
</header>
<section id="why-semantics">
<h2>Why Semantics Matter</h2>
<p>Semantic elements communicate meaning to browsers and developers...</p>
<aside>
<h3>Did You Know?</h3>
<p>Roughly 71 million people worldwide use screen readers.
Semantic HTML directly improves their experience.</p>
</aside>
</section>
<section id="semantic-elements">
<h2>Core Semantic Elements</h2>
<section id="header-footer">
<h3>Header and Footer</h3>
<p>...</p>
</section>
<section id="main-nav">
<h3>Main and Nav</h3>
<p>...</p>
</section>
</section>
<footer>
<p>Last updated: <time datetime="2026-07-01">July 1, 2026</time></p>
<p>
Tags:
<a href="/tag/html">HTML</a>,
<a href="/tag/accessibility">Accessibility</a>,
<a href="/tag/seo">SEO</a>
</p>
</footer>
</article>
<aside aria-label="Related content">
<h2>Related Topics</h2>
<ul>
<li><a href="/subjects/html-complete-guide/basics/headings-and-text">HTML Headings</a></li>
<li><a href="/subjects/html-complete-guide/forms/form-basics">HTML Forms</a></li>
</ul>
</aside>
</main>
<footer role="contentinfo">
<nav aria-label="Footer links">
<a href="/about">About</a>
<a href="/privacy">Privacy</a>
<a href="/contact">Contact</a>
</nav>
<p>© 2026 WoHoTech. All rights reserved.</p>
</footer>
</body>
</html>
Semantic Elements Cheat Sheet
| Element | Category | Use For |
|---|---|---|
<header> | Layout | Page or section header |
<footer> | Layout | Page or section footer |
<main> | Layout | Primary page content (one per page) |
<nav> | Layout | Major navigation blocks |
<article> | Content | Self-contained content |
<section> | Content | Thematic grouping with heading |
<aside> | Content | Supplementary, tangential content |
<figure> | Media | Media with caption |
<figcaption> | Media | Caption for figure |
<time> | Inline | Dates and times |
<address> | Contact | Contact information |
<mark> | Inline | Highlighted text |
<details> | Interactive | Expandable disclosure widget |
<summary> | Interactive | Visible heading for <details> |
<dialog> | Interactive | Modal or popup dialog |
Summary
- Use
<header>,<footer>,<main>,<nav>for page-level structure - Use
<article>for self-contained content,<section>for thematic groups within content - Use
<aside>for sidebars, pull quotes, and supplementary content - Add
aria-labelwhen multiple<nav>or<aside>elements exist on the page - Use
<time datetime="...">for all dates — thedatetimeattribute makes it machine-readable - Semantic HTML is the single highest-impact change for accessibility and SEO
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for Semantic HTML5 — Elements, Structure, SEO, and Accessibility.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, semantic, semantic html5 — elements, structure, seo, and accessibility
Related HTML Complete Guide Topics
Continue learning this concept
Advanced / HTML5HTML5 Features — Audio, Video, Canvas, Storage, and APIsExplore HTML5BasicsHTML Headings, Paragraphs, and Text FormattingLearn all HTML text elements — h1 through h6 headings, paragraphs, line breaks, strong, em, span, div, blockquote, code, pre, and inline vs block elements with practical examples.BasicsHTML Links and Images — Anchor Tags, href, src, altMaster HTML links and images — anchor tags, href types (absolute, relative, mailto, tel), target attribute, images with src and alt, figure, figcaption, responsive images with srcset, and image optimization best practices.BasicsHTML Lists — Ordered, Unordered, and Description ListsMaster all HTML list types — unordered lists with bullets, ordered lists with numbers, description lists, nested lists, list item styling, and when to use each type with real-world examples.BasicsHTML Tables — Structure, Colspan, Rowspan, AccessibilityLearn HTML tables completely — table structure with thead, tbody, tfoot, spanning cells with colspan and rowspan, caption, scope, and making tables accessible for screen readers.FormsHTML Forms — Input Types, Labels, Validation, and AccessibilityMaster HTML forms completely — form element, all input types (text, email, password, number, date, checkbox, radio, file), textarea, select, fieldset, legend, labels, built-in validation, and form accessibility.