HTML Basics, Part 1: What HTML Is and How the Web Actually Works

Welcome to the first lesson of a complete, ground-up HTML course. If you’ve never written a line of code before, you’re in exactly the right place — this lesson assumes nothing. By the end, you’ll understand what HTML actually is, how a webpage gets from a server to your screen, and you’ll have written and viewed your very first HTML page.

This is the start of a series that will take you from absolute beginner to genuinely advanced HTML: semantic structure, forms, accessibility, HTML5 APIs, and the practical details that separate hobbyist markup from professional, production-grade HTML. Each lesson builds on the last, but each is also written to stand on its own — if you land here first, you won’t be lost.

What does “HTML” actually mean?

HTML stands for HyperText Markup Language. Let’s unpack that phrase, because every word in it tells you something real:

HyperText — text that contains links (“hyperlinks”) to other text. This is the idea that made the web different from a plain document: any word or image can be a doorway to another page.
Markup — HTML doesn’t calculate, loop, or make decisions like a programming language does. It marks up content, wrapping plain text in tags that describe what that content is — a heading, a paragraph, a list, a link. This is a critical distinction: HTML is not a programming language, it’s a structural/descriptive language.
Language — a set of agreed-upon rules (a specification, maintained by the W3C and WHATWG) that every browser implements, so the same HTML file looks and behaves consistently everywhere.

In short: HTML is how you tell a browser “this chunk of text is a heading, this one is a paragraph, this one is a link to another page.” The browser then decides how to actually draw that on screen — which is really CSS’s job, something we’ll get to later in this series.

How the web actually works, step by step

Before writing any HTML, it helps enormously to understand what happens between you typing a URL and a page appearing on your screen. Here’s the flow, in order:

1. Your Browser
→
sends a request for a URL
→
2. A Web Server
3. Server finds/generates the HTML file
→
sends it back as a response
→
4. Your Browser
5. Your browser parses the HTML text and builds a structural model of the page (called the DOM — more on this below), then paints it on screen.

Every single webpage you’ve ever visited followed this exact sequence. The “file” the server sends back is, at its core, just a plain text file containing HTML — no different in principle from a .txt file, except its contents follow HTML’s rules so the browser knows how to interpret it.

Your first HTML document

Let’s write one. Open any plain text editor (Notepad, TextEdit in plain-text mode, or a code editor like VS Code — don’t use Microsoft Word, which saves hidden formatting that breaks HTML), and type exactly this:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my very first HTML page.</p>
  </body>
</html>

Save the file as index.html (the .html extension matters — it’s what tells your computer and browser to treat it as an HTML document), then double-click it, or drag it into a browser window. You should see a large “Hello, World!” heading and a line of text below it. Congratulations — you just wrote and rendered your first webpage.

Breaking down every line

Nothing in that file is arbitrary. Let’s go through it piece by piece:

<!DOCTYPE html> — this must be the very first line. It tells the browser “interpret this document using the modern HTML5 standard,” as opposed to older, quirkier rules browsers used decades ago for backward compatibility. Every HTML document you write should start with this exact line.
<html>...</html> — the root element. Everything in your document lives inside this single pair of tags.
<head>...</head> — metadata about the page: things that describe the page but aren’t directly displayed as page content (page title, character encoding, links to CSS files, etc.).
<title>...</title> — the text shown in the browser tab. This is the only part of <head> that’s directly visible to the user, and it’s also what search engines usually show as the clickable headline in search results.
<body>...</body> — everything the visitor actually sees rendered on the page goes here.
<h1>...</h1> — a top-level heading (“Heading 1”). We’ll cover the full heading hierarchy (h1 through h6) in the next lesson.
... — a paragraph of text.

Tags, elements, and attributes — the vocabulary you’ll use constantly

These three words get used interchangeably by beginners, but they mean distinct things, and getting them straight now will make every future lesson easier to follow:

A tag is the bracketed piece itself, like  (an “opening tag”) or  (a “closing tag” — note the forward slash).
An element is the whole package: the opening tag, the content inside, and the closing tag together — e.g. This is my very first HTML page. is one paragraph element.
An attribute is extra information added inside the opening tag, in the form name="value". For example:

