How the Web Actually Works
Before writing HTML, you need a mental model of what happens when you open a website. Once you truly picture this, everything else makes sense.
Think of the web as a giant restaurant. You — sitting at a table with your browser (Chrome, Firefox, Safari) — are the client. When you type an address and press Enter, you place an order. That order is called an HTTP request.
Somewhere in the world, a powerful computer called a server is waiting for orders. It finds the file you asked for, and sends it back to you. That reply is the HTTP response, and inside it is plain text: your HTML.
The most important idea for a beginner: your browser receives text and turns it into a visual page. HTML is that text. Learning HTML means learning how to write instructions the browser knows how to draw.
A page's journey from server to screen
- You type an address and press Enter. Your browser is the client.
- The browser sends an HTTP request across the internet:
GET /index.html. - The server receives the request and finds the matching file.
- It sends back an HTTP response containing the raw HTML text.
- The browser parses the tags and paints the finished page. That's HTML at work.
HTML is not a programming languageIt has no logic, no decisions, no math. It is a markup language: it labels content so the browser knows what each piece is — "this is a heading", "this is a paragraph", "this is an image".
Deep Dive: The Parsing ProcessWhen the browser receives the raw HTML text, it doesn't draw it instantly. First, the browser's HTML Parser reads the text from top to bottom, character by character. It tokenizes the tags and builds an in-memory tree called the DOM (Document Object Model). If it encounters a <script> tag or a <link rel="stylesheet">, it actually pauses the parsing of the page to download and execute those assets, which is why we usually put scripts at the bottom of the body (or use defer).
Anatomy of an HTML Document
Every professional page — from a blog to Facebook — is built on the same small skeleton. Memorise this once and you'll type it for the rest of your career.
The building block: a tag
HTML is written with tags. A tag is a keyword wrapped in angle brackets. Most tags come in a pair — an opening tag and a closing tag with a slash — and the content lives between them:
<p>This is a paragraph.</p>
▲ ▲
opening tag closing tagAn element is the whole thing: opening tag + content + closing tag. Tags can also carry attributes — extra information written inside the opening tag, like <a href="...">.
The boilerplate
Here is the standard starting point for every HTML file. The animation below builds it line by line so you understand the role of each part.
Building the HTML boilerplate
<!DOCTYPE html>— tells the browser "this is a modern HTML5 document". Always the first line.<html>— the root. Everything else lives inside it.<head>— invisible setup: the page<title>(shown in the browser tab), links to CSS, metadata.<body>— everything the visitor actually sees goes here.- Add an
<h1>inside the body and it appears on the page. You just built a web page.
Head vs Body — the key distinctionThe <head> is for the browser (title, settings, styles). The <body> is for the human (text, images, buttons). If something should be seen, it goes in the body.
Text, Headings & Paragraphs
90% of the web is text. HTML gives you a small, powerful set of tags to organise it so both humans and Google understand the hierarchy of your content.
Headings: six levels of importance
Headings run from <h1> (most important — usually the page's main title) down to <h6> (least important). They are not just "big text"; they describe the structure of your document, like a table of contents.
The six heading levels + a paragraph
<h1>is the biggest and most important. Use only one per page.<h2>marks major sections under the title.<h3>nests inside an h2 — a sub-topic.- …all the way down to
<h6>. Notice each level looks smaller by default. <p>holds ordinary paragraphs — the actual body of your writing.
Inline text formatting & Quotes
Inside a paragraph you can emphasise words: <strong> makes text bold and important, <em> adds emphasis (italic), <mark> highlights text, and <br> forces a line break. Use <!-- ... --> to leave comments the browser ignores.
For quoting others, use <blockquote> for long standalone quotes, and <q> for short inline quotes. If you need to display computer code, wrap it in <code>, and use <pre> to preserve exact spaces and line breaks.
Never pick a heading for its sizeIf <h1> looks "too big", don't switch to <h3> to shrink it — that breaks your document's meaning and hurts SEO. Choose headings by importance, then resize them later with CSS.
Links, Images & Media
The "HyperText" in HTML means linked text. Links are what turn isolated pages into a web. Add images and you have the two ingredients of almost every site.
The anchor tag <a>
A link is an <a> element with an href attribute pointing at a destination. You can use absolute URLs (like https://google.com) for external sites, or relative URLs (like about.html or /images/pic.jpg) for files within your own site. Add target="_blank" to open the link in a new tab.
<a href="https://google.com" target="_blank">Visit Google in new tab</a>
<a href="about.html">About page</a> <!-- another page in your site -->The image tag <img> and Responsive Media
Images use a self-closing tag (no closing pair). Two attributes matter: src (where the image file is) and alt (text shown if the image fails, and read aloud to blind users):
An image loads, then a link navigates
- The page renders its heading first.
- The
<img>file downloads and appears.alttext would show if it failed. - An
<a>link renders — underlined and clickable by default. - The user clicks the link…
- …and the browser loads the
hrefdestination. Notice the URL changed toabout.html.
Always write alt text<img src="cat.jpg" alt="A sleeping ginger cat"> — it helps screen-reader users, shows when images break, and Google uses it to understand your images.
Lists & Tables
Menus, steps, features, pricing grids — real sites are full of lists and tables. They're simple, but there's a right structure for each.
Two kinds of list
Use <ul> (unordered) for bullet points where order doesn't matter, and <ol> (ordered) for numbered steps where it does. Each item is a <li> (list item):
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Tables for rows and columns
A <table> is built from rows (<tr>), which hold header cells (<th>) and data cells (<td>). The animation builds one from scratch:
Assembling a table, row by row
| Name | Role |
|---|---|
| Sara | Designer |
| Omar | Developer |
| Lina | Manager |
- First a header row:
<tr>containing two<th>cells. Headers are bold by default. - A data row:
<tr>with two<td>cells. - Add another
<tr>and the table grows. - One more row. Columns stay aligned automatically — that's the point of a table.
Tables are for data — not layoutIn the 2000s people built entire page layouts with tables. Don't. Use tables only for genuinely tabular data (schedules, prices). Page layout is CSS's job — you'll learn Flexbox and Grid in the CSS course.
Forms & User Input
Every login, signup, search bar and checkout is a form. Forms are how your page listens to the user instead of just talking.
The form and its fields
A <form> wraps input controls. The core one is <input>, whose type attribute changes its behaviour: text, email, password, checkbox, radio (for mutually exclusive choices), date, and more. A <label> names a field, and a <button> submits it.
For longer text, use a <textarea> (which can span multiple lines). For dropdown menus, use a <select> wrapping multiple <option> tags.
A signup form being filled and submitted
- A
<label>and an empty<input type="email">render. - The user types their email into the field.
- A second field —
<input type="password">— hides characters as dots. - The
<button>appears, ready to submit. - On click the form is submitted — the data is sent off for processing.
HTML collects, JavaScript reactsHTML builds the form and validates simple rules (like required or a valid email format). To do something with the data — check it, show a message, save it — you'll use JavaScript, which is exactly what the next courses cover.
Semantic HTML & Page Structure
This is what separates a beginner from a professional. Two pages can look identical, yet one is built with meaningful tags and the other with a pile of anonymous <div>s.
A <div> is a generic box with no meaning. You can build a whole site from divs — but nobody (not Google, not a screen reader, not the next developer) knows what each box is for. Semantic tags solve this by naming the regions of a page:
<header>— the top area: logo, site title.<nav>— the navigation menu of links.<main>— the primary, unique content of the page.<article>/<section>— self-contained blocks inside main.<aside>— for sidebars, callouts, or content slightly related to the main content.<figure>&<figcaption>— for wrapping images/diagrams with their descriptive captions.<footer>— the bottom: copyright, contact, links.
Anonymous divs become meaningful regions
- We start with four identical
<div>boxes. Visually fine — but meaningless. - The top div becomes a
<header>. Now it means "page header". - The menu div becomes
<nav>— assistive tech can jump straight to it. - The big content div becomes
<main>— the page's core. - The bottom becomes
<footer>. Same look, far better structure.
Why professionals careSemantic HTML gives you free accessibility, better SEO (Google ranks well-structured pages higher), and code that the next person can read. Reach for a semantic tag first; use a plain <div> only when nothing else fits.
Deep Dive: The Accessibility TreeWhen the browser reads your HTML, it builds the DOM (Document Object Model) for rendering. But it simultaneously builds a second structure: the Accessibility Tree. A <div> is ignored by the accessibility tree because it has no semantic role. A <nav> creates a "navigation" landmark in the tree, allowing screen-reader users to press a single key to jump straight to your menu without listening to the entire page read out loud. Semantic HTML is literally the UI for blind users.
Metadata, SEO & Accessibility
Your page works — but does Google understand it? Can a blind user navigate it? Does it look right when shared on WhatsApp? This module is what turns "it works on my screen" into "it works for everyone".
The <head>: metadata that shapes everything
Nothing in the <head> is visible on the page, yet it controls how the page behaves in the wild. The essentials on every professional page:
<meta charset="UTF-8"> <!-- supports every language/emoji -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sara — Web Developer</title> <!-- browser tab + Google result title -->
<meta name="description" content="I build fast, clean websites.">The viewport tag is not optional — without it, phones render your page zoomed-out and tiny. The <title> and description are exactly what appears in Google search results, so they're your first impression to the world.
Social Media & Open Graph (OG Tags)
To make your links look beautiful when shared on WhatsApp, Twitter, or Discord, you need Open Graph (OG) tags. These tell social platforms which image, title, and description to use for the link preview card:
<meta property="og:title" content="Sara — Web Developer">
<meta property="og:description" content="I build fast, clean websites.">
<meta property="og:image" content="https://sara.dev/preview-image.jpg">
<meta name="twitter:card" content="summary_large_image">How metadata becomes a Google result
- Google reads your
<title>and shows it as the clickable blue headline. - It shows the page's URL underneath.
- Your
<meta name="description">becomes the grey snippet. Write it well — it's your advert.
Accessibility (a11y): building for everyone
Around 1 in 6 people has a disability. Accessible HTML lets screen readers, keyboards and assistive tech work with your page. The good news: most of it is just using HTML correctly.
- Always give images meaningful
alttext. - Connect every form field to a
<label>(viafor/id). - Use real
<button>and<a>tags, not clickable<div>s — they're keyboard-focusable for free. - Use the semantic tags from Module 7 so screen readers can jump between regions.
- Add an
aria-labelwhen an icon-only button has no visible text.
Accessible = better for allCaptions help people in noisy places; good contrast helps in sunlight; keyboard support helps power users. Accessibility isn't a niche feature — it's quality. And Google rewards it with better rankings.
Audio, Video & Embeds
A modern page is more than text and images. HTML5 gave the browser native media — video and audio players with no plugins — plus the ability to embed entire other websites (a map, a YouTube clip, a payment form) right inside your own page.
Native video and audio
The <video> and <audio> tags play media directly. The magic attribute is controls — add it and the browser draws a full play/pause/volume UI for you, for free:
<video controls width="400" poster="thumb.jpg">
<source src="clip.mp4" type="video/mp4">
Your browser can't play this video.
</video>
<audio controls src="song.mp3"></audio>Embedding other sites with <iframe>
An <iframe> ("inline frame") drops another web page inside a rectangle on yours. It's how you place a Google Map, a YouTube video, or a payment widget — you paste the provider's iframe and it just works.
Media elements bringing a page to life
<video controls>renders a real player — play button, scrubber, volume — all drawn by the browser. Addposterfor a thumbnail before it plays.<audio controls>adds a compact audio player. Perfect for podcasts, music or sound clips.- An
<iframe>embeds an entire other page — here a live map — inside a box on yours. Same technique for YouTube, Spotify or a checkout form.
Media responsiblyNever autoplay with sound — it's the fastest way to make visitors leave. Provide captions (a <track>) on video for accessibility, offer more than one <source> format for browser support, and remember big media files are the number-one cause of slow pages — compress them.
Advanced Forms & Validation
Building on what you learned in Module 6, modern HTML provides powerful built-in form validation and advanced input types that used to require complex JavaScript.
Client-Side Validation
HTML5 introduced attributes that let the browser handle validation automatically before a form is submitted:
required— Ensures the user fills out the field.minlengthandmaxlength— Restricts the number of characters.minandmax— Sets numerical or date limits.pattern— Uses Regular Expressions to enforce specific formats (e.g., a specific postal code format).
<form>
<label for="username">Username:</label>
<input type="text" id="username" required minlength="5">
<label for="age">Age:</label>
<input type="number" id="age" min="18" max="99">
<button type="submit">Register</button>
</form>Datalist & Grouping
The <datalist> element provides a native autocomplete feature for text inputs, allowing users to choose from predefined options or type their own. For structuring complex forms, use <fieldset> and <legend> to group related form controls logically, which heavily improves accessibility.
Advanced Input Types
HTML5 brought several highly specialized input types that come with built-in native UI pickers on mobile and desktop, removing the need for heavy JavaScript libraries:
<input type="date">— Renders a fully functional native calendar date picker.<input type="color">— Opens the OS-level color wheel picker.<input type="range" min="1" max="100">— Creates a horizontal draggable slider for choosing a value within a range.<input type="file" multiple accept=".pdf, .jpg">— Opens a file browser and restricts selectable file types.
Validation is a two-way streetWhile HTML validation provides immediate feedback and a better user experience, never rely on it for security. A malicious user can bypass browser validation, so always re-validate data on your server.
Graphics: Canvas & SVG
HTML isn't just about text and standard images. It gives you powerful native elements for drawing graphics, charts, icons, and even rendering 2D/3D games directly in the browser.
SVG (Scalable Vector Graphics)
An SVG isn't composed of pixels; it's a mathematical description of shapes. This means it never loses quality, no matter how much you zoom in. You can write SVG directly inside your HTML. Professional developers use the viewBox attribute to ensure the graphic scales perfectly regardless of the container size:
<svg viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>The Canvas Element
The <canvas> element is a blank slate. Unlike SVG, canvas draws pixels and requires JavaScript to manipulate. It is heavily used for data visualization, games, and complex animations.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>SVG vs. CanvasUse SVG for logos, icons, and illustrations because they are accessible, stylable with CSS, and scale perfectly. Use Canvas for heavy pixel manipulation, like a game or a real-time graph with thousands of data points.
Native Interactivity
It used to be that any dynamic UI behavior required heavy JavaScript. Today, HTML provides powerful interactive elements right out of the box.
Accordions with <details> & <summary>
Want a collapsible FAQ section? You can build one entirely without JavaScript using the <details> element. The <summary> acts as the clickable heading.
<details>
<summary>What is HTML?</summary>
<p>HTML stands for HyperText Markup Language.</p>
</details>Popups & Modals with <dialog>
The <dialog> element creates native popup modals. While you do need a tiny bit of JavaScript to open and close them, the browser handles the complex parts like placing it above everything else and dimming the background (backdrop).
<dialog id="myDialog">
<h2>Hello World</h2>
<p>This is a native modal!</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Modal</button>Web Components: <template>
The <template> tag allows you to write HTML markup that is parsed by the browser but not rendered on the page until you clone it with JavaScript. This is the foundation of modern Web Components, allowing developers to create reusable, custom HTML tags.
<template id="card-template">
<div class="user-card">
<h3>Name goes here</h3>
<p>Role goes here</p>
</div>
</template>Deep Dive: Microdata & SEO
Writing good semantic HTML is the baseline. To truly control how your site appears in search engines and on social media, you need structured data.
What is Microdata and Schema.org?
When Google crawls a recipe page, it can see the word "30 minutes" and guess it's the prep time, but it's not certain. Schema.org provides a standardized vocabulary of tags that you can add directly to your HTML elements (called Microdata) to explicitly tell search engines what the data means.
This is what enables "Rich Snippets" in Google (where a search result shows the star rating, calories, and cooking time directly in the search page).
<!-- Notice the itemscope and itemtype attributes -->
<div itemscope itemtype="https://schema.org/Recipe">
<h1 itemprop="name">Perfect Chocolate Chip Cookies</h1>
<p>By <span itemprop="author">Sara Smith</span></p>
<p>Prep time: <meta itemprop="prepTime" content="PT15M">15 minutes</p>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<span itemprop="ratingValue">4.8</span> stars from
<span itemprop="reviewCount">24</span> reviews.
</div>
</div>JSON-LD: The Modern Alternative
While Microdata is powerful, sprinkling attributes throughout your HTML can get messy. Modern SEO practices strongly favor JSON-LD (JavaScript Object Notation for Linked Data). Instead of modifying your visual HTML, you drop a hidden block of JSON data directly into the <head> of your document. Google vastly prefers this format.
Deep Dive: JSON-LD SyntaxEven though it looks like JavaScript, it's just a structured data format inside a script tag of type application/ld+json. It perfectly separates your visible content (HTML) from your machine-readable metadata, keeping your codebase incredibly clean.
Deep Dive: HTML5 Web APIs
HTML5 is not just new tags like <article> and <video>. It introduced a massive suite of powerful browser capabilities (APIs) that bridge the gap between simple web pages and native mobile applications.
Local Storage & Session Storage
Before HTML5, the only way to store data on the user's computer was via Cookies (which are slow, sent with every request, and limited to 4KB). HTML5 introduced Web Storage, allowing you to save up to 5MB of data directly in the browser using simple JavaScript. This is how web apps remember your dark mode preference or save your unsubmitted form data even if you close the tab.
Geolocation API
HTML5 allows web pages to ask the user for their exact GPS coordinates. This enables food delivery sites to instantly find restaurants near you without you typing an address. (Note: The browser will always prompt the user for permission before sharing location).
Other Notable HTML5 APIs
- Service Workers: Background scripts that allow your website to work entirely offline, caching assets and data just like a native app.
- WebSockets: Enables a continuous two-way connection to a server for real-time applications like chat or multiplayer games (no more constant refreshing).
- Web Share API: Triggers the native sharing sheet on mobile devices (e.g., "Share to WhatsApp/Messages") directly from a button on your web page.
Deep Dive: Progressive Web Apps (PWAs)When you combine semantic HTML5, Service Workers for offline capability, and a Web App Manifest (a JSON file linked in your <head> that defines the app's icon and name), your website becomes a PWA. Users can literally "Install" your website onto their phone's home screen, and it will behave almost identically to an app downloaded from the App Store.
Deep Dive: Advanced Responsive Images
Serving the same 4MB desktop image to a mobile phone on a 3G network is a massive performance killer. Modern HTML provides tags specifically to solve this problem without needing JavaScript.
The srcset attribute
Instead of hardcoding a single image source, you can provide the browser with a list of image sizes and let it decide which one is best to download based on the user's screen size and pixel density (Retina displays).
<img src="hero-800w.jpg"
srcset="hero-400w.jpg 400w,
hero-800w.jpg 800w,
hero-1200w.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Beautiful landscape">The <picture> element for Art Direction
Sometimes just shrinking an image isn't enough; the subject gets too small to see on mobile. The <picture> element allows for Art Direction—serving entirely different cropped images depending on the screen size.
<picture>
<!-- For wide desktop screens, show the wide panorama -->
<source media="(min-width: 800px)" srcset="panorama.jpg">
<!-- For anything smaller, show the square cropped version -->
<img src="square-crop.jpg" alt="Focus on the subject">
</picture>Deep Dive: WAI-ARIA Accessibility
While semantic HTML gets you 90% of the way to a fully accessible site, dynamic JavaScript applications (like custom dropdowns or tabs) require you to manually tell screen readers what is happening. That is what ARIA is for.
Roles, States, and Properties
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a set of attributes that you can add to HTML to convey semantics that native HTML tags lack.
- Roles: Tell the screen reader what the element IS. (e.g.,
role="tablist") - States: Tell the screen reader the current condition of the element. (e.g.,
aria-expanded="true") - Properties: Provide extra information. (e.g.,
aria-controls="panel1")
<!-- A custom accordion button built with a div (bad practice, but common) -->
<div role="button"
tabindex="0"
aria-expanded="false"
aria-controls="content-1">
Click to expand details
</div>
<div id="content-1" hidden>
Here is the hidden content!
</div>The First Rule of ARIANo ARIA is better than bad ARIA. If you can use a native HTML element (like <button> or <details>), use it. Only use ARIA when you are building a custom interactive widget from scratch.
You now understand HTML 🎉
You can structure a full web page: headings, text, links, images, lists, tables, forms and semantic regions. Right now that page has no colour or layout — that's the next course.