Paragraphs and Text Elements

Learn the core inline and block text elements in HTML — paragraphs, line breaks, and text-level semantics — and understand the crucial difference between elements that convey meaning and elements that only apply visual style.

Headings organize a page into sections, but almost all of the actual reading content lives in paragraphs and smaller inline text elements. HTML offers more than a dozen elements for marking up text — bold, italic, highlighted, struck-through, superscript, and more — and it's easy to assume they're interchangeable style shortcuts. They aren't. Some of these elements carry real meaning that browsers, screen readers, and search engines interpret differently, while others are purely cosmetic. This lesson walks through the most important text elements and, most importantly, the semantic-versus-visual distinction that trips up almost every beginner.

Paragraphs, Line Breaks, and Horizontal Rules

The element defines a paragraph — a block of related text, just like a paragraph in a printed document. Browsers automatically add space above and below each , and each one starts on a new line, because it's a block-level element.

The element inserts a single line break within a block of text, without starting a new paragraph. It's a void (self-closing) element — it has no closing tag and no content, since it doesn't wrap anything; it simply marks a point where the text should break to a new line. is meant for cases where a line break is part of the content itself (like the lines of a mailing address or a poem), not for creating visual space between unrelated blocks — that's what CSS margins are for.

The <hr> element inserts a thematic break — traditionally rendered as a horizontal line — indicating a shift in topic within the content, such as a scene change in a story or a transition between unrelated sections. Like , it is a void element with no closing tag.

Semantic vs. Visual: The Core Distinction

HTML gives you two elements that make text bold — and — and two that make text italic — and . Visually, in a browser with default styling, and look identical, and so do and . This leads almost every beginner to assume they're just two names for the same thing. They are not.

and are semantic elements: they tell the browser (and anything else parsing the page) something about the meaning of the text — that it carries strong importance, seriousness, or urgency (), or that it carries stress emphasis, changing the meaning of the sentence when spoken aloud (). Screen readers can — and often do — change their voice or intonation when reading text wrapped in these elements, exactly the way a human speaker's tone changes when they stress a word.

and are purely presentational elements: they mean 'draw this text bold' or 'draw this text italic,' with no implication about importance or emphasis at all. They're appropriate for cases like a product name conventionally shown in bold, or a foreign-language phrase or ship name conventionally shown in italics — text that's stylistically distinct but not more 'important' or 'emphasized' than the surrounding text.

The practical rule: ask yourself whether the text you're marking up is more important/emphasized in meaning, or just stylistically different in appearance. If it's about meaning, use or . If it's purely about appearance with no semantic weight, or is the technically correct (if less common) choice.

Other Useful Inline Text Elements

highlights text for reference purposes, as if drawn over with a highlighter pen — commonly used to highlight search-term matches within a block of text.

represents 'fine print' — side comments such as legal disclaimers, copyright notices, or licensing text — content that's typically smaller in a print layout but is still meaningfully secondary content, not just smaller text for its own sake.

<del> marks text that has been deleted or removed from a document (often shown with a strikethrough), and <ins> marks text that has been inserted (often shown underlined) — together they're commonly used to show tracked edits, like a crossed-out old price next to a new one.

renders text as subscript (lowered and shrunk, as in a chemical formula like H2O), and renders text as superscript (raised and shrunk, as in a mathematical exponent like x2 or an ordinal like 1st).

Why This Distinction Matters in Practice

Beyond screen reader behavior, this distinction matters for maintainability and search engines. A page built with semantic elements like communicates real meaning that other tools and future developers can rely on — for instance, a browser extension summarizing 'important' text on a page could reasonably look for tags. A page built entirely with tags for the same visual effect gives no such signal.

In modern practice, many developers reach for CSS (like font-weight: bold or font-style: italic on a ) when they want pure visual styling with zero semantic meaning, reserving and for the specific conventional cases described above (product names, ship names, technical terms on first use, etc.), and reserving / strictly for genuine importance or emphasis.

Text Element Syntax

and <hr> are void elements — no closing tag, and in HTML5 the trailing slash ( ) is optional. Inline elements like , , , , and must be nested inside a block-level container like to be valid, well-structured content.

<p>This is a paragraph with <strong>important text</strong> and <em>emphasized text</em>.</p>
<p>This line ends here.<br>This continues on a new line within the same paragraph.</p>
<hr>
<p>A new topic begins after the horizontal rule.</p>

