Overview
What HTML is, how browsers use it, and what this course covers.
HTML is the language that defines the structure of a web page. Every heading, paragraph, image, form, and button on the web starts as an HTML element. The browser reads your HTML file and builds a visible page from it.
When you open a website, your browser fetches an HTML file, parses each element in order, and constructs a tree of objects it can render and make interactive. That tree is called the DOM (Document Object Model). CSS styles it. JavaScript can modify it. But HTML is what creates it in the first place.
What HTML looks like
HTML describes content using elements. An element has an opening tag, some content, and a closing tag:
<p>This is a paragraph.</p>The tag name (p) tells the browser what kind of content this is. A <p> is a paragraph. An <h1> is a top-level heading. An <a> is a link. The browser uses that information to decide how to render the element and what role it plays in the page.
Some elements have no content and no closing tag:
<img src="photo.jpg" alt="A mountain at sunrise" />
<input type="text" />These are called void elements. They cannot contain children.
Why the element you choose matters
Most developers learn HTML by copying patterns: "use <div> for a container, <span> for inline text." That gets pages to look right visually. But it misses most of what HTML actually does.
The browser exposes every element to assistive technology: screen readers, braille displays, voice control software. When you use a <button>, the browser tells assistive technology that this is an interactive control that can be activated. When you use a <div> with a click handler instead, the browser says nothing. Screen reader users cannot find it. Keyboard users cannot focus it. The page looks identical but works only for people using a mouse.
Choosing the right element is not a style preference. It is the difference between a page that works for everyone and one that only works for mouse users.
This course focuses on using the correct element for the job. Every chapter covers not just what elements exist, but when to use them, what happens when you use the wrong one, and how browsers and assistive technology interpret each choice.
Setting up your first web page
You need three files. Create them in the same folder.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My page</title>
<link rel="stylesheet" href="styles.css" />
<script src="app.js" defer></script>
</head>
<body>
<h1>Hello, world</h1>
<button id="toggle">Show message</button>
<p id="message" hidden>You clicked the button.</p>
</body>
</html>/* styles.css */
body { font-family: system-ui, sans-serif; padding: 1rem; }
button { background: #0066cc; color: white; border: none; padding: 0.5rem 1rem; cursor: pointer; }// app.js
document.getElementById('toggle').addEventListener('click', () => {
document.getElementById('message').hidden = false;
});Open index.html directly in a browser. That is all you need to get started. No install, no build step.
How the three files connect
The browser loads index.html first and reads it top to bottom. When it reaches the <link> tag, it fetches styles.css and applies the styles. The defer attribute on the <script> tag tells the browser to fetch app.js and run it only after the HTML is fully loaded.
Each file has exactly one job:
index.htmldefines what content exists and its structure.styles.csscontrols how that content looks: colors, fonts, spacing, layout.app.jscontrols how the page behaves when users interact with it.
Changing one file does not require touching the others. You can restyle the entire page by editing only styles.css. You can replace the JavaScript without touching the HTML structure.
This division is what HTML, CSS, and JavaScript courses each teach in isolation. Start here to understand structure. Then move to CSS for styling and JavaScript for behavior.
What this course covers
Fundamentals introduces how HTML documents are structured, how elements and attributes work, and why semantic elements exist.
Text content covers headings, paragraphs, lists, and links — the building blocks of most web pages.
Images and media covers images with proper alt text, figures with captions, and embedded audio and video.
Forms covers form structure, all the input types, and how to label controls correctly so they are usable by everyone.
Interactive elements covers buttons, the native dialog element, and the details/summary disclosure widget.
Accessibility covers ARIA attributes, keyboard navigation, focus management, and skip links.
This course teaches HTML in isolation. CSS (visual styling) and JavaScript (interactivity) are covered in separate courses. You do not need either to start here.