A
AiTechWorlds
AiTechWorlds
Good HTML is not just about making something appear in a browser. It communicates meaning — to browsers, search engines, screen readers, and your future self. This lesson covers the structural and semantic foundations of every page you will build.
Every HTML page follows the same skeleton:
<!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 web development from scratch in 2026." />
<title>Web Dev Bootcamp 2026</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Visible page content goes here -->
</body>
</html>
<!DOCTYPE html> — Tells the browser this is an HTML5 document. Without it, browsers enter "quirks mode" and render inconsistently. Always include it. Always on the first line.<html lang="en"> — The root element. The lang attribute helps screen readers use the correct pronunciation engine and assists translation tools.<head> — Not visible to users. Contains metadata, links to stylesheets, and configuration for the page.<body> — Everything the user sees lives here.<meta charset="UTF-8">Sets the character encoding. UTF-8 supports virtually every character and emoji on earth. Place this as the very first tag inside <head> — before the title — so the browser knows how to decode the rest of the document.
<meta name="viewport"><meta name="viewport" content="width=device-width, initial-scale=1.0" />
Without this, mobile browsers render the page at desktop width and scale it down, making text tiny. This tag tells the browser to match the device's screen width and start at 1:1 zoom. It is the first step in making any responsive website.
<meta name="description"><meta name="description" content="A hands-on web development bootcamp for 2026." />
Search engines display this text under your page title in search results. Aim for 150-160 characters. It does not directly affect ranking, but a compelling description improves click-through rates.
<title><title>Getting Started | Web Dev Bootcamp 2026</title>
Shown in the browser tab, bookmarks, and search engine results. Make it descriptive and unique per page. Keep it under 60 characters for search result display.
Headings create an outline of your page. Use them to communicate structure, not to control font size.
<h1>Web Development Bootcamp</h1> <!-- One per page — the main topic -->
<h2>Module 1: Fundamentals</h2> <!-- Major sections -->
<h3>Lesson 1: How the Web Works</h3> <!-- Sub-sections -->
<h4>DNS Resolution</h4> <!-- Sub-sub-sections (use sparingly) -->
Rules to follow:
<h1> per page — it is the primary subject, equivalent to an article's headline.<h2> to <h4>.<div> for EverythingA <div> is a generic container with no meaning. HTML5 introduced semantic elements — elements whose names describe their purpose. Search engines and assistive technologies rely on this meaning.
<header>
<nav>
<a href="/">Home</a>
<a href="/courses">Courses</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section id="featured">
<h2>Featured Courses</h2>
<article>
<h3>JavaScript Complete 2026</h3>
<p>Master modern JavaScript from zero to advanced.</p>
</article>
<article>
<h3>React & Next.js</h3>
<p>Build full-stack apps with the most popular React framework.</p>
</article>
</section>
<aside>
<h2>Learning Paths</h2>
<ul>
<li><a href="/path/frontend">Frontend Developer</a></li>
<li><a href="/path/fullstack">Full-Stack Developer</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 AI Tech Worlds. All rights reserved.</p>
</footer>
| Element | Use When |
|---|---|
<header> | Introductory content for a page or section — logo, site nav, page title |
<nav> | A group of navigation links (primary nav, breadcrumbs, pagination) |
<main> | The primary content of the page. Only one per page |
<section> | A thematically grouped block of content with its own heading |
<article> | Self-contained content that makes sense on its own — a blog post, a course card, a comment |
<aside> | Content tangentially related to the main content — sidebars, related links, pull quotes |
<footer> | Closing info for a page or section — copyright, links, contact |
Without semantics — harder to understand and maintain:
<div class="header">
<div class="nav">
<a href="/">Home</a>
</div>
</div>
<div class="main">
<div class="post">
<div class="post-title">My Article</div>
<div class="post-body">Content here...</div>
</div>
</div>
<div class="footer">Copyright 2026</div>
With semantics — self-documenting and accessible:
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<article>
<h1>My Article</h1>
<p>Content here...</p>
</article>
</main>
<footer>Copyright 2026</footer>
The semantic version requires less CSS class naming, is easier to read, and gives screen readers the context they need to navigate the page efficiently.
Screen readers (used by millions of people with visual impairments) use semantic structure to help users navigate pages. With semantic HTML:
<main> content, skipping repeated navigation.<nav> regions are announced as navigation landmarks.<article> and <section> elements create named regions users can list and jump to.Writing semantic HTML is the easiest accessibility win available. It costs nothing extra and improves the experience for everyone.
Valid HTML reduces browser inconsistencies and catches errors early. Use the W3C Markup Validation Service at validator.w3.org — paste your HTML or enter a URL. Common errors to watch for:
alt attributes on <img> elementsid attributes<!DOCTYPE html> and include lang on the <html> element.viewport meta tag is required for responsive behavior on mobile.<h1> per page and never skip heading levels.<div> wherever appropriate.<main>, <header>, <nav>, <article>, <section>, <aside>, and <footer> each have a distinct, defined role.Get this course's notes on Telegram!
Free cheat sheets, summaries & practice exercises