This article is part 1 of a four-part series on HTML and CSS fundamentals. Continue with Part 2: CSS Basics, Part 3: Flexbox and Grid, and Part 4: Responsive Web Design.
Every website you’ve ever visited is built on HTML. It’s the language browsers use to understand what’s a piece of text, what’s an image, and what’s a heading. Anyone learning web development starts here — not with a framework, but with the building blocks every single page on the web is made of. This guide walks you through how HTML works step by step and shows you how to write your first HTML page.
Inhaltsverzeichnis
What Is HTML, Exactly?
HTML stands for “HyperText Markup Language.” It’s not a programming language in the traditional sense — it’s a markup language: it describes the structure and meaning of content, not its behavior. With HTML, you tell the browser “this is a heading,” “this is a paragraph,” “this is a link.” How those elements actually look is handled by CSS (more on that in Part 2 of this series), and how they behave is handled by JavaScript.
Every HTML file is a plain text file with a .html extension that a browser can read and turn into a visible page. You don’t need expensive software for this — a simple text editor (VS Code, Notepad++, or even your operating system’s default editor) is completely sufficient.
Tags, Elements, and Attributes: The Basic Building Blocks
HTML is made of tags. A tag is written in angle brackets, for example <p> for a paragraph. Most tags come in pairs: an opening tag and a closing tag (identifiable by the forward slash):
<p>This is a paragraph of text.</p>The opening tag, content, and closing tag together form an element. Some elements have no content and don’t need a closing tag, like an image:
<img src="cat.jpg" alt="A sleeping cat">Here you also see attributes: src and alt are extra pieces of information inside the opening tag that give the browser more context. src specifies the path to the image file, and alt provides alternative text for screen readers and in case the image fails to load — important for both accessibility and SEO.
The Basic Structure of an HTML Page
Every HTML file follows a fixed basic structure. Here’s the minimum a browser needs to interpret correctly:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Welcome to my page</h1>
<p>This is my first piece of HTML content.</p>
</body>
</html>What’s happening here:
<!DOCTYPE html>tells the browser this is a modern HTML5 document.<html lang="en">is the root element of the page; thelangattribute helps screen readers and search engines identify the language correctly.<head>contains metadata that isn’t directly visible: character encoding, page title, linked CSS files.<body>contains the visible content of the page — everything the visitor actually sees.
The Most Important HTML Tags at a Glance
You don’t need to memorize every HTML tag (there are over 100), but a small core set covers the vast majority of ordinary web pages:
<h1>through<h6>— headings, from most important (h1) to least important (h6)<p>— a paragraph of text<a href="...">— a link to another page or resource<img src="..." alt="...">— an embedded image<ul>/<ol>with<li>— unordered and ordered lists<div>— a generic block container with no inherent meaning, mostly used for structuring/styling<span>— a generic inline container, e.g. to style a single word<button>— a clickable button<form>,<input>,<label>— building blocks for forms
Semantic HTML: Meaning, Not Just Appearance
A common beginner mistake is building everything out of <div> elements (“div soup”). Modern HTML5 instead offers semantic elements that also tell the browser, search engines, and assistive technologies like screen readers what role a section plays:
<header>— the header area of a page or section<nav>— a navigation area containing links<main>— the main content of the page (should appear only once per page)<article>— a self-contained piece of content (e.g. a blog post)<section>— a thematic section within a page<aside>— supplementary content, e.g. a sidebar<footer>— the footer area of a page or section
Semantic HTML isn’t just “cleaner code” — it has concrete benefits: better accessibility for people using screen readers, better search engine rankings because Google understands your page structure more easily, and more maintainable code, since each section’s intent is already baked into the tag name.
Your First Own HTML Page: Step by Step
Now let’s put it all together. Here’s how to build your first complete, semantically sound HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Project</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<article>
<h2>My First Blog Post</h2>
<p>Today I learned how HTML works!</p>
<img src="learning.jpg" alt="Person learning on a laptop">
</article>
</main>
<footer>
<p>© 2026 My Blog</p>
</footer>
</body>
</html>Save this code in a file named index.html and double-click it to open it in your browser — that’s your first own webpage, done. From here you can experiment: add more paragraphs, insert a second image, add a list of your favorite topics.
Common Beginner Mistakes to Avoid
- Forgetting to close tags: A missing closing tag can throw off the rest of the page. Modern editors usually warn about this.
- Incorrect nesting:
<p><div>...</div></p>is invalid because a block-level element doesn’t belong inside an inline element like<p>. - Using HTML for design: Attributes like the old
<font>tag are a thing of the past — appearance is CSS’s job, not HTML’s. - Missing
altattributes on images: Bad for accessibility and SEO. - Multiple
<h1>tags per page: For a clear document structure, a page should generally have only one main<h1>.
What Comes Next?
With this foundation, you can already write simple, structured web pages. The next logical step is to visually style your page — and for that, you need CSS. In Part 2 of this series you’ll learn selectors, the box model, and how to control colors, fonts, and spacing: CSS Basics: Styling Web Pages with Selectors, the Box Model, and Layout.
If you then want to dive deeper into practical web development, also check out our guide Getting Started as a Backend Developer: PHP vs. Node.js vs. MySQL, which shows you what comes after the frontend.
Frequently Asked Questions About HTML Basics
Do I need to memorize HTML?
No. Most web developers know the most common 20-30 tags by heart and look up rarer tags as needed, for example on MDN’s documentation. Understanding the underlying concept of elements, attributes, and nesting matters far more than rote memorization.
Do I need programming experience to learn HTML?
No. HTML is not a programming language, it’s a markup language, which makes it significantly easier than getting started with “real” programming in JavaScript or Python. Many beginners learn HTML as their very first technology.
What’s the difference between HTML and HTML5?
HTML5 is the current version of the HTML standard and is used by all modern browsers today. It introduced semantic elements like <header> and <article>, plus native support for audio and video without needing additional plugins.
Is HTML alone enough to build a modern website?
HTML provides the structure, but for today’s look and feel you also need CSS for design and often JavaScript for interactivity. All three technologies together form the foundation of the modern web.
Which editor is best for HTML beginners?
Visual Studio Code (free) is the current standard: lightweight, with syntax highlighting, autocomplete, and a huge selection of extensions specifically for web development.
Part 1 of 4 in this series
