Paragraphs in HTML - Mini Project: Build & Apply

Creating Paragraphs in HTML

📖 Scenario: You are building a simple webpage to introduce yourself. You want to add some text about your hobbies and interests using paragraphs.

🎯 Goal: Create a basic HTML page with two paragraphs describing your hobbies and interests.

📋 What You'll Learn

Use semantic HTML5 structure

Create two separate paragraphs using the <p> tag

Include a <main> section to hold the paragraphs

Add a lang attribute to the <html> tag

Include charset and viewport meta tags for accessibility and responsiveness

💡 Why This Matters

🌍 Real World

Paragraphs are the basic way to add readable text content on webpages, used everywhere from blogs to company sites.

💼 Career

Knowing how to structure text with paragraphs and semantic HTML is essential for web developers and content creators to build accessible and well-organized websites.

1

Set up the basic HTML structure

Create a basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">, and an empty <body>.

HTML

    
    
    My Hobbies


    

Hint

Remember to include the lang attribute in the <html> tag and the meta tags inside <head>.

2

Add a main section

Inside the <body>, add a <main> element to hold the content of the page.

HTML

    
    
    My Hobbies


    

Hint

Use the <main> tag to wrap the main content of your page.

3

Add the first paragraph

Inside the <main> element, add a paragraph <p> describing your first hobby. Use the exact text: I enjoy reading books about history and science.

HTML

    
    
    My Hobbies


    
        
    

Hint

Use the <p> tag to create a paragraph with the exact text given.

4

Add the second paragraph

Below the first paragraph inside the <main>, add a second paragraph <p> with the exact text: I also like hiking and exploring nature on weekends.

HTML

    
    
    My Hobbies


    
        I enjoy reading books about history and science.
        
    

Hint

Add a second <p> tag with the exact text below the first paragraph.

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