Elementary Overview

HTML gives a web page its structure. A browser reads HTML elements and builds a document from them. The most basic complete page has a document type declaration, an html element, a head section for document information, and a body section for the content people see on the page.

This first HTML lesson stays intentionally focused on document structure. You will build a minimal page, learn what <!doctype html> means, separate <head> metadata from <body> content, add a title and character encoding, create headings and paragraphs, understand nesting, and validate the finished document. Later HTML lessons can focus separately on links, images, lists, semantic elements, forms, tables, media, accessibility, metadata, and advanced document features.

HTML works alongside other web technologies but has a different job. JavaScript adds behavior, while server-side software such as PHP can generate HTML before a page reaches the browser. HTML itself describes the document structure the browser receives.

What You Should Learn

• What HTML is and what a browser does with it.
• Why modern documents begin with <!doctype html>.
• What the root <html> element represents.
• The difference between <head> and <body>.
• Why <meta charset="utf-8"> belongs near the top of the head.
• What the <title> element controls.
• How headings and paragraphs create visible document content.
• How parent, child, and sibling relationships arise from nesting.
• How to inspect and validate a minimal HTML document.

HTML Is A Markup Language

HTML stands for HyperText Markup Language. It uses elements to describe the meaning and organization of content. A heading is marked as a heading, a paragraph as a paragraph, a link as a link, and so on. The browser interprets that structure and creates an internal representation called the document object model, or DOM.

When you type a web address into a browser, several networking and browser steps happen before the final page appears. The earlier BitcoinVersus.Tech explainer What Happens When You Type a Website Into Your Browser? gives the broader picture. This lesson begins at the point where the browser has HTML to parse.

Build The Smallest Useful Document

Create a plain-text file named index.html and start with this structure:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, web!</h1>
<p>This is my first HTML document.</p>
</body>
</html>

Save the file and open it in a browser. You should see the heading and paragraph in the page itself. The title should appear in the browser tab or window interface. This single file already contains the major structural ideas used by much larger HTML documents.

A code editor can make the nesting easier to see through indentation and syntax highlighting. A monospace font also helps columns and indentation line up visually. Those editor features improve readability, but the browser ultimately cares about the document markup itself.

What The DOCTYPE Does

The first line is:

<!doctype html>

The document type declaration tells modern browsers to process the page using standards mode. It is not an HTML element and it does not have a closing tag. In modern HTML, the short declaration above is the normal form.

Browsers can sometimes display pages that omit or misuse structural markup, but relying on error recovery is poor engineering. A browser being able to repair malformed input does not make the malformed input a good document.

The html Element Is The Root

The <html> element is the root element of the document. In the example it begins with:

<html lang="en">

The lang attribute identifies the document language. That information helps browsers, accessibility software, translation systems, search engines, and other tools interpret the content correctly. The root element contains the document’s head and body.

The head Contains Document Information

The <head> section contains information about the document rather than the main visible page content. A minimal head often contains character encoding and a title:

<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>

<meta charset="utf-8"> declares the character encoding. UTF-8 can represent an enormous range of writing systems and symbols and is the standard choice for modern web pages. Place the character declaration early so the browser knows how to decode the document correctly.

The <title> element provides the document title used by browser tabs and other interfaces. It is not the same as an <h1>. The title describes the document to the browser; the heading is visible content inside the document body.

The body Contains Page Content

The <body> contains the document content intended to appear as part of the page: headings, paragraphs, links, images, lists, forms, sections, tables, and many other elements.

<body>
<h1>Hello, web!</h1>
<p>This is my first HTML document.</p>
</body>

A recent beginner discussion in the HTML community demonstrates why this distinction matters: content placed in the wrong structural location may not behave as expected, while moving visible content into the body restores the intended document structure.

Just started learning html
byu/Fun-Baseball-1873 inHTML

Elements Have Opening Tags, Content, And Closing Tags

Many HTML elements have an opening tag, content, and a closing tag:

<p>This is a paragraph.</p>

Here, <p> opens the paragraph element, the text is its content, and </p> closes it. Some elements do not wrap content and therefore do not use a closing tag in the same way. The character-encoding meta element is one example.

Nesting Creates A Tree

HTML elements can contain other elements. This is called nesting. Proper nesting produces parent, child, and sibling relationships that form a tree-like document structure.

<body>
<main>
<h1>My Page</h1>
<p>Welcome.</p>
</main>
</body>

In this example, body contains main. The main element contains both the heading and paragraph. The heading and paragraph are siblings because they share the same parent.

