HTML5 Fundamentals

Paragraphs, Text Formatting & Inline Elements

30 min Lesson 5 of 18

Paragraphs and Whitespace

The  tag is the most fundamental building block for text on the web. Browsers automatically add vertical spacing above and below each paragraph, visually separating blocks of text. One of the most important behaviors to understand is whitespace collapsing: no matter how many spaces, tabs, or blank lines you insert between words in your HTML source, the browser reduces them all to a single space when rendering the page.

Example: Whitespace Collapsing

<p>This    has      many         spaces.</p>
<!-- Browser renders: "This has many spaces." -->

<p>This
has
line breaks
in source.</p>
<!-- Browser renders: "This has line breaks in source." -->

If you need to preserve exact spacing and line breaks -- for example when displaying poetry or ASCII art -- use the <pre> (preformatted text) element. The browser will render the content exactly as it appears in the source code, including all spaces and line breaks, typically in a monospace font.

Line Breaks and Horizontal Rules

The   tag inserts a single line break within a paragraph. It is a void element, meaning it has no closing tag. Use it only when a line break is part of the content itself, such as in an address or a poem. Do not use   tags to create vertical spacing between elements -- that is the job of CSS margins and padding.

The <hr> tag creates a horizontal rule, which is a thematic break between sections of content. It is also a void element. Semantically, it signals a shift in topic rather than mere visual decoration.

Example: Line Breaks and Horizontal Rules

<p>Edrees Salih<br>
123 Web Dev Street<br>
Internet City, HTML 12345</p>

<hr>

<p>A new section begins after the thematic break.</p>

Common Mistake: Using multiple   tags to add vertical spacing is a bad practice. Always use CSS properties like margin or padding to control spacing between elements. The   tag is strictly for content-level line breaks.

Semantic Text Formatting

HTML provides elements that add both visual formatting and semantic meaning to text. Understanding the difference between semantic and presentational elements is critical for accessibility and SEO.

The  element marks text as having strong importance. Browsers render it in bold, and screen readers may announce it with added emphasis. The  element also renders text in bold, but carries no semantic importance -- it simply draws visual attention. Similarly,  indicates emphasis and renders in italic, while  renders italic text without any implied emphasis (commonly used for technical terms, foreign words, or thoughts).

Example: Semantic vs Presentational Formatting

<p><strong>Warning:</strong> Do not delete this file.</p>
<p><b>Note:</b> This is visually bold but not urgent.</p>

<p>You <em>must</em> submit before Friday.</p>
<p>The word <i>schadenfreude</i> comes from German.</p>

Pro Tip: When deciding between  and , ask yourself: "Does this text carry genuine importance?" If yes, use . If you just want a visual effect, use  or, better yet, style it with CSS.

Additional Inline Elements

HTML offers a rich set of inline elements for marking up specialized text. The  element highlights text as if marked with a yellow highlighter, useful for search results. The <del> and <ins> elements indicate deleted and inserted text respectively, rendering with a strikethrough and underline. The  and  elements create subscript and superscript text, essential for chemical formulas and mathematical expressions. The  element represents side comments or fine print.

For technical content, <code> marks inline code in a monospace font, while <kbd> represents keyboard input. The <abbr> element with a title attribute provides the full expansion of abbreviations, and  is a generic inline container used for styling with CSS when no semantic element applies.

Example: Inline Elements in Practice

<p>Search results for: <mark>HTML formatting</mark></p>

<p>Price: <del>$49.99</del> <ins>$29.99</ins></p>

<p>Water is H<sub>2</sub>O. The area is 5m<sup>2</sup>.</p>

<p><small>Terms and conditions apply.</small></p>

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

<p>Use the <code>console.log()</code> function to debug.</p>

<p>The <abbr title="World Wide Web">WWW</abbr> was invented in 1989.</p>

<p>This has a <span style="color: blue;">blue word</span> in it.</p>

Blockquotes

The <blockquote> element is used to mark up a section of content quoted from another source. Browsers typically indent blockquotes. You can include a cite attribute with the URL of the original source, though this is not displayed visually by default.

Example: Blockquote

<blockquote cite="https://example.com/article">
  <p>The only way to do great work is to love what you do.</p>
</blockquote>

Note: Block-level elements like , <blockquote>, <pre>, and <hr> start on a new line and take up the full available width. Inline elements like , , <code>, and  flow within the surrounding text without breaking the line.

Practice Exercise

Create an HTML page that demonstrates every element from this lesson. Write a short biography paragraph using  tags, include an address with   tags, separate sections with <hr>. Use  and  for emphasis, include a chemical formula with , a mathematical exponent with , a price correction with <del> and <ins>, a keyboard shortcut with <kbd>, an abbreviation with <abbr>, and a favorite quote inside a <blockquote>. Save the file as formatting.html and verify all elements render correctly in your browser.