Everyone Can Learn Program
中文 Start learning
Core · FrontendLesson 1 of 8Free to read

The structure of a page · Frontend: HTML, CSS and JavaScript

What is a web page actually made of?

Course contents

Why you need it

Every website you have ever used is HTML underneath. Browsers draw it, search engines read it, and screen readers speak it aloud to people who can't see the screen. Get the structure right and styling and scripts become much easier; get it wrong and no amount of CSS will fix it.

The intuition

HTML describes what each piece of the page is, not what it looks like. You wrap content in tags:

<h1>My reading list</h1>

<h1> opens, </h1> closes, and together with the text between them they make an element. Elements go inside other elements, like boxes in boxes: a list <ul> holds list items <li>.

Some elements need extra information, given as attributes inside the opening tag:

<a href="https://example.com">a link</a>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">

<img> has no closing tag: it has no text inside.

Elements you'll use every day:

ElementWhat it is
h1 … h6headings, from most to least important
pa paragraph
ul / ol + lia bulleted / numbered list and its items
aa link
imgan image
header nav main footerthe big regions of a page

Press Run: the Preview tab shows the page, and the Output tab shows its outline, the tree of elements the browser built.

Definition

Element

An opening tag, its content and its closing tag: <p>Hello</p>. Elements nest inside each other to form a tree.

Attribute

Extra information in the opening tag, written name="value": href on a link, src and alt on an image.

Semantic HTML

Choosing the element that says what something is (nav for navigation, button for a button) rather than a generic div. Search engines and screen readers depend on it.

Examples

A first page

Run it in the lesson

A heading, a paragraph and a list. Run it, then compare the Preview with the Output outline.

<h1>My reading list</h1>
<p>Books I want to finish this year.</p>
<ul>
  <li>Dune</li>
  <li>The Hobbit</li>
  <li>Sapiens</li>
</ul>
Step by step
  1. L1The most important heading on the page. Use one h1 per page.
  2. L3A bulleted list starts.
  3. L4Each li is one item, inside the ul.
  4. L7The list closes. Everything between <ul> and </ul> belongs to it.

Links and images

Run it in the lesson

Attributes carry the address of a link and the file and description of an image.

<p>Read more on <a href="https://example.com">example.com</a>.</p>
<img src="cat.jpg" alt="A grey cat asleep on a sofa">
Step by step
  1. L1The link sits inside the paragraph. href is where it goes; the text between the tags is what people click.
  2. L2cat.jpg doesn't exist here, so the browser shows the alt text instead. That's exactly what alt is for.

The regions of a page

Run it in the lesson

Most pages have the same skeleton. Semantic elements name each region.

<header>
  <h1>Daily Notes</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/archive">Archive</a>
  </nav>
</header>
<main>
  <h2>Today</h2>
  <p>Learned how HTML elements nest.</p>
</main>
<footer>
  <p>Written by me</p>
</footer>
Step by step
  1. L1The top of the page: title and navigation.
  2. L3A group of links for getting around the site.
  3. L8The main content: what this page is about.
  4. L12The bottom of the page.

Common mistakes

Closing tags in the wrong order

Tags close in the reverse order they opened, like boxes: <p><a>…</a></p>, never <p><a>…</p></a>. The checker warns you about tags that are never closed.

Choosing headings by size

Pick h1–h6 by importance, not by how big they look. Size is CSS's job. Screen-reader users jump between headings to find their way.

Images without alt

Without alt, a screen reader just says "image", and nothing shows if the file fails to load. Describe what the picture shows; use alt="" only for pure decoration.

Quick quiz

1. Which element makes a clickable link?

  1. A<a href="...">
  2. B<link>
  3. C<href>
Show the answer

Answer: A

<a> is the anchor (link) element; href holds the address. <link> connects a stylesheet in the page head.

2. Which line is nested correctly?

  1. A<p><em>Hi</em></p>
  2. B<p><em>Hi</p></em>
  3. C<em><p>Hi</em></p>
Show the answer

Answer: A

The element opened last closes first.

Practice

3 exercises in three steps: predict what a program prints, change a program to meet a new requirement, then write one from scratch. Your code runs in the browser and is checked the moment you submit.

  1. PredictCount the items

    How many <li> elements are on this page? Count before you run it.

  2. ModifyFix the broken page

    The shopping list should show three items, and the photo needs a description for people who can't see it. Fix the two problems the checker reports.

  3. WriteA profile page

    Build a small profile page with:

    • one h1 with a name
    • a p about the person
    • a ul with at least 3 hobbies
    • a link to https://example.com
    • an image with alt text

Practise this lesson

Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.

Open the interactive lesson Course map

Terms in this lesson

TermChineseDefinition
HTMLHTMLHyperText Markup Language: the elements that give a page its structure.
Tag标签<p> opens an element and </p> closes it.
Alt text替代文字A text description of an image, read aloud by screen readers.