<a href="https://example.com">Visit Example</a>

Here, a is the tag name (short for “anchor,” HTML’s link element), href is an attribute name (short for “hypertext reference”), and "https://example.com" is that attribute’s value — the destination URL. An element can have multiple attributes, separated by spaces:

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

This link opens in a new tab (target="_blank") and includes a small security best-practice attribute (rel="noopener") that we’ll explain properly when we cover links in depth.

Some elements don’t have a separate closing tag

Not every element wraps content. Some represent a single, self-contained thing and don’t need an opening/closing pair at all. These are called void elements:

<img src="cat.jpg" alt="A sleeping cat">
<br>
<hr>
<input type="text">

An image doesn’t “contain” other HTML the way a paragraph contains text — it just displays a picture. So <img> is self-closing by nature; there’s no such thing as </img>. We’ll cover <img>,   (line break), <hr> (horizontal rule), and form inputs like <input> in detail in later lessons.

Nesting: how elements go inside each other

HTML elements can (and constantly do) contain other elements, not just plain text:

<body>
  <h1>My Recipe Blog</h1>
  <p>
    Welcome! Today we're making <strong>garlic butter pasta</strong>,
    a 20-minute weeknight favorite.
  </p>
</body>

Here, a  element (bold, semantically important text) sits nested inside a  element, which itself sits inside <body>. This is where the phrase “nesting” comes from, and it’s the single most important structural rule in HTML: elements must close in the reverse order they opened. This is valid:

<p>Some <strong>bold</strong> text</p>

This is broken — the tags cross over each other, which browsers will try to guess their way through, often incorrectly:

<p>Some <strong>bold</p></strong> text

How the browser turns your text into the DOM

When the browser receives your HTML text, it doesn’t just “display the text.” It parses it into a tree-shaped data structure in memory called the DOM (Document Object Model) — this is the browser’s internal representation of your page’s structure, and it’s what CSS styles and JavaScript actually interact with (both topics for later in this series). For our simple page, the DOM tree looks like this:

html
└─ head
└─ title → “My First Page”
└─ body
└─ h1 → “Hello, World!”
└─ p → “This is my very first HTML page.”

Every element becomes a “node” in this tree, nested exactly the way you wrote your tags. Understanding that HTML becomes a tree — not just a flat block of text — will make later lessons on CSS selectors and JavaScript DOM manipulation click much faster, because both of those tools work by finding and modifying specific nodes in this tree.

Comments: notes that browsers ignore

You can leave notes in your HTML that never get displayed to visitors, using comment syntax:

<!-- This is a comment. The browser will not display this. -->
<p>This text WILL display.</p>

Comments are useful for leaving reminders for yourself or teammates (“TODO: replace this placeholder image”) directly inside the file, without affecting what visitors see.

Common beginner mistakes to avoid

Forgetting to close tags. Browsers are forgiving and will often “guess” what you meant, but the guess isn’t always what you intended — always close every tag that needs closing.
Using the wrong file extension. If you save your file as index.html.txt or forget .html entirely, your operating system may not know to open it as a webpage.
Editing in a word processor. Programs like Microsoft Word insert invisible formatting characters that corrupt HTML files. Always use a plain-text or code editor.
Mismatched nesting. As shown above, crossing tags (...) causes unpredictable rendering. Close tags in the exact reverse order you opened them.

Recap

In this lesson, you learned: what HTML stands for and what a markup language actually is (as opposed to a programming language); the full request/response journey from typing a URL to seeing a rendered page; the anatomy of a minimal HTML document (<!DOCTYPE>, <html>, <head>, <body>); the precise difference between a tag, an element, and an attribute; void (self-closing) elements; the nesting rule that governs how elements can contain each other; how the browser turns your HTML into a DOM tree; and how to leave comments in your code.

Coming up next: Part 2 will cover text and headings in depth — the full h1–h6 hierarchy, paragraphs, text-level semantic elements like , , and , and why heading structure matters for both accessibility and SEO.