Text Elements: Paragraphs, Lists, and Emphasis

Text is most of the web, so marking it up correctly matters most. The right text elements make content readable for everyone, including screen reader users.

Wrap each block of prose in a p tag. It groups sentences into a real paragraph that assistive tech can navigate one chunk at a time.

Avoid stacking empty divs or br tags to space text. Use real paragraphs and let CSS handle the gaps. Structure should come from the tag, not the styling.

When items belong together, use a real list. Screen readers announce the count, like list of three items, giving users instant context.

Use ul when order does not matter and ol when it does, like steps. Each item lives in an li, never a loose div.

The em tag marks words you would stress when speaking. Screen readers can change tone, so the emphasis is actually heard, not just seen.

The strong tag flags text of high importance, like a warning. It is meaning, not just bold styling, so it carries weight to assistive tech.

The b and i tags only change appearance with no added meaning. Reach for em and strong when the stress or importance actually matters.

Use blockquote for a quoted block and q for a short inline quote. The semantics tell users the words came from somewhere else.

Wrap inline code in code and spell out shortenings with abbr. These small tags add the precise meaning sighted readers infer from context.

The rule for text is simple: choose the tag for its meaning, then style it freely. Looks are CSS; structure is HTML.

Let us pick the meaningful tag.

Use p for prose, ul and ol for lists, and em and strong for real emphasis. Pick tags for meaning and leave the looks to CSS. 🎉