What is HTML?
Discover how HTML acts as the skeleton of every web page, giving structure and meaning to content through elements and tags.
Every web page you have ever visited — a news article, a social media feed, an online store — is built on HTML. Before any colour, animation, or interactive button can exist, the raw content of a page has to be organised and labelled so the browser knows what it is looking at. HTML is the tool that does exactly that. Learning it is the single most important first step in web development, and the good news is that the fundamentals are simple enough to grasp in one sitting.
#What Does HTML Stand For?
HTML stands for HyperText Markup Language. Each word is meaningful:
- HyperText means text that can link to other text — the clickable links you see everywhere on the web.
- Markup means you annotate (mark up) content with labels that describe what it is.
- Language means it has a defined syntax that both humans and browsers can read.
Because HTML is a markup language and not a programming language, it cannot make decisions, run loops, or do maths. Its only job is to describe what content is on a page and how that content relates to other content.
Think of a manuscript editor
Imagine a physical manuscript handed to a book editor. The editor picks up a red pen and writes notes in the margins: "this is the chapter title", "this paragraph is a quote", "this word should link to the glossary". The editor has not changed the words — they have added labels that tell a reader (or a printer) how to treat each piece of text. HTML is that red pen for the browser.
#Elements and Tags
The building blocks of HTML are called elements. Each element is made up of:
- An opening tag — a keyword wrapped in angle brackets, like
<p>. - The content — the actual text or other elements inside.
- A closing tag — the same keyword prefixed with a slash, like
</p>.
Together they form one complete element:
<p>HTML is the skeleton of the web.</p>The tag name tells the browser what kind of thing this is. <p> means paragraph. <h1> means a top-level heading. <img> means an image. There are about 100 standard HTML tags, but you will use fewer than 20 in most projects.
Always close your tags
Most HTML elements require both an opening and a closing tag. Forgetting the closing tag is one of the most common beginner mistakes. Some tags (called void elements) like <img> and <br> are self-closing and need no closing tag at all — but for all others, if you open it, close it.
#Nesting Elements
Elements can live inside other elements. This is called nesting, and it is how you build complex structures. The rule is simple: always close the inner element before you close the outer one.
<p>Visit <a href="https://example.com">our website</a> for more.</p>#A Full HTML Page
A complete HTML document has a standard structure that every browser expects. It may look like a lot at first, but each piece has a clear purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Here is what each part does:
<!DOCTYPE html>— tells the browser this is a modern HTML5 document. Always the very first line.<html>— the root element that wraps the entire page. Thelangattribute helps screen readers and search engines.<head>— invisible metadata about the page: character encoding, the tab title, links to stylesheets, and more.<meta charset="UTF-8">— declares that the page uses UTF-8 text encoding, which supports almost every character in the world.<title>— the text shown in the browser tab.<body>— everything visible in the browser window lives here.
Browsers are forgiving — but you should not rely on that
Browsers do their best to display pages even when the HTML is technically wrong. You might forget <!DOCTYPE html> and the page will still appear fine. This is intentional — the web is designed to be resilient. That said, malformed HTML can cause subtle layout bugs and accessibility problems, so always write it correctly from the start.
#How the Browser Reads HTML
When you open a web page, the browser downloads the HTML file and reads it top to bottom, building an internal model of the page called the DOM (Document Object Model). Think of the DOM as the browser's live understanding of your page — a family tree of nested elements. Every tag the browser encounters adds a new node to that tree. This is why the order of elements in your HTML matters: content written first appears first.
Which part of an HTML document contains the content that users actually see in the browser window?
Key takeaways
- HTML is a markup language that labels content so browsers know how to display it — it is not a programming language.
- Every HTML element is made of an opening tag, content, and (usually) a closing tag.
- Elements can be nested inside each other to build complex page structures.
- A complete HTML page always starts with <!DOCTYPE html> and has a <head> and a <body>.
- Browsers read HTML top to bottom, building a live model of the page called the DOM.
Complete the closing tag so this becomes one valid paragraph element from the lesson.
<p>HTML is the skeleton of the web.<p>
This code has a bug — what's wrong?
<p>Visit <a href="https://example.com">our website</p></a> for more.This code has a bug — what's wrong?
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.
</body>Arrange these lines into the minimal HTML document skeleton taught in the lesson.
</html>
<title>My First Page</title>
</head>
</body>
<body>
<html lang="en">
<head>
<h1>Hello, world!</h1>
<!DOCTYPE html>
Build a tiny personal introduction page. It should have a proper HTML document structure (DOCTYPE, html, head, body), a page title in the tab, an <h1> with your name, and a <p> paragraph describing yourself in one sentence. Bonus: wrap your favourite website URL in an <a> tag inside the paragraph.
Try it live — edit the code and hit Run to see it rendered: