Paragraphs in HTML - Browser Rendering Trace

Render Flow - Paragraphs

[Read <p>] -> [Create P node] -> [Add text content] -> [Close P] -> [Render block box]

The browser reads the paragraph tag, creates a block box for it, adds the text inside, and then displays it with default spacing.

Render Steps - 3 Steps

Code Added:<p>This is the first paragraph.</p>

Before

→

After

[Paragraph 1]
| This is the first paragraph. |
|____________________________|

The browser creates a block box for the first paragraph and displays the text inside it.

🔧 Browser Action:Creates DOM node for <p>, creates block box, paints text

Code Sample

Two paragraphs stacked vertically with space between them.

HTML

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Render Quiz - 3 Questions

After step 2, how are the two paragraphs arranged visually?

A Stacked vertically with some space between

B Side by side horizontally

C Overlapping each other

D Hidden from view

Common Confusions - 2 Topics

Why do paragraphs have space between them even if I don't add margin?

Browsers apply default top and bottom margin to <p> elements to separate paragraphs visually (see step 3).

💡 Remember: paragraphs have built-in vertical spacing by default.

Why does text inside <p> start on a new line?

<p> is a block element, so it always starts on a new line and takes full width (step 1).

💡 Block elements stack vertically, unlike inline elements.

Property Reference

Element	Default Display	Semantic Meaning	Visual Behavior
<p>	block	Paragraph of text	Starts on new line, full width, vertical margin separates paragraphs

Concept Snapshot

Paragraphs (<p>) are block elements that create separate blocks of text. They start on a new line and take full width. Browsers add default top and bottom margin to separate paragraphs visually. Use <p> to group sentences into readable blocks. Replacing <p> with inline elements removes vertical spacing.

Practice

1. What is the correct HTML tag to create a paragraph?

easy

A. <p>

B. <div>

C. <span>

D. <section>

Solution

1. Step 1: Understand paragraph tags

   The <p> tag is specifically designed to create paragraphs in HTML.

2. Step 2: Compare with other tags

   <div> and <section> are for grouping content, <span> is inline, not for paragraphs.

3. Final Answer:

   <p> -> Option A

4. Quick Check:

   Paragraph tag = <p> [OK]

Hint: Paragraphs always use <p> tags [OK]

Common Mistakes:

• Using <div> instead of <p>
• Using <span> for paragraphs
• Confusing <section> with paragraph

2. Which of the following is the correct syntax for a paragraph containing the text "Hello World"?

easy

A. Hello World

B. <p>Hello World>

C. Hello World

D. <p>Hello World

Solution

1. Step 1: Check opening and closing tags

   The paragraph tag must open with <p> and close with </p>.

2. Step 2: Validate the options

   <p>Hello World</p> correctly opens and closes the paragraph tag. Options A and B have missing closing brackets, and C uses an invalid tag.

3. Final Answer:

   <p>Hello World</p> -> Option A

4. Quick Check:

   Proper tag syntax = <p>text</p> [OK]

Hint: Always close

tags properly with

[OK]

Common Mistakes:

• Missing closing > in tags
• Using invalid tag names
• Forgetting closing tag

3. What will the browser display for this HTML snippet?

<p>First paragraph.</p>
<p>Second paragraph.</p>

medium

A. First paragraph.Second paragraph.

B. First paragraph.

Second paragraph.

C. First paragraph. Second paragraph.

D. First paragraph Second paragraph

Solution

1. Step 1: Understand paragraph rendering

   Each <p> tag creates a block with space above and below, so paragraphs appear separated by blank lines.

2. Step 2: Analyze the output

   The browser shows "First paragraph." then a blank line, then "Second paragraph." on the next line.

3. Final Answer:

   First paragraph.\n\nSecond paragraph. -> Option B

4. Quick Check:

   Paragraphs add vertical space = separate lines [OK]

Hint: Paragraphs create space above and below text [OK]

Common Mistakes:

• Thinking paragraphs run together without space
• Ignoring line breaks
• Confusing inline and block elements

4. Identify the error in this HTML code:

<p>This is a paragraph.
<p>This is another paragraph.</p>

medium

A. Paragraph tags cannot be nested

B. Using <p> instead of <div>

C. Missing closing tag for the first paragraph

D. Paragraph tags must be self-closing

Solution

1. Step 1: Check paragraph tag pairs

   The first <p> tag is not closed before the second <p> starts.

2. Step 2: Understand paragraph rules

   Paragraph tags must be properly closed; missing closing tags cause rendering issues.

3. Final Answer:

   Missing closing tag for the first paragraph -> Option C

4. Quick Check:

   Each

   needs a closing

   [OK]

Hint: Always close each <p> before starting another [OK]

Common Mistakes:

• Forgetting
  tags
• Thinking <p> can self-close
• Confusing <p> with <div>

5. You want to create a webpage with three paragraphs. The second paragraph should be emphasized with italic text inside it. Which HTML snippet correctly achieves this?

hard

A. First paragraph.Second paragraph.Third paragraph.

B. First paragraph.Second paragraph.Third paragraph.

C. First paragraph.Second paragraph.Third paragraph.

D. First paragraph.Second paragraph.Third paragraph.

Solution

1. Step 1: Structure paragraphs correctly

   Each paragraph must be enclosed in its own <p> tags.

2. Step 2: Use inline tags inside paragraphs

   The <em> tag is used inside the second paragraph to italicize text properly without breaking HTML rules.

3. Step 3: Check invalid nesting

   Options C and D incorrectly nest block and inline tags, and B puts all text in one paragraph.

4. Final Answer:

   <p>First paragraph.</p><p><em>Second paragraph.</em></p><p>Third paragraph.</p> -> Option D

5. Quick Check:

   Use <p> for paragraphs and <em> inside for emphasis [OK]

Hint: Wrap emphasized text inside <em> within <p> tags [OK]

Common Mistakes:

• Nesting <p> inside <em>
• Not closing tags properly
• Putting all text in one paragraph