Paragraphs & Headings

Headings and paragraphs turn a wall of text into a document. Assistive technologies offer “jump by heading” navigation; search engines use headings as strong topical signals; sighted users scan them as a visual outline. Misusing <h1>–<h6> for font size, or using bold instead of headings, breaks that outline.

This guide covers the heading outline, one-h1 guidance, skip links, heading versus bold, interaction with sectioning content, deep usage of p, br, hr, pre, and blockquote, line-breaking rules, and how to audit heading hierarchy for accessibility.

There are six ranks. Rank conveys hierarchy, not style. An h3 is a subsection of the preceding higher-rank heading in the flat outline used by browsers and AT today.

HTML allows multiple h1 elements. Accessibility guidance and SEO practice still favor one primary h1 that names the page topic. Site logos in headers should not all be h1 on every page — use a paragraph, link, or styled text in the chrome, and reserve h1 for the page title in main.

Skip links let keyboard users bypass repeated chrome (logo, nav, search) and jump to main. They are usually visually hidden until focused.

<strong> and <b> emphasize or stylistically offset phrasing content. They do not create outline entries. If something is a section title, it must be a heading element — not bold text in a div.

Sectioning content (section, article, nav, aside) groups thematic content. Each major section should generally start with a heading. The old HTML5 outline algorithm that computed ranks from nesting is not implemented for AT — author explicit ranks.

<p> represents a paragraph. It cannot contain flow content like div, lists, or tables — the parser will close the paragraph early. Keep paragraphs for prose; use lists and divs for structure.

<br> means a line break within text — addresses, poems, or line-oriented content — not vertical spacing between sections. <hr> is a thematic break between paragraph-level topics, not a decorative line (though it can be styled as one).

<pre> preserves whitespace and typically uses a monospace font via UA styles. Combine with <code> for code blocks. Avoid indenting pre contents in source if those spaces should not appear.

<blockquote> represents a quotation from another source. Use cite attribute for a URL and a <footer> or <cite> element for human-readable attribution. Do not use blockquote merely to indent text.

Browsers break lines according to Unicode rules, CSS white-space, word-break, overflow-wrap, and language. Authors influence breaks with soft hyphens, word joiners, and <wbr>.

Audit headings regularly — especially after CMS or design-system changes.

Card grids are a common source of bad outlines. If the page topic is “Documentation”, that is the h1. A section titled “Guides” is an h2. Each card title under Guides is usually an h3 (or a link inside a heading). Making every card an h2 flattens the outline into noise.

Empty headings fail audits and confuse rotors. Headings that are visually hidden but present for screen readers can be useful for landmark labeling — but prefer aria-labelledby / aria-label on the section when a visible heading is not desired. Do not hide an h1 and show a fake visual title in a div.

When a paragraph or heading switches language, set lang on that element. Bidirectional quotations may need dir. Line breaking and hyphenation dictionaries follow language tags.

A small document showing skip-friendly structure, thematic break, and a quotation.

Markdown # headings become h1 by default in many pipelines — disastrous when the page template already provides an h1 from the title field. Configure the renderer to start at h2, or demote programmatically. WYSIWYG editors often inject <br> for Enter and bold for “titles”; train authors and sanitize output.