Every website you’ve ever visited starts with HTML. This guide walks through the essential building blocks — tags, elements, and document structure — so you can write and understand your very first web page.
If you’ve read our overview of web development, you already know HTML is one of the three core technologies of the web, alongside CSS and JavaScript. This guide zooms in on HTML specifically: what it actually looks like, how a basic page is structured, and enough hands-on practice to write your very first one.
The good news about HTML is that it’s genuinely one of the most approachable and forgiving starting points in all of programming. There’s no complex logic to learn yet — just a system of labeled containers that tell a browser what each piece of content actually is: a heading, a paragraph, a list, an image.
By the end of this guide, you’ll understand HTML’s basic vocabulary well enough to build a simple page structure of your own.
What HTML Actually Is
HTML stands for HyperText Markup Language. As MDN explains, HTML is the code used to structure a web page and its content — it’s a markup language consisting of a series of elements that wrap around text content to define its structure and give it meaning.
That last part matters more than it sounds: HTML isn’t primarily about making things look a certain way (that’s CSS’s job) — it’s about labeling content with clear, structured meaning. Wrapping a sentence in heading tags tells the browser (and search engines, and screen readers for visually impaired users) “this is a heading,” not just “make this text bigger.”
Anatomy of an HTML Element
Most HTML elements follow the same basic pattern: an opening tag, some content, and a closing tag.
<p>This is a paragraph.</p>Here, <p> is the opening tag, “This is a paragraph.” is the content, and </p> is the closing tag — identical to the opening tag except for the forward slash. According to freeCodeCamp’s HTML basics guide, forgetting a closing tag is one of the most common beginner mistakes, and it’s worth building the habit of typing both tags immediately, before filling in the content between them.
Not every element follows this open-content-close pattern. Some, called empty elements, consist of a single tag with no separate closing tag — the <img> element (used for images) is a common example, since an image doesn’t “contain” text content the way a paragraph does.
The Basic Structure Every HTML Page Needs
According to W3Schools’ HTML basics reference, every HTML document follows the same fundamental skeleton:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Breaking this down piece by piece:
- <!DOCTYPE html> — tells the browser this is a modern HTML5 document. It always goes first, exactly once.
- <html> — the root element that wraps everything else on the page.
- <head> — contains information about the page that isn’t directly displayed, like the page title and links to CSS files.
- <title> — sets the text shown in the browser’s tab or title bar.
- <body> — contains everything actually visible on the page: headings, paragraphs, images, and more.
The Most Common Beginner HTML Elements
A small handful of elements cover the vast majority of what you’ll write as a beginner:
- <h1> through <h6> — headings, from most important (
h1) to least important (h6). Use only one<h1>per page. - <p> — a paragraph of text.
- <a> — a hyperlink, using the
hrefattribute to specify the destination. - <img> — an image, using
srcfor the file location andaltfor descriptive text. - <ul> and <li> — an unordered (bulleted) list and its individual items.
- <div> — a generic container, often used to group content for styling or layout purposes.
Understanding Attributes
Some HTML elements need extra information beyond their content, and that’s what attributes provide. Attributes live inside the opening tag and follow a name=”value” pattern:
<a href="https://example.com">Visit Example</a>
<img src="cat.jpg" alt="A photo of a cat">In the first example, href tells the browser where the link should go. In the second, src points to the image file, and alt provides text that describes the image — useful both for accessibility (screen readers read it aloud) and for situations where the image itself fails to load.
Building Your First Simple Page
Using what’s covered above, here’s a genuinely complete, valid HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my very first web page.</p>
<ul>
<li>Learning HTML</li>
<li>Learning CSS next</li>
<li>Learning JavaScript after that</li>
</ul>
</body>
</html>Save this in a file named index.html using your code editor of choice, then open that file directly in your web browser to see it rendered as an actual, working page.
Nesting Elements Correctly
HTML elements are frequently placed inside one another — a practice called nesting. A list, for example, nests <li> items inside a <ul> element:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>The rule to keep in mind is that nested elements must close in the reverse order they opened — an element that opens first must close last. Mixing this up, like closing an outer element before an inner one, is a common source of confusing rendering bugs, since the browser has to guess what you actually meant.
A helpful habit while learning is to indent nested content, the way the examples in this guide do. Indentation doesn’t affect how the page displays, but it makes it dramatically easier for you (or anyone else) to see which elements are nested inside which, especially once a page grows beyond a few lines.
A Note on Semantic HTML
As you progress past the absolute basics, you’ll encounter elements like <header>, <nav>, <main>, <article>, and <footer>. These are called semantic elements, because their names describe the meaning of the content they wrap, rather than just being generic containers like <div>.
You don’t need these right away — a simple page using <div> for everything will still work. But it’s worth knowing they exist early on, since using them appropriately (a <nav> for navigation links, a <footer> for copyright information) genuinely helps both accessibility tools and search engines understand your page’s structure, on top of making your own code easier to read later.
Common Questions Beginners Ask About HTML
Do HTML tags need to be uppercase or lowercase? Lowercase is the standard convention today, even though HTML technically isn’t case-sensitive for tag names. Sticking to lowercase keeps your code consistent with what you’ll see in nearly every modern tutorial and codebase.
What happens if I forget a closing tag? Browsers are often forgiving and will try to guess what you meant, but the results can be unpredictable — content might display in the wrong place, or nested elements might not close where you expect. It’s best to treat closing tags as mandatory, even when a browser happens to tolerate skipping one.
Do I need to memorize every HTML element? No. Professional developers regularly look up less common elements. What’s worth memorizing is the small set of elements covered here, since they make up the overwhelming majority of everyday HTML — everything else can be looked up the moment you actually need it.
Can I preview my HTML page without uploading it anywhere? Yes. Simply double-click the saved .html file, or open it from your browser’s File → Open menu, and it will render locally exactly as it would once hosted online — no server, hosting account, or internet connection required for a basic page like this.
Quick-Reference HTML Basics Guide
- HTML defines structure and meaning — not visual styling, which is CSS’s job.
- Elements usually have opening and closing tags — with content in between.
- Every page needs the same basic skeleton — doctype, html, head, and body.
- Only one <h1> per page — it represents the main heading.
- Attributes add extra information — like
hreffor links andsrc/altfor images. - Empty elements (like <img>) — don’t need a separate closing tag.
Conclusion
HTML’s real power is in how little you need to know to get started meaningfully. A handful of elements — headings, paragraphs, links, images, and lists — cover the vast majority of real-world web content, and the same basic document skeleton applies to every page you’ll ever write, from a tiny personal page to the largest sites on the internet.
The best next step is simply practice: write out the sample page above yourself rather than copy-pasting it, and try adding a few more paragraphs, a link, or an image of your own to see the structure in action and get comfortable with how the tags relate to what actually shows up in the browser.
In the next guide in this series, we’ll move on to CSS — the language that takes this same HTML structure and actually makes it look like a real, styled website, with colors, fonts, and layout replacing today’s plain black-and-white text.
Explore More Web Development Guides →
Alex Carter is a senior software developer with years of hands-on experience building real-world applications. After watching countless beginners give up on programming simply because most tutorials assumed too much prior knowledge, Alex started Vandutz Academy to do things differently — breaking every concept down into clear, judgment-free, step-by-step lessons. When not writing, Alex is probably debugging someone else’s code (or their own).