On this page
An HTML document is a plain text file that gives a browser both content and instructions about that content. Its outer structure tells the browser where document information belongs and where the visible page begins.
You do not need dozens of elements to make a useful first document. A small, deliberate structure is easier to inspect and gives every later lesson a dependable starting point.
A quick explanation of an HTML document
A complete page has a document declaration followed by one root <html> element. Inside that root are two main parts:
<head>contains information about the document.<body>contains the document content presented in the browser window.
The browser parses this text and builds an in-memory document tree. Correct nesting matters: an element that starts inside <body> should also end inside <body>.
Build the complete minimal example
Create a folder called learning-journey, then add one file:
learning-journey/
└── index.html<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>About my learning journey</title>
</head>
<body>
<main>
<h1>About my learning journey</h1>
<p>I am learning how browsers turn HTML into a structured page.</p>
<p>My next step is to choose elements for their meaning, not their appearance.</p>
</main>
</body>
</html>Save the file and open it in a browser. The page will look plain because it has no custom CSS. That is useful here: you can concentrate on structure before presentation.
What <!doctype html> does
The doctype is a declaration, not a normal HTML element. The modern spelling is short:
<!doctype html>It tells a browser to render the document in standards mode instead of a legacy quirks mode. Older doctypes could be long because they referred to earlier document definitions. Do not copy an XHTML doctype into a new beginner page; the modern HTML doctype is the right starting point.
Place it on the first line. It does not have a closing tag and does not create visible content.
The <html> element and lang
The <html> element is the root element. Everything else in this page is nested inside it.
Its lang="en" attribute identifies English as the document’s main human language. This helps browsers and assistive technologies process text with appropriate language rules. Change the value when the page’s main language changes; do not leave en on a page written mainly in another language.
lang does not translate content. It describes the language you actually wrote.
The difference between <head> and <body>
The document head is a container for metadata: information that helps software understand, label, or load the page. Its contents can include the document title, character encoding, links to stylesheets, icons, and other metadata.
The body contains the page’s visible and interactive content: headings, paragraphs, lists, links, images, forms, and the other elements a reader uses.
Declare the character encoding
This line tells the browser to interpret the file as UTF-8:
<meta charset="UTF-8" />UTF-8 supports text from a very broad range of writing systems. Put the declaration near the start of <head> so the browser sees it early. This reduces the chance that punctuation or non-English characters are interpreted incorrectly.
The slash before > is permitted, but HTML does not require XHTML-style closing syntax for this void element. Consistency matters more than adding old XHTML rules.
Set the viewport for responsive pages
The viewport metadata tells mobile browsers to use the device’s available width as the layout viewport:
<meta name="viewport" content="width=device-width, initial-scale=1" />This does not make a fixed layout responsive by itself. It gives responsive CSS the viewport it expects. Later, you will combine it with flexible widths and a content-led breakpoint.
Not every possible metadata field belongs in every document. Add metadata because it has a real job, not because a copied template contains it.
Give the document a useful title
<title> contains text only. In this example it labels the browser tab and provides a useful name when the page is bookmarked:
<title>About my learning journey</title>Avoid titles such as “Page” or “Untitled.” A reader with several tabs open should be able to identify this page from its title.
Add visible headings and paragraphs
Inside <body>, the <main> element wraps the dominant page content. The <h1> identifies the page’s main topic, and each <p> marks a paragraph:
<main>
<h1>About my learning journey</h1>
<p>I am learning how browsers turn HTML into a structured page.</p>
<p>My next step is to choose elements for their meaning, not their appearance.</p>
</main>HTML headings are not a shortcut for choosing a font size. They describe a content hierarchy. Use CSS later when you want to change how a heading looks.
Keep heading order logical
A short page may need only one <h1>. When you add major sections below it, give them <h2> headings. A subsection inside one of those sections can use <h3>.
Think of the levels as an outline:
h1: About my learning journey
h2: What I have learned
h3: HTML notes
h2: What I will build nextDo not jump from <h1> to <h4> merely because the browser’s default <h4> looks smaller. That makes the hierarchy harder to understand. Style the appropriate heading instead.
Inspect the document in a browser
Open index.html, then use your browser’s developer tools. The exact labels vary, but the process is similar:
- Right-click the heading and choose Inspect.
- Find the
<h1>inside<main>in the Elements or Inspector panel. - Expand the document tree to locate
<head>and<body>. - Change the heading text temporarily in DevTools and observe the page.
- Refresh. The change disappears because DevTools changed the loaded document, not your saved file.
You can also view the page source to see the original HTML response or file. The live inspector shows the document tree after the browser has parsed it, so the two views answer different questions.
Common beginner mistakes
Putting visible content in <head>. Move headings, paragraphs, and page controls into <body>.
Confusing <title> with <h1>. Check the tab and the page separately. They serve related but different purposes.
Forgetting a closing tag. A missing </p> or </main> can make later markup nest in unexpected ways. Use indentation to reveal the structure.
Saving rich text instead of plain text. A word processor may add hidden formatting. Use a code editor and save the filename as index.html, not index.html.txt.
Using heading levels for appearance. Choose the level from the content hierarchy, then style it with CSS.
Practice
Practice: extend the learning journey
Add an <h2> named “What I am learning.” Under it, add one paragraph that mentions HTML. Add a
second <h2> named “What I will build.” Refresh the browser, inspect the resulting heading tree,
and confirm that both sections are siblings below the main heading.
What to learn next
You now have a complete document shell and a logical heading outline. Next, learn how semantic HTML describes page regions and self-contained content. That lesson will help you choose meaningful elements inside the body before CSS changes their appearance.