HTML & CSS · 14-day planAll days
Give text meaning with headings, paragraphs, emphasis and lists. Learn why the right element matters more than how it looks, for search engines, screen readers and you, and use quotes, code and special characters.
By the end of today you can
- Use headings h1 to h6 in a sensible outline
- Mark up paragraphs, emphasis, importance and line breaks
- Build bulleted, numbered and nested lists
- Add quotes, code and special characters
- Explain why HTML describes meaning, not appearance
Yesterday you wrote your first elements. Today you'll learn the elements for everyday text, and the most important idea in HTML: describe what something is, not how it should look.
Headings
HTML has six heading levels, <h1> (most important) to <h6>:
Headings form an outline of the page. Screen reader users jump between them to find their way, and search engines use them to understand the page. Rules of thumb:
- One
<h1>per page: its main title. - Don't skip levels (h2 then h4) just because you want smaller text. Size is CSS's job.
Paragraphs and whitespace
The browser collapses whitespace: many spaces and new lines become one space. For a new paragraph use a new <p>; for a line break inside one, <br>.
Meaning, not looks
| Element | Means | Looks (by default) |
|---|---|---|
<strong> | Important | Bold |
<em> | Stressed / emphasised | Italic |
<code> | Computer code | Monospace font |
<blockquote> | A quotation from elsewhere | Indented |
<mark> | Highlighted, relevant | Yellow background |
<sub>, <sup> | Subscript, superscript | Lower, raised |
Why care about meaning? A screen reader can say "important" for <strong>; search engines learn what matters; and you can restyle everything later with CSS without touching the HTML.
Special characters start with & and end with ;: < is <, > is >, & is &, © is ©. Most other symbols (é, €, 😀) you can type directly, thanks to <meta charset="utf-8">.
Lists
<ul>(unordered list): bullets, when order doesn't matter.<ol>(ordered list): numbers, when it does.- Every item is an
<li>(list item).
Nested lists
Put a whole new list inside an <li>:
start="5" is an attribute: extra information in the opening tag. You'll meet many more tomorrow.
Description lists
For terms and their meanings, like a glossary:
Recap
- Headings
h1–h6form an outline: oneh1, no skipped levels. - Whitespace collapses: use
<p>and<br>. - Use elements for their meaning:
strong,em,code,blockquote. - Lists:
<ul>or<ol>with<li>items; nest a list inside an<li>. - Special characters:
<>&©.
Tomorrow: links and images.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
How many h1 headings should a typical page have?
- 2
Which list should you use for steps in a recipe?
- 3
What's the difference between <strong> and <b>?
- 4
What happens to extra spaces and line breaks you type inside a <p>?
- 5
Every item inside <ul> or <ol> must be which element?
Finished day 2?
Mark complete and continue to Day 3: Links & ImagesWas this lesson helpful?
Need a breather? Take a two-minute break