Code Examples

Two separate paragraphs, each automatically spaced apart by the browser's default styling — no manual line breaks needed between them. Expected result: Two blocks of text with visible space between them.

A mailing address uses to force each line onto its own line within a single paragraph, since the lines are all part of one logical unit (the address). An <hr> then marks a thematic break before the next topic.

is used here because the three address lines are not separate paragraphs — they're one paragraph that needs specific line breaks.

Common mistake: A common mistake is wrapping each address line in its own instead — that adds unwanted paragraph spacing and incorrectly implies each line is a separate, unrelated block of content.

The first paragraph uses for a genuinely important safety warning and to add real stress emphasis to 'especially' — both carry meaning. The second paragraph uses for a stylistically bold product name and for a scientific/Latin term shown in italics by convention — neither implies extra importance or emphasis. A screen reader may audibly change tone on and text, but will typically read and text with no change in tone at all — since they carry no semantic instruction.

Compare 'especially' (, changes how the sentence is understood when read aloud) to 'Acme SuperClean' (, just conventionally styled bold with no change in meaning).

A realistic e-commerce snippet combining <del>/<ins> to show a price change, to highlight a promotional callout, / for scientific and mathematical notation, and for fine-print legal text. Expected result: The old price appears with a strikethrough, the new price is underlined, 'Limited time offer!' appears highlighted, H2O and s2 render with lowered/raised small digits, and the terms text renders noticeably smaller than the surrounding paragraphs.

<p>My favorite hobby is hiking.</p>
<p>I go almost every weekend, weather permitting.</p>

<p>
  123 Maple Street<br>
  Springfield, IL 62701<br>
  United States
</p>
<hr>
<p>Contact us using the address above.</p>

<p>
  <strong>Warning:</strong> Do not exceed the recommended dosage.
  The medication should be taken with food, and it is
  <em>especially</em> important to avoid alcohol while using it.
</p>
<p>
  The product name is written in <b>Acme SuperClean</b>, and its
  Latin ingredient name, <i>Citrus limon</i>, appears on the label.
</p>

<p>
  Regular price: <del>$49.99</del> <ins>$34.99</ins>
  <mark>Limited time offer!</mark>
</p>
<p>
  The formula for water is H<sub>2</sub>O, and the area of a
  square is written as s<sup>2</sup>.
</p>
<p>
  <small>Prices valid through the end of the month. Terms and
  conditions apply.</small>
</p>

How Screen Readers Handle Emphasis

Many screen readers, including VoiceOver and JAWS with default settings, apply a subtle change in inflection when reading text wrapped in or , similar to how a human narrator's voice shifts to stress an important word. Because and carry no such instruction, the same screen readers typically read that text with no vocal change at all — meaning a warning marked up with instead of may not register as urgent to a listener the way it does visually to a sighted reader.

Click here to confirm your account deletion — this action cannot be undone.

Click here to confirm your account deletion — this action cannot be undone.

'Account deletion' being irreversible is genuinely important information the user needs to notice — that calls for , not the purely visual , so assistive technology can convey that importance too.

Line one Line two, with extra space above it

Line one Line two, with extra space above it Stacking multiple tags to fake paragraph spacing is a misuse of a line-break element for visual layout — use separate elements (and CSS margins) for spacing between blocks of content instead.

[Multiple Choice] Which statement correctly describes the difference between and ? A. makes text bold and larger, while only makes it bold B. There is no real difference — both are simply older and newer names for the same tag C. conveys semantic importance that assistive technology can interpret, while is purely visual styling with no semantic meaning D. can only be used inside a heading, while can be used anywhere

C. conveys semantic importance that assistive technology can interpret, while is purely visual styling with no semantic meaning — signals that the text is genuinely important, and tools like screen readers can convey that meaning (e.g., with a change in tone). only affects visual appearance and carries no semantic weight, even though both render as bold text by default.

Write a short paragraph about a book review that includes: the book title styled in italics purely by convention (no added emphasis), one word given real stress emphasis, and a sentence noting the review contains spoilers, marked as genuinely important.

Spoiler warning: This review of The Lighthouse Keeper discusses the ending. It is, without question, the best twist I've read all year.

Use for the book title, for the emphasized word, and for the spoiler warning.