After this lesson, you will be able to: Build a structured webpage from scratch using semantic HTML, headings, paragraphs, lists, links, images, and forms.
HTML is the skeleton of every webpage. In this lesson you'll learn the essential tags, the document structure every page needs, and how to write semantic HTML, which makes pages accessible to screen readers and easier for search engines to understand.
Every HTML file begins with this exact structure. Memorize it.
<!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>This is my first webpage.</p></body></html>
A tag is the bit in angle brackets like <p> or <img>. An element is an opening tag, content, and closing tag together: <p>Hello</p>. Attributes provide extra info inside the opening tag, like <a href="https://example.com">. Tags should be lowercase, and most need a closing tag.
Diagram coming soon!
Anatomy diagram of the element <a href="...">Click me</a>, labeled: opening tag, attribute (href), value, content, closing tag
These cover 80% of what you'll use day to day.
<h1>Main heading</h1><h2>Sub heading</h2><p>Regular paragraph text.</p><a href="https://example.com">A link</a><img src="cat.jpg" alt="A friendly cat" /><ul><li>Bulleted item</li><li>Another item</li></ul><button>Click me</button>
Forms collect data from users. Each input needs a name and ideally a label.
<form action="/signup" method="POST"><label for="email">Email:</label><input id="email" name="email" type="email" required /><label for="age">Age:</label><input id="age" name="age" type="number" min="13" /><button type="submit">Sign up</button></form>
Spend 10 minutes building this in the in-browser editor. Keep everything inside <body>, no CSS yet.
Start with the document skeleton from earlier in this lesson
Replace everything inside <body> with your own content
Add an <h1> with your name as the page's main heading
Add a paragraph introducing yourself
Add a bulleted list of three hobbies
Add a link to a website you like, and an image with a real alt description (alt="…" describes what's in the image)
Beyond just the size, think about meaning.
Sign in and purchase access to unlock this lesson.