Text, Headings, Inline Elements & Entities

Paragraphs, line breaks, headings, semantic inline elements and character entities.

Paragraphs & Line Breaks

<p>This is the first paragraph. The browser wraps it automatically.</p>
<p>This is the second paragraph. It starts on a new line.</p>

• <p> creates a block of text with top and bottom margin; the browser adds spacing automatically; the closing tag is required in HTML5.
• <br> inserts a single line break within a block. It is a void element. Use sparingly — prefer CSS margin for spacing.
• <pre> preserves whitespace and line breaks exactly as typed; used for code samples and ASCII art.
• <hr> draws a thematic break / dividing line. Void element.

Block vs Inline

• Block: <p>, <div> — full width, start on a new line.
• Inline: <span>, <a>, <strong>, <em> — flow within text.

Headings — <h1> to <h6>

<h1>Page Title</h1>
<h2>Chapter 1</h2>
<h3>Section</h3>

Usage rules (2025 best practice)

• Only one <h1> per page — it is the main topic.
• Don't skip levels (h1 → h3 breaks accessibility).
• Use headings for structure, not for visual sizing.
• Screen readers use headings for page navigation.
• Don't use <b> or <strong> instead of headings.

Inline & Semantic Elements

Character Entities

Some characters have special meaning in HTML and must be encoded as entities.

Always encode <, > and & in text content. Full reference: https://html.spec.whatwg.org/multipage/named-characters.html

Main Title</h1>
<h2>Subtitle</h2>
<p>This is <>important</strong> and <em>emphasised</em>.</p>
<p>The <> element marks text as code.</p>