Indentation is not what creates the relationship—the tags do—but indentation makes the relationship much easier for humans to see. Keep closing tags aligned with the opening structure while you learn.

Headings Create Hierarchy

HTML provides heading levels from <h1> through <h6>. These levels communicate document hierarchy. They should not be chosen merely because one looks visually larger than another. Styling belongs to CSS; HTML heading levels describe structure.

<h1>Main Page Topic</h1>
<h2>First Major Section</h2>
<h3>A Subsection</h3>

For a beginner page, start with one clear page-level heading and organize later sections beneath it. Semantic hierarchy helps readers, accessibility tools, search systems, and future maintainers understand the page.

Paragraphs Represent Paragraphs

The <p> element represents a paragraph of text:

<p>HTML describes the structure of this content.</p>

Do not use repeated line breaks or empty paragraphs merely to create visual spacing. Later CSS lessons will teach presentation and spacing. The HTML should first describe what the content is.

Inspect The Page In The Browser

Open your index.html file in a browser. Then use the browser’s developer tools to inspect the page. You should be able to find the html, head, and body elements in the DOM inspector even though only the body content appears in the page viewport.

This is an important mental model: source markup is parsed into a document tree. Later JavaScript and CSS work with that parsed structure rather than treating the source file as a flat block of text.

Validate The Document

Browsers are intentionally forgiving, so a page can appear to work even when the markup contains mistakes. A validator can reveal structural errors that the browser silently repaired.

Use the W3C Markup Validation Service to check your file. Validation is especially useful while learning because it forces you to distinguish between “the browser displayed something” and “the document follows the expected syntax and structure.”

Common Beginner Mistakes

• Leaving out the doctype: include the modern HTML doctype at the top.
• Putting visible page content in the head: visible content belongs in the body.
• Confusing title and h1: the title labels the document in browser interfaces; h1 is page content.
• Closing elements in the wrong order: nested elements should close in the reverse order they were opened.
• Using headings only for appearance: choose heading levels for document hierarchy.
• Using HTML for spacing: structure content with HTML and leave presentation to CSS.
• Trusting the browser’s repair behavior: validate the source instead of assuming rendered output proves the markup is correct.

Mini Lab

1. Create a directory named html_lab.
2. Create index.html.
3. Add the doctype, html, head, and body.
4. Add UTF-8 character encoding and a page title.
5. Add one h1, two h2 elements, and three paragraphs.
6. Open the file in a browser.
7. Confirm the tab title differs from the visible h1.
8. Inspect the DOM with developer tools.
9. Validate the file with the W3C validator.
10. Deliberately remove one closing tag, inspect what the browser repairs, then restore valid markup.

Knowledge Check + Answers

1. What is HTML? HyperText Markup Language, used to describe the structure and meaning of web content.
2. What does <!doctype html> do? It tells modern browsers to use the current HTML standards mode.
3. What is the root element? <html>.
4. What belongs in the head? Document metadata such as character encoding, title, and other non-body information.
5. What belongs in the body? The page content represented by headings, paragraphs, links, images, forms, and other visible or interactive document elements.
6. What does <meta charset="utf-8"> do? It declares UTF-8 as the document character encoding.
7. Is <title> the same as <h1>? No. Title identifies the document in browser interfaces; h1 is a heading within the body.
8. What is nesting? Placing one HTML element inside another to create document relationships.
9. Why validate HTML? Browsers can repair malformed markup, so validation helps find source errors that rendered output may hide.

Primary References

• WHATWG — HTML Living Standard
• MDN — The html Element
• MDN — The head Element
• MDN — The body Element
• MDN — Doctype
• W3C Markup Validation Service

Elementary Review

An HTML page is a structured document. Start with the doctype, place the document inside <html>, put metadata in <head>, put page content in <body>, nest elements carefully, and validate the result. Once that structure is reliable, every later HTML feature has a correct place to live.

The next canonical HTML lesson is OSHTML.002: Elements, where the track will focus on how HTML elements are formed, how start tags and end tags work, which elements are void elements, how elements nest, and how element choice gives structure and meaning to a document.

Editor’s Note

The featured image is an original 1200×630 BitcoinVersus.Tech color-pencil illustration created specifically for OSHTML.001 and is not reused in the body. The lesson uses a separate original 1200×675 photograph. The three YouTube videos use responsive native Gutenberg 16:9 embed blocks, and the social item uses a responsive native Gutenberg embed. No text boxes are used anywhere in this lesson.

BitcoinVersus.Tech content is provided for informational and educational purposes.