Paragraphs & Text Formatting

📚 Lesson 7 of 25 • ⏱ 8 min read • Beginner

The Paragraph Tag

The <p> tag defines a paragraph. Browsers add a blank line before and after each paragraph automatically:

HTML

<p>This is the first paragraph. It has its own block of space.</p>
<p>This is a second paragraph. Notice the gap between them.</p>

Line Break — <br>

Use <br> to force a new line within a paragraph. Unlike <p>, it does not add extra space:

HTML

<p>
  123 Main Street<br>
  Chennai, Tamil Nadu<br>
  India - 600001
</p>

Text Formatting Tags

HTML

<strong>Bold and important text</strong>   <!-- semantic bold -->
<b>Bold text (visual only)</b>            <!-- non-semantic bold -->
<em>Emphasized (italic) text</em>          <!-- semantic italic -->
<i>Italic (visual only)</i>               <!-- non-semantic italic -->
<u>Underlined text</u>
<s>Strikethrough text</s>                <!-- deleted/wrong content -->
<mark>Highlighted text</mark>             <!-- yellow highlight -->
<small>Smaller text</small>               <!-- fine print -->
<sup>Superscript</sup>   <sub>Subscript</sub>   <!-- H₂O, E=mc² -->

Code and Preformatted Text

HTML

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

<!-- Preformatted block (preserves spaces and line breaks) -->
<pre>
  function greet() {
    console.log("Hello!");
  }
</pre>

Blockquote and Cite

HTML

<blockquote cite="https://source.com">
  <p>"The best way to learn to code is to build things."</p>
</blockquote>
<cite>— Anonymous Developer</cite>

Horizontal Rule

HTML

<p>Section one content.</p>
<hr>   <!-- draws a horizontal line -->
<p>Section two content.</p>

← Headings Next: Links →