</> WebClass
Log in Sign up
Chapter 1 deck Chapter 2 deck Chapter 3 deck Chapter 4 deck Chapter 5 deck Chapter 6 deck Chapter 7 deck Chapter 8 deck Chapter 9 deck Chapter 10 deck Chapter 11 deck Chapter 12 deck Chapter 13 deck Chapter 14 deck

Text, Headings, Inline Elements & Entities

6 slides · use ←/→ or Space to navigate, F for fullscreen.

Reading view

← Back to the full Chapter 2 deck

Text, Headings, Inline Elements & Entities
Fullscreen for presentation · Print / PDF for a handout
1 / 6
Lesson

Text, Headings, Inline Elements & Entities

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

Text, Headings, Inline Elements & 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.
Text, Headings, Inline Elements & Entities

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.
Text, Headings, Inline Elements & Entities

Inline & Semantic Elements

ElementMeaning
<strong>Bold + semantic importance
<em>Italic + semantic emphasis
<code>Inline code snippet
<abbr>Abbreviation with tooltip
<sub> / <sup>Subscript / superscript
<del> / <ins>Deleted (strikethrough) / inserted text
<mark>Highlighted text (HTML5)
<time>Machine-readable date/time
<small>Fine print / legal text
<span>Generic inline container for CSS

Obsolete: <b>, <i>, <big>, <tt>, <font>. Use <strong>, <em> and CSS instead.

Text, Headings, Inline Elements & Entities

Character Entities

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

CharacterNamed entity
Less than <&lt;
Greater than >&gt;
Ampersand &&amp;
Double quote "&quot;
Apostrophe '&apos;
Copyright ©&copy;
Registered ®&reg;
Trademark ™&trade;
Euro € / Pound £&euro; / &pound;
Non-break space&nbsp;
Em dash —&mdash;

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

Text, Headings, Inline Elements & Entities

Activity — complete the code

Complete the text-formatting example with the correct tags.

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