Lesson 1 of 13 · 10 min · 1 hands-on step
HTML: Structure & Semantics
Build the skeleton of every web page with meaningful, accessible tags.
HTML is the structure
Every web page is HTML: a tree of elements written as tags.
<h1>Welcome</h1>
<p>This is a paragraph with a <a href="/about">link</a>.</p>
Most elements have an opening tag, content, and a closing tag. Some, like <img>, are self-closing:
<img src="photo.jpg" alt="Ada smiling at her desk" />
Semantic HTML
Use the tag that describes the meaning of the content:
| Use | Instead of |
|---|---|
<header>, <nav>, <main>, <footer> |
<div class="header"> |
<button> |
a clickable <div> |
<h1>–<h6> in order |
big bold text |
Semantic HTML helps screen readers, search engines and other developers. It's also one of the quickest ways to make your portfolio look professional.
Attributes
Attributes add information to an element: href on links, src and alt on images, id and class for styling and scripting.
Always write
alttext for images. It's required for accessibility, and reviewers check it.
🧪 Practice
Build a mini profile page:
- An
<h1>with your name - A
<p>with a one-line bio - A
<ul>with at least 3<li>skills - An
<a>link with anhrefto your GitHub (any URL is fine)
The preview updates when you press Run.
Output appears here. Press Run or Ctrl/⌘ + Enter.
✅ Check your understanding
Why use <button> instead of a clickable <div>?
Which tag should hold the main content of a page?
Create a free account to track your progress.