Paragraphs in HTML - Performance & Optimization

Performance: Paragraphs

LOW IMPACT

Paragraphs affect the page's rendering speed and layout stability by adding block-level text content.

Displaying multiple blocks of text as paragraphs

HTML

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

Using semantic <p> tags provides consistent default styling and helps browsers optimize layout stability.

📈 Performance GainReduces layout shifts and ensures a single reflow per paragraph block.

Displaying multiple blocks of text as paragraphs

HTML

<div>First paragraph text.</div><div>Second paragraph text.</div>

Using <div> instead of <p> lacks semantic meaning and may cause inconsistent default styling and layout shifts.

📉 Performance CostTriggers multiple reflows if styles are adjusted dynamically; can cause CLS due to unexpected layout shifts.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Using <div> for paragraphs	Multiple block nodes	Multiple reflows if styled dynamically	Higher paint cost due to layout shifts	[X] Bad
Using semantic <p> tags	Multiple block nodes	Single reflow per paragraph block	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

Paragraphs are parsed as block-level elements, triggering style calculation and layout. Proper semantic tags help browsers optimize paint and compositing.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage can be costly if paragraphs cause unexpected shifts or complex styling.

Core Web Vital Affected

CLS

Paragraphs affect the page's rendering speed and layout stability by adding block-level text content.

Optimization Tips

1Always use semantic <p> tags for paragraphs to ensure stable layout.

2Avoid using <div> for paragraphs to prevent unexpected layout shifts.

3Consistent styling on <p> tags reduces reflows and improves CLS.

Performance Quiz - 3 Questions

Why is using <p> tags better than <div> for paragraphs in terms of performance?

A Because <p> tags increase the number of DOM nodes

B Because <div> tags load faster than <p> tags

C Because <p> tags provide semantic meaning and help reduce layout shifts

D Because <div> tags prevent reflows

DevTools: Performance

How to check: Record a performance profile while loading the page with paragraphs. Look for layout and paint events related to paragraph elements.

What to look for: Check for layout shifts and reflows caused by paragraph elements; stable <p> tags show fewer layout recalculations.

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