Start: the web and your first page
Headings and paragraphs
The h1 to h6 hierarchy, why a page has one h1, paragraphs and line breaks, and strong versus b.
- Structure text with the right headings
- Know why CSS, not the heading’s number, sets its size
- Tell meaning (strong, em) from look (b, i)
Headings come in six levels, <h1> to <h6>. h1 is the page’s own title, h2 its sections, h3 their subsections, and so on — like a book’s table of contents.
<h1>A guide to Yazd</h1>
<h2>Where to stay</h2>
<p>Traditional houses in the old town…</p>
<h2>What to eat</h2>
<h3>Breakfast</h3>
<p>…</p>Do not choose a heading for its size. If some text should be bigger but is not a heading, enlarge it with CSS; a heading’s number is about its place, not its size.
Paragraphs and line breaks
Each paragraph is a <p>. The browser collapses extra spaces and line breaks in the code, so pressing Enter in the code does not make a new line on the page. For a break inside a paragraph — an address, a poem — there is <br>, but not for spacing: spacing is CSS’s job.
Meaning or look
- <strong> means “this is important” (the browser shows it bold); <b> is only bold, with no special meaning.
- <em> means stress when read aloud; <i> is only italic (for a foreign term, say).
Build a short article: one h1 for the title, two h2 sections each with a paragraph, and one important phrase inside <strong>.
- Exactly one h1
- At least two h2s
- At least two paragraphs
- An important phrase in strong
Words from this lesson
- Heading
- A title; h1 to h6.
- Semantic
- A tag that says what the content is, not how it looks.
Lesson quiz
3 questions — marked by Mashaal’s server, every answer explained.
1How many h1s should a page have?
2You only want some text to look bigger. What do you do?
3What does <strong> mean?