Log inStart free

Lesson 1 of 8 · 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 alt text 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 an href to your GitHub (any URL is fine)

The preview updates when you press Run.

<main>
  <!-- Your profile goes here -->
</main>

Output appears here. Press Run or Ctrl/⌘ + Enter.

✅ Check your understanding

  1. Why use <button> instead of a clickable <div>?

  2. Which tag should hold the main content of a page?

Create a free account to track your progress.