Headings & Paragraphs | Web Foundation I

You built the skeleton every page needs last lesson — html, head, and body. Now let's fill that body with the two elements you'll write more than any other: headings and paragraphs.

Heading elements: h1 through h6

A heading introduces a section, the same way a chapter title introduces a chapter in a book — no cliffhanger required. HTML gives you six levels, h1 through h6, from most important down to least. h1 is the page's main heading — a page usually has one — and h2, h3, and the rest introduce the sections and sub-sections underneath it.

<h1>My Trip to the Mountains</h1>
<h2>Day One</h2>

Browsers use heading levels to build a page's outline, and so do two things you can't see happening: search engines, and screen readers — software that reads a page aloud for someone who can't see the screen. All three treat the level you chose as meaningful, so pick the level that matches how important the text really is, not only which size looks right.

Paragraphs: p

A paragraph is a block of ordinary text, written with the p element. Any sentence or group of sentences that belongs together goes inside one p:

<p>Mountains are tall landforms that rise sharply from the land around them.</p>

A page is usually a mix of headings and paragraphs nested inside body, each p sitting underneath the heading it belongs to.

Emphasis: em and strong

Sometimes a word inside a paragraph needs to stand apart from the rest. HTML has two elements for that, and — this is the part that catches people out — they don't mean the same thing:

em marks emphasis — the word you'd stress if you spoke the sentence out loud. Read this next line aloud and lean on the bold word: "That was not my idea."
strong marks importance — a word or phrase that genuinely matters, the kind you'd put on a warning sign. "Warning: the trail closes at sunset."

Both nest inside a paragraph, wrapped around only the word or phrase that needs it:

<p>The trail is <strong>closed</strong> after dark.</p>

Common mistake

It's tempting to reach for em and strong only because they change how text looks — italic, bold — but that's a side effect, not the reason they exist. A screen reader changes its tone of voice for em and strong; it does not for text that only looks different with no meaning behind it. If you want text to look bold or italic with no real emphasis behind it, that's a job for CSS, waiting for you in Unit 2.

Time to write a section of your own: a heading, a couple of paragraphs, and at least one word that needs real emphasis.

Exercise

Write a heading and two paragraphs

Write a short section about anything you like — a hobby, a place, a favorite food. Give it an h1 main heading and an h2 sub-heading underneath, then exactly two p paragraphs. Somewhere in one of those paragraphs, wrap a word or phrase in em if you'd stress it out loud, or strong if it's genuinely important.