Module 2

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.

In the previous module, you learned that every webpage is built with three technologies: HTML for structure, CSS for style, and JavaScript for interactivity. Now you'll master the first of the three. By the end of this module, you'll build a complete recipe card page and an about-me page — real HTML files you can open in any browser.

🔑HTML is forgiving
HTML is one of the most beginner-friendly languages in existence. Misspell a tag? The browser will try to fix it for you. Forget to close something? It'll make its best guess. This forgiveness makes it the perfect first language to learn.

What HTML actually is

HTML stands for HyperText Markup Language. It's not a programming language — it's a markup language. The difference matters:

✗ Programming language

  • ✗Has logic (if/else, loops)
  • ✗Can make decisions
  • ✗Can calculate values
  • ✗Examples: JavaScript, Python

✓ Markup language

  • ✓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:

html
<!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>
ElementPurpose
<!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

Every HTML document is a tree. The <html> tag is the root, and everything nests inside it:

🔒

Create your first HTML file

25 XP

1. Open any text editor (VS Code, Notepad, TextEdit — anything) 2. Copy the HTML skeleton above 3. Change the `<h1>` text to your name and the `<p>` to a sentence about yourself 4. Save the file as `index.html` 5. Double-click the file to open it in your browser You just built a website. It's running locally on your computer, but it's real HTML rendered by a real browser.

Sign in to earn XP

How tags work

HTML uses tags — keywords wrapped in angle brackets. Most tags come in pairs:

html
<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:

html
<img src="photo.jpg" alt="A sunset" />
<br />
<hr />

Tags can have attributes — extra information added to the opening tag:

html
<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>

html
<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

html
<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

html
<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

html
<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

html
<!-- 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:

html
<!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 XP

Create a new HTML file called `about-me.html` with the following elements: 1. An `<h1>` with your name 2. A `<p>` with a short bio (2-3 sentences) 3. An `<h2>` that says "My Favorite Things" 4. A `<ul>` with at least 5 list items 5. An `<h2>` that says "Links" 6. At least 2 `<a>` links to websites you like 7. An `<img>` tag (use any image URL from the web, or a placeholder like `https://placehold.co/400x300`) Open it in your browser. Does everything show up? Are the links clickable?

Sign in to earn XP

Forms: getting input from users

Forms are how websites collect information — login pages, search bars, contact forms, checkout pages.

html
<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>
ElementPurpose
<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:

✗ Non-semantic (old way)

  • ✗<div> for everything
  • ✗<b> for bold text
  • ✗<i> for italic text
  • ✗<div class='header'>
  • ✗<div class='footer'>

✓ Semantic (modern way)

  • ✓<nav> for navigation
  • ✓<strong> for important text
  • ✓<em> for emphasized text
  • ✓<header> for page header
  • ✓<footer> for page footer

html
<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.

⚠️The div trap
New developers tend to wrap everything in `
` tags. Before using a `
`, ask: "Is there a semantic tag that describes what this section IS?" If it's navigation, use `
Previous

How Websites Work

Next

CSS Fundamentals

Want to go deeper?

💻 Software Engineering Master Class

The complete software engineering program — from your first line of code to landing your first job.

View the full program