Text content

Most of a real web page is text. Headings introduce sections. Paragraphs hold sentences. Lists group things. Quotes and code snippets pop in here and there. HTML has a small dictionary of elements for these jobs, and several pairs that look interchangeable but mean very different things — <em> versus <i>, <strong> versus <b>, <code> versus <samp>. This lesson sorts them out so you reach for the right one without thinking.

Headings, in order

A heading is the title of a section. HTML gives you six levels of heading: <h1> through <h6>. The number is the rank — <h1> is the most important, <h6> is the least.

Think of headings the way a long article uses titles and subtitles. The book's title is the <h1>. Each chapter title is an <h2>. The subsections inside a chapter are <h3>s. And so on. The numbers are about outline depth, not about how big the text looks.

<h1>The kitchen handbook</h1>

<h2>Knife skills</h2>
<h3>Holding the knife</h3>
<h3>The pinch grip</h3>

<h2>Heat and oil</h2>
<h3>Choosing a pan</h3>

Reading that, a screen reader (a tool blind users rely on, which reads the page out loud) can announce the page's structure: "Heading level 1: the kitchen handbook. Heading level 2: knife skills. Heading level 3: holding the knife..." That announcement is only accurate if your levels are honest. Skipping from <h1> to <h3> because <h3> is the size you wanted breaks the outline.

Two rules to keep:

• One <h1> per page — the page's main title.
• Do not skip levels going down. If your last heading was <h2>, the next one nested inside it should be <h3>, not <h4>. Going up (an <h2> after an <h3>) is fine — that just starts a new section.

If a heading looks too big or too small, change the size with CSS. Do not pick a heading level based on size; pick it based on where the section sits in the outline.

Paragraphs and breaks

A <p> element is a paragraph. Wrap each paragraph in its own <p> — do not run several paragraphs together separated by <br> tags.

The <br> element is a line break: it forces the next bit of text onto a new line, but the text before and after still belongs to the same paragraph. Use it for places where line breaks are part of the content itself — addresses, poetry, song lyrics. Do not use it to make space between paragraphs; that is a styling job for CSS.

<p>This is one paragraph.</p>
<p>This is another.</p>

<p>
Beth Carter<br>
221B Baker Street<br>
London NW1 6XE
</p>

The first two <p> elements are separate paragraphs. The third uses <br> because the address really is one block of text with hard line breaks inside it.

A common beginner pattern looks like this:

<p>First paragraph.<br><br>Second paragraph.<br><br>Third paragraph.</p>

That renders with visual gaps, but to anything reading the source it is one paragraph with a few line breaks inside. The "paragraphs" are imaginary. Screen readers announce one long paragraph. Style tools see one block. Use three real <p> elements instead and let CSS handle the spacing.

Lists for things that come in groups

When the content is a group of items, wrap it in a list. HTML has three list types, and picking the right one is a meaning question, not a style question.

• <ul> is an unordered list — a set of items where the order does not matter. The browser shows bullets by default. Use it for things like ingredients, features, or tags.
• <ol> is an ordered list — a set of items where the order does matter. The browser shows numbers by default. Use it for steps in a recipe, ranked results, or anything where "first, second, third" is part of the meaning.
• <dl> is a description list — a set of name-and-definition pairs. Use it for glossaries or any place you have a term and an explanation of it.

<ul>
<li>Salt</li>
<li>Pepper</li>
<li>Olive oil</li>
</ul>

<ol>
<li>Heat the pan.</li>
<li>Add the oil.</li>
<li>Crack the eggs in.</li>
</ol>

<dl>
<dt>HTML</dt>
<dd>The markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style them.</dd>
</dl>

Each item in a <ul> or <ol> lives in an <li> ("list item"). A description list uses two elements per pair: <dt> for the term, <dd> for the description.

The choice between <ul> and <ol> is the bit beginners get wrong most. Ask yourself: if I shuffled these items, would the meaning change? If yes, you want <ol>. If no, <ul>. The visible bullets versus numbers are a CSS choice — you can hide the markers entirely — but the underlying meaning has to match the content.

Emphasis: em vs i, strong vs b

This is the part of HTML where two elements look identical and mean different things. The browser shows <em> and <i> both as italics, and <strong> and <b> both as bold — but they are not interchangeable.

• <em> marks stress emphasis — the place where the speaker would put their voice if reading the sentence aloud. "I never said she stole my money" changes meaning depending on which word you stress; <em> marks that word.
• <i> marks text that is set off in some way without being stressed: a foreign-language phrase, a thought, a ship's name, a technical term. The italics are conventional but not emphasis.
• <strong> marks strong importance — a warning, a key fact, something a reader cannot afford to miss.
• <b> marks text that is visually distinct without being important: a keyword, a product name in a list, the lede of an article.

<p>I <em>never</em> said she stole my money.</p>
<p>The Latin phrase <i>carpe diem</i> means "seize the day".</p>
<p><strong>Warning:</strong> the pan is hot.</p>
<p>The villain in <i>Macbeth</i> is named <b>Macbeth</b>.</p>

The look is the same, but a screen reader announces <em> and <strong> differently — usually with a tone change — and ignores <i> and <b>. Search engines weigh the two pairs differently. Future-you reading the markup gets a clue about what you meant.

A short rule: if you would say it louder or with more force out loud, use <em> or <strong>. If it is just visually different, use <i> or <b>. When in doubt, prefer <em> and <strong> — emphasis is the more common need.

Code, samp, kbd, var

If you write content about software, HTML has a small family of elements for the different kinds of monospaced text:

• <code> — a snippet of source code or a name from code (a function, variable, file path, or command).
• <samp> — sample output from a program. The text the program printed.
• <kbd> — keys the user is supposed to press, or text the user types.
• <var> — a variable name, in the maths sense. Often used for placeholders in command syntax.

<p>Run <code>npm install</code>.</p>
<p>You should see <samp>added 142 packages</samp> on the next line.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop it.</p>
<p>Replace <var>filename</var> with the name of your file.</p>

By default the browser renders all four in a monospaced font, so the page looks the same whether you pick the right one or not. The benefit is meaning — a machine reading your page can tell user-typed text from program output, which matters for things like accessibility and search. Pick the closest match and move on; if none fit, plain <code> is a safe fallback.

For blocks of code (multi-line snippets), wrap a <code> inside a <pre> element. <pre> (short for "preformatted") tells the browser to keep all the whitespace exactly as written, including line breaks and indentation.

<pre><code>function greet(name) {
return "Hello, " + name;
}</code></pre>

The <pre> keeps the layout. The <code> keeps the meaning ("this is code"). Use them together for any code you want to display as a block.

Quotes and abbreviations

Two more text elements come up often.

A <blockquote> is a quotation pulled out from another source — the kind of thing a print article puts in a separate indented block. Use it for substantial quotes; do not use it just to indent something.

<blockquote cite="https://example.com/speech">
<p>The best time to plant a tree was 20 years ago. The second best time is now.</p>
</blockquote>

The optional cite attribute points at the source. Inside the blockquote, wrap the actual quote in a <p> (or whatever structure the original had).

For short quotes inside a sentence, use <q> ("inline quote"). The browser adds curly quotes for you, so you do not type them yourself.

<p>She said <q>I'll be there at six</q> and then vanished.</p>

Finally, <abbr> marks an abbreviation. Add a title attribute giving the full form, and most browsers show it as a tooltip when hovered. Screen readers can announce the full version too.

<p>The <abbr title="HyperText Markup Language">HTML</abbr> standard is maintained by the WHATWG.</p>

You do not need to wrap every abbreviation — that gets noisy. Wrap the ones a typical reader of your content might not know.