HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLParagraphs & Text Formatting
Text Content & Typography

Paragraphs & Text Formatting

Master the art of text content with paragraphs, line breaks, and semantic text formatting elements for professional, accessible web pages.

The Paragraph Element

The <p> element defines a paragraph of text. It's one of the most commonly used HTML elements for body content.

Basic Paragraph Usage
HTML
<p>This is a paragraph of text. Browsers automatically add spacing before and after paragraphs.</p>

<p>This is another paragraph. Each paragraph is a separate block element.</p>

<p>Paragraphs can contain <strong>bold text</strong>, <em>italic text</em>, and <a href="#">links</a>.</p>
💡
Key Behavior: Paragraphs are block-level elements. They start on a new line and browsers add default margin above and below them.

Line Breaks: <br> vs. <p>

Understanding when to use <br> (line break) versus <p> (new paragraph) is crucial for semantic HTML.

When to Use Each:

ElementPurposeUse Cases
<p>Separate paragraphsBody text, distinct ideas, spacing between blocks
<br>Line break within contentPoems, addresses, lyrics, single lines within a paragraph
✅ Correct Usage: Poem (use <br>)
HTML
<p>
    Roses are red,<br>
    Violets are blue,<br>
    HTML is awesome,<br>
    And so are you!
</p>
✅ Correct Usage: Address (use <br>)
HTML
<p>
    John Doe<br>
    123 Main Street<br>
    New York, NY 10001<br>
    United States
</p>
❌ Wrong: Multiple <br> for spacing
HTML
<p>First paragraph</p>
<br><br><br>  <!-- Wrong! Use CSS margin instead --&gt;
<p>Second paragraph</p>
✅ Correct: Use CSS for spacing
HTML
<p>First paragraph</p>
<p style="margin-top: 2rem;">Second paragraph with extra spacing</p>

<!-- Or better yet, use a CSS class --&gt;
<p>First paragraph</p>
<p class="spaced-paragraph">Second paragraph</p>

<style>
.spaced-paragraph {
    margin-top: 2rem;
}
</style>
⚠️ Rule of Thumb: If you're using more than two <br> tags in a row, you should probably be using paragraphs or CSS spacing instead.

Semantic Text Formatting Elements

HTML provides semantic elements that convey meaning along with formatting. Always prefer these over purely visual elements.

Emphasis Elements

<strong> - Strong Importance

Renders as: Bold text

Meaning: Indicates strong importance, seriousness, or urgency

HTML
<p><strong>Warning:</strong> This action cannot be undone.</p>
<p>The <strong>most important</strong> thing to remember is...</p>

<em> - Emphasis

Renders as: Italic text

Meaning: Stresses emphasis, changes meaning of sentence

HTML
<p>I <em>love</em> HTML!</p>
<p>We <em>must</em> finish this today.</p>

<b> - Bring Attention To

Renders as: Bold text (but without semantic importance)

Meaning: Draw attention without conveying extra importance

HTML
<p>The <b>product name</b> is displayed in bold.</p>
<p><b>Keywords:</b> HTML, CSS, JavaScript</p>

<i> - Alternate Voice

Renders as: Italic text (but without emphasis)

Meaning: Technical terms, foreign phrases, thoughts

HTML
<p>The French phrase <i>je ne sais quoi</i> is hard to translate.</p>
<p><i>Homo sapiens</i> is the scientific name for humans.</p>

Which Element Should I Use?

ScenarioUse ThisNot This
Important information<strong><b>
Stress emphasis<em><i>
Product names, keywords<b><strong>
Foreign words, scientific names<i><em>

Other Text Formatting Elements

<mark> - Highlighted Text

Renders as: Highlighted text

Use for: Search results, relevant references

HTML
<p>Search results for "<mark>HTML tutorial</mark>"</p>

<small> - Fine Print

Renders as: Smaller text

Use for: Side comments, disclaimers, legal text

HTML
<p>Price: $99 <small>(tax not included)</small></p>
<p><small>Terms and conditions apply.</small></p>

<del> and <ins> - Edits

Renders as: Deleted text and Inserted text

Use for: Document revisions, showing changes

HTML
<p>Price: <del>$199</del> <ins>$149</ins> (25% off!)</p>
<p>Meeting time: <del{"&gt;"} 3 PM</del> <ins>4 PM</ins></p>

<s> - Strikethrough

Renders as: Strikethrough text

Use for: No longer accurate or relevant

HTML
<p><s>Out of stock</s> Now available!</p>

<u> - Underline

Renders as: Underlined text

Use for: Misspelled words, proper names (Chinese)

HTML
<p>Please correct the <u>speling</u> error.</p>
⚠️ Caution: Underlines are often confused with links. Use sparingly.

<sub> and <sup> - Subscript & Superscript

Renders as: H2O and x2

Use for: Chemical formulas, mathematical expressions, footnotes

HTML
<p>The formula for water is H<sub>2</sub>O.</p>
<p>E = mc<sup>2</sup></p>
<p>Referenced in footnote<sup>1</sup></p>

Code and Technical Text

<code> - Inline Code

Renders as: monospaced code

Use for: Variable names, function names, short code snippets

HTML
<p>Use the <code>console.log()</code> function to print output.</p>
<p>The <code>background-color</code> CSS property sets the background.</p>

<pre> - Preformatted Text

Purpose: Preserves whitespace and line breaks

HTML
<pre>
function greet(name) {
    console.log("Hello, " + name);
}
</pre>

Renders exactly as written:

function greet(name) {
    console.log("Hello, " + name);
}

<kbd> - Keyboard Input

Renders as: Ctrl + C

HTML
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Type <kbd>npm install</kbd> to install packages.</p>

<samp> - Sample Output

Purpose: Represents output from a program

HTML
<p>The command returned: <samp>Error: File not found</samp></p>

<var> - Variable

Purpose: Represents a mathematical or programming variable

HTML
<p>The formula is <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
<p>Set <var>x</var> = 10 and <var>y</var> = 20</p>

Quotations and Citations

<blockquote> - Block Quotation

Purpose: Long quotations (separate paragraph)

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

The only way to do great work is to love what you do.

— Steve Jobs

<q> - Inline Quotation

Purpose: Short quotes within a paragraph

HTML
<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

Renders as: As Einstein said, Imagination is more important than knowledge.

<cite> - Citation

Purpose: Reference to a creative work

HTML
<p>My favorite book is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<p>Read more in <cite>HTML: The Definitive Guide</cite>.</p>

<abbr> - Abbreviation

Purpose: Abbreviations and acronyms with tooltips

HTML
<p>Use <abbr title="HyperText Markup Language">HTML</abbr> to structure content.</p>
<p>The <abbr title="World Wide Web Consortium">W3C</abbr> maintains web standards.</p>

Renders as: Use HTML to structure content.

Best Practices Summary

✅ Do

  • Use <p> for paragraphs, <br> for line breaks
  • Choose semantic elements (<strong>, <em>)
  • Use <abbr> with titles for abbreviations
  • Use <code> for inline code references
  • Cite sources with <cite>
  • Keep paragraphs concise (3-5 sentences)

❌ Don't

  • Use multiple <br> for spacing (use CSS)
  • Use <b>/<i> when you mean importance/emphasis
  • Underline text that isn't a link
  • Write huge walls of text (break into paragraphs)
  • Use deprecated elements like <font>, <center>

What's Next?

Now that you've mastered paragraphs and text formatting, let's explore inline text elements in more detail.

Next: Inline Text Elements →