Lesson 5: HTML Paragraphs
What are HTML Paragraphs?
HTML paragraphs are blocks of text defined with the <p> tag. A paragraph always starts on a new line, and browsers automatically add some space (margin) before and after each paragraph.
Key Points:
- The <p> tag defines a paragraph
- Paragraphs are block-level elements
- Browsers automatically add spacing around paragraphs
- Extra spaces and line breaks in your code are ignored
Basic Paragraph
HTML Code:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Output:
This is a paragraph.
This is another paragraph.
Paragraph Display
You cannot be sure how HTML will display. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
HTML Code:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
Output:
This paragraph contains a lot of lines in the source code, but the browser ignores it.
Line Breaks - The <br> Tag
Use the <br> tag to insert a line break without starting a new paragraph:
HTML Code:
<p>This is<br>a paragraph<br>with line breaks.</p>
Output:
This is
a paragraph
with line breaks.
💡 Note: The <br> tag is an empty tag, which means it has no end tag. It's also written as <br/> in XHTML.
Horizontal Rules - The <hr> Tag
The <hr> tag creates a horizontal line (rule) to separate content:
HTML Code:
<p>This is paragraph one.</p>
<hr>
<p>This is paragraph two.</p>
Output:
This is paragraph one.
This is paragraph two.
Preformatted Text - The <pre> Tag
The <pre> tag preserves both spaces and line breaks:
HTML Code:
<pre>
My Poem
Roses are red,
Violets are blue.
</pre>
Output:
My Poem
Roses are red,
Violets are blue.
Text Formatting Elements
You can use various tags inside paragraphs to format text:
HTML Code:
<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
Output:
This is bold text.
This is italic text.
This is underlined text.
This is important text.
This is emphasized text.
Semantic vs Visual Tags:
- <strong> and <b> both make text bold, but <strong> indicates importance
- <em> and <i> both make text italic, but <em> indicates emphasis
- Use semantic tags (<strong>, <em>) for better accessibility and SEO
Other Useful Text Elements
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <small>smaller</small> text.</p>
<p>This is <del>deleted</del> text.</p>
<p>This is <ins>inserted</ins> text.</p>
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
This is highlighted text.
This is smaller text.
This is deleted text.
This is inserted text.
This is subscript text.
This is superscript text.
💡 Best Practices:
- Always close your <p> tags
- Use paragraphs to organize your content logically
- Don't use empty paragraphs for spacing - use CSS instead
- Keep paragraphs focused on one idea
Practice Exercise
Try This:
Create a short story or article with:
- At least 3 paragraphs
- Use <br> for a line break within a paragraph
- Add an <hr> to separate sections
- Use at least 3 text formatting tags (bold, italic, etc.)