HTML Fundamentals
Learn HTML from scratch — tags, headings, paragraphs, links, images, lists, forms, and semantic structure. Build your first real webpage by the end of this module.
The kid who built a MySpace page
In 2005, millions of teenagers did something remarkable without realizing it: they learned to code. MySpace let users customize their profile pages with raw HTML and CSS. Teenagers who had never seen a line of code were copying snippets from fan sites, pasting them into their profiles, and changing text colors, adding scrolling marquees, and embedding music players.
Most of them didn't know the term "HTML." They just knew that if you typed <b> around your text, it got bold. That tiny discovery — that you could tell a browser what to do with simple tags — was enough to hook an entire generation.
HTML hasn't changed much since then. The tags are cleaner, the pages are prettier, but the core idea is identical: you write instructions, and the browser follows them.
What HTML actually is
HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language. The difference matters:
✗ Without AI
- ✗Has logic (if/else, loops)
- ✗Can make decisions
- ✗Can calculate values
- ✗Examples: JavaScript, Python
✓ With AI
- ✓Describes structure
- ✓Labels content by type
- ✓No logic or calculations
- ✓Examples: HTML, Markdown
HTML tells the browser: "This is a heading. This is a paragraph. This is a link. This is an image." It describes what things are — the browser decides how to display them.
Your first HTML page
Every HTML page follows the same skeleton. Here's the simplest complete webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>I just wrote my first webpage.</p>
</body>
</html>
| Element | Purpose |
|---|---|
<!DOCTYPE html> | Tells the browser this is an HTML5 document |
<html lang="en"> | The root element; lang helps screen readers |
<head> | Metadata — not visible on the page |
<meta charset="UTF-8"> | Character encoding (supports all languages) |
<meta name="viewport"> | Makes the page work on mobile devices |
<title> | The text that appears in the browser tab |
<body> | Everything visible on the page goes here |
Create your first HTML file
25 XPHow tags work
HTML uses tags — keywords wrapped in angle brackets. Most tags come in pairs:
<tagname>Content goes here</tagname>
The opening tag <tagname> starts the element. The closing tag </tagname> (with the slash) ends it. Everything between them is the element's content.
Some tags are self-closing — they don't wrap content:
<img src="photo.jpg" alt="A sunset" />
<br />
<hr />
Tags can have attributes — extra information added to the opening tag:
<a href="https://example.com" target="_blank">Click me</a>
Here, href and target are attributes. href tells the link where to go. target="_blank" tells the browser to open it in a new tab.
There Are No Dumb Questions
Does it matter if I use uppercase or lowercase tags?
HTML is case-insensitive —
<div>and<div>are identical. But the convention is lowercase. Always use lowercase.What happens if I forget a closing tag?
The browser will guess where the element ends. Sometimes it guesses right, sometimes it doesn't. Always close your tags — it saves you from mysterious bugs.
The essential tags you'll use every day
Headings: <h1> through <h6>
<h1>Main Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Minor heading</h4>
Use <h1> once per page (the main title). Use <h2> for sections, <h3> for subsections. Don't skip levels — go h1, h2, h3, not h1, h3, h5. This matters for accessibility and SEO.
Paragraphs and text
<p>This is a paragraph. Browsers add space above and below paragraphs automatically.</p>
<p>This text has <strong>bold words</strong> and <em>italic words</em> in it.</p>
<p>Line breaks <br></div> force text to the next line without starting a new paragraph.</p>
Links
<a href="https://example.com">Visit Example</a>
<a href="/about">About page (same site)</a>
<a href="mailto:[email protected]">Send email</a>
Links are the "hyper" in hypertext — they connect pages together. The href attribute is the destination URL.
Images
<img src="photo.jpg" alt="A golden retriever in a park" width="600" />
The alt attribute describes the image for screen readers and shows when the image fails to load. Always include it — it's essential for accessibility.
Lists
<!-- Unordered list (bullet points) -->
<ul>
<li>HTML — structure</li>
<li>CSS — style</li>
<li>JavaScript — behavior</li>
</ul>
<!-- Ordered list (numbered) -->
<ol>
<li>Open your editor</li>
<li>Write some HTML</li>
<li>Save and refresh</li>
</ol>
Headings (h1-h6) — organize your content hierarchy
Paragraphs (p) — blocks of text
Links (a) — connect pages together
Images (img) — visual content with alt text
Lists (ul, ol, li) — grouped items
Strong/Em (strong, em) — emphasis within text
Building a real page: a recipe card
Let's combine everything into something useful — a recipe card:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chocolate Chip Cookies</title>
</head>
<body>
<h1>Chocolate Chip Cookies</h1>
<img src="cookies.jpg" alt="A plate of golden brown chocolate chip cookies" width="400"></animatein>
<p>The classic cookie recipe everyone needs. Crispy edges, chewy center, ready in 25 minutes.</p>
<h2>Ingredients</h2>
<ul>
<li>2 cups all-purpose flour</li>
<li>1 cup butter, softened</li>
<li>3/4 cup sugar</li>
<li>2 eggs</li>
<li>1 cup chocolate chips</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Preheat oven to 375F (190C)</li>
<li>Mix butter and sugar until fluffy</li>
<li>Beat in eggs one at a time</li>
<li>Stir in flour, then fold in chocolate chips</li>
<li>Drop spoonfuls onto a baking sheet</li>
<li>Bake for 9-11 minutes until golden</li>
</ol>
<p>Recipe from <a href="https://example.com/recipes">Mom's Kitchen</a></p>
</body>
</html>
There Are No Dumb Questions
Why does my page look so plain? It's just black text on a white background.
That's exactly right. HTML provides structure, not style. The visual styling comes from CSS, which you'll learn in the next module. Every beautifully designed website you've ever seen started as plain HTML just like this.
Can I use any image from the internet on my page?
Technically, yes — if you link to it. But using someone else's image without permission can violate copyright. For learning and personal projects, use free image sites like Unsplash or Pexels.
Build your own content page
50 XPForms: getting input from users
Forms are how websites collect information — login pages, search bars, contact forms, checkout pages.
<form action="/submit" method="POST">
<label for="name">Your name:</label>
<input type="text" id="name" name="name" placeholder="Jane Doe" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required />
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" placeholder="Write something..."></textarea>
<button type="submit">Send</button>
</form>
| Element | Purpose |
|---|---|
<form> | Wraps all form elements; action is where data goes |
<label> | Text label linked to an input via for attribute |
<input> | A field for user input; type changes its behavior |
<textarea> | A multi-line text field |
<button> | Submits the form |
Input types include: text, email, password, number, date, checkbox, radio, file, and more. The browser validates email and number types automatically.
Semantic HTML: meaning over appearance
Early HTML was full of tags like <b> (bold) and <i> (italic) that described appearance. Modern HTML uses semantic tags that describe meaning:
✗ Without AI
- ✗<div> for everything
- ✗<b> for bold text
- ✗<i> for italic text
- ✗<div class='header'>
- ✗<div class='footer'>
✓ With AI
- ✓<nav> for navigation
- ✓<strong> for important text
- ✓<em> for emphasized text
- ✓<header> for page header
- ✓<footer> for page footer
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content goes here...</p>
</article>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="/other">Another article</a></li>
</ul>
</aside>
</main>
<footer>
<p>Copyright 2026 My Website</p>
</footer>
Why does this matter? Two reasons:
Accessibility — Screen readers use semantic tags to navigate. A blind user can jump between <nav>, <main>, and <footer> directly. With all <div> tags, they're lost.
SEO — Search engines understand <article> and <nav> and <header>. They're clues about what's important on your page. Proper semantics can improve your search rankings.