Lesson · Beginner
Your first HTML page
Create a complete HTML document, open it in a browser, and understand what each required part contributes.
- Published
- Last checked
The direct answer
An HTML page is a text file whose markup gives content meaning and structure. The browser parses that markup into a document it can display and expose to assistive technology.
Start with a complete document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My first page</title>
</head>
<body>
<h1>Hello, web</h1>
<p>I made a complete HTML document.</p>
</body>
</html>Save this as index.html, then open it in a browser. The filename is ordinary;
the document structure is what makes it HTML.
Why this works
The doctype selects modern HTML parsing. The lang value describes the document
language. Metadata belongs in head; visible content belongs in body. The
title names the browser tab and often supplies the default search result title.
Common mistakes
- Putting visible headings inside
head. - Omitting the language when the page language is known.
- Using line breaks or bold text instead of meaningful headings and paragraphs.
How browsers actually behave
The browser tokenizes the file, applies HTML parsing rules, and builds a Document Object Model tree. HTML error recovery is deliberately forgiving: missing end tags or misplaced elements may still produce a visible page. The recovered tree can differ from the source you thought you wrote, so “it renders” is not proof that the document is correct.
The doctype is a parsing switch rather than an element. meta charset tells the
browser how to decode bytes, and putting it early avoids interpreting later text
with the wrong encoding. The page can exist without CSS or JavaScript; those
languages add presentation and behavior after the HTML supplies content and
structure.
Decisions and trade-offs
Begin with one complete file because it exposes the whole request-response artifact. A framework becomes useful when repeated templates, data, or interaction justify its build and runtime cost. It is not required to make a heading, link, image, or form meaningful.
Use lowercase tag and attribute names, quote attribute values, and indent nested
content consistently. HTML permits more variation, but a predictable house style
makes review and diffs easier. Do not self-close ordinary HTML elements; learn
which elements are void, such as meta and img, and which require end tags.
Accessibility consequences
The root language affects pronunciation, braille translation, spell checking,
and other language-aware behavior. A truthful title helps people identify a tab
among several open pages. A single descriptive h1 gives the visible document a
clear starting point. These are small declarations with consequences beyond
visual layout.
Use native elements for their defined jobs from the first page. Replacing a button with a clickable generic container may look identical but loses keyboard activation, focus behavior, and a reliable accessibility role.
Failure diagnosis and fixes
- The browser shows the markup as text. The file was saved as plain text with the wrong extension or escaped markup. Confirm the filename and source.
- Accented characters look corrupted. Encoding was missing or declared too
late. Save UTF-8 and place
meta charsetnear the start ofhead. - A change does not appear. The wrong file is open or unsaved. Check the address bar, save, and perform a normal reload.
- The DOM differs from the source. Invalid nesting triggered parser recovery. Inspect the Elements panel and validate the document.
Verify it
Open the file directly, inspect its DOM, and compare the root, head, and
body with the source. Run an HTML validator and repair the first structural
error before later cascading messages. Navigate only by keyboard, zoom text to
200%, and narrow the viewport to 320 CSS pixels. Disable CSS and JavaScript if
you added either; the heading and paragraph should still be present, ordered,
and understandable.
Exercise and next step
Change the title, heading, and paragraph. Reload the page and identify where each change appears.
Solution check
The title should change the tab label. The heading and paragraph should change inside the page. If they do not, confirm that you saved and reopened the same file.
Next, separate document metadata from visible content in the document-structure lesson.
Boundary of this lesson
One valid file is the beginning of a site, not proof of publishing readiness. Links, responsive presentation, accessibility behavior, metadata, hosting, and production verification each add separate responsibilities. Keep this first artifact small enough that you can explain every line before adding tooling or generated code.
Save a second copy with one closing tag removed, open both versions, and compare the source with the DOM the browser constructed. Repair the invalid copy with a validator before continuing. Seeing parser recovery this early makes later layout or scripting bugs easier to classify instead of treating every visible difference as a CSS problem.
Free template + launch checklist
Build a page you can check before launch
Start with one reviewed semantic HTML page, then work through the one-page checklist against your published URL.