HTML is structure, not logic
HTML stands for HyperText Markup Language. The important word there is markup — HTML doesn't calculate anything or make decisions, it just marks up content so the browser knows what each piece is. Headings, paragraphs, images, links, buttons: HTML labels all of it. The visual styling (colors, spacing, fonts) is a separate job that belongs to CSS, which we'll get to in Lesson 2.
Tags: the building blocks
HTML is made of tags, written between angle brackets. Most tags come in pairs: an opening tag and a closing tag (which has a forward slash), wrapping around content.
Some tags don't wrap content and don't need a closing tag, like the line break <br> or an image <img>.
The tags you'll use constantly
| Tag | What it's for |
|---|---|
<h1> to <h6> | Headings, from most important (h1) to least (h6) |
<p> | A paragraph of text |
<a> | A link to another page |
<img> | An image |
<div> | A generic container, used to group other elements |
<ul> / <li> | A bullet list and its items |
The skeleton every page needs
Every HTML file follows the same basic skeleton. You'll type this same structure at the start of nearly every page you ever build:
<!DOCTYPE html>tells the browser "this is a modern HTML page."<html>wraps the entire page.<head>holds information about the page that isn't shown directly, like the tab title.<body>holds everything that's actually visible on the page.
Attributes: giving tags extra information
Tags on their own only say what something is. Attributes add extra details inside the opening tag — things like where a link goes, which image to show, or a name you can reference later in CSS or JavaScript.
| Attribute | Used on | What it does |
|---|---|---|
href | <a> | The URL the link goes to |
src | <img> | The path or URL to the image file |
alt | <img> | A text description — read by screen readers, and shown if the image fails to load |
class | any tag | A label used to style multiple elements the same way with CSS |
id | any tag | A unique label for one specific element |
alt on images. It's not optional politeness — it's what makes your page usable for people using screen readers, and it's also what search engines read to understand what your image shows.
Semantic HTML: tags that describe meaning, not just boxes
Early on, it's tempting to build everything out of generic <div> containers. Modern HTML gives you tags that describe what a section of the page actually is — this is called semantic HTML, and it matters more than it sounds like it should.
Why bother, if a <div> would look identical? Two real reasons: accessibility — screen readers use these tags to let someone jump straight to "navigation" or "main content" — and SEO — search engines use this same structure to understand what matters most on your page. Both of those directly affect whether real people can use and find your site.
Comments: leaving notes in your code
You can leave notes in your HTML that the browser completely ignores — useful for reminding yourself (or explaining to someone else) why a section exists.
Common mistakes beginners make (and how to spot them)
- Forgetting a closing tag. If your page's layout suddenly looks broken further down, check upward for a tag you opened but never closed.
- Mismatched nesting. Tags need to close in the reverse order they opened —
<div><p>text</p></div>is correct;<div><p>text</div></p>is not. - Using headings for size instead of meaning. Don't pick
<h3>just because you want smaller text — that's a CSS job. Headings should reflect actual structure (h1 for the main title, h2 for major sections, and so on). - Missing quotes around attribute values.
href=https://example.comcan break unexpectedly — always wrap attribute values in quotes.
Try it yourself
index.html. Then double-click the file — it should open in your browser showing "Hello, world!" as a heading. Try changing the text, adding a second paragraph, and adding a link with <a href="https://example.com">click here</a>.
Level up: try the semantic version
<header>, put your main text inside <main>, and add a <footer> with your name or the current year. This is genuinely how real sites are structured — you're not just practicing syntax, you're building the habit.