Paragraphs in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What HTML tag is used to create a paragraph?

The <p> tag is used to create a paragraph in HTML. It groups sentences together as a block of text.

beginner

How does a browser display paragraphs by default?

Browsers display paragraphs with space above and below them, creating a clear separation between blocks of text.

intermediate

Can you put other HTML elements inside a paragraph?

Yes, you can put inline elements like <strong> or <em> inside a paragraph, but block elements like <div> should not be inside <p>.

beginner

What happens if you write multiple lines of text without <p> tags?

The browser will show the text as one continuous block without spacing. Paragraph tags help separate text into readable chunks.

beginner

Why is it important to use paragraphs in web pages?

Paragraphs improve readability by breaking text into smaller parts. They also help screen readers understand the structure, improving accessibility.

Which tag is correct for creating a paragraph in HTML?

A <text>

B <p>

C <paragraph>

D <para>

The correct tag for paragraphs in HTML is <p>. Other tags like <para> or <paragraph> do not exist.

What does a browser add around paragraphs by default?

A Extra space above and below

B Bold text

C Underline

D Background color

Browsers add space above and below paragraphs to separate blocks of text visually.

Which element can you NOT put inside a <p> tag?

A <code>&lt;div&gt;</code>

B <code>&lt;em&gt;</code>

C <code>&lt;strong&gt;</code>

D Text

Block elements like <div> should not be placed inside <p> tags. Inline elements like <strong> and <em> are allowed.

What happens if you write text without paragraph tags?

A Text is automatically bold

B Text is underlined

C Text is hidden

D Text appears as one block without spacing

Without paragraph tags, text appears as one continuous block with no spacing between lines.

Why should you use paragraphs in your web page?

A To change font color

B To make text blink

C To improve readability and accessibility

D To add images

Paragraphs break text into smaller parts, making it easier to read and helping screen readers understand the content.

Explain how to create and use paragraphs in HTML and why they are important.

Think about how you write paragraphs in a book or letter.

Describe what types of elements can be placed inside a paragraph and which cannot.

Consider what fits inside a sentence versus a whole section.

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