Introduction
HTML paragraphs are used to display blocks of text on a webpage. The <p> tag automatically adds space before and after each paragraph, making the content easy to read. In this chapter, you’ll practice creating paragraphs, using line breaks, and adding horizontal lines through simple solved questions.
Question 1
Problem Statement
Create a webpage that displays a paragraph introducing yourself.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
</head>
<body>
<p>Hi! My name is Rahul Sharma. I am learning HTML to build beautiful websites.</p>
</body>
</html>
Output
Hi! My name is Rahul Sharma. I am learning HTML to build beautiful websites.
Step-by-Step Explanation
<p>is used to create a paragraph.- The browser automatically adds spacing around the paragraph.
- Everything inside the
<p>tag is displayed as one paragraph.
Question 2
Problem Statement
Create a webpage that displays two separate paragraphs about your school.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My School</title>
</head>
<body>
<p>Green Valley Public School is located in New Delhi.</p>
<p>Our school has modern classrooms and experienced teachers.</p>
</body>
</html>
Output
Green Valley Public School is located in New Delhi.
Our school has modern classrooms and experienced teachers.
Step-by-Step Explanation
- Each
<p>creates a new paragraph. - The browser automatically leaves space between paragraphs.
- Multiple paragraphs improve readability.
Question 3
Problem Statement
Create a webpage that displays your address on different lines using the <br> tag.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Address</title>
</head>
<body>
<p>
Rahul Sharma<br>
House No. 25<br>
Sector 10, Dwarka<br>
New Delhi - 110075
</p>
</body>
</html>
Output
Rahul Sharma
House No. 25
Sector 10, Dwarka
New Delhi - 110075
Step-by-Step Explanation
<p>creates the paragraph.<br>moves the text to the next line.- No new paragraph is created.
<br>is useful for addresses, poems, and contact details.
Question 4
Problem Statement
Create a webpage that displays a motivational quote on three different lines.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Motivational Quote</title>
</head>
<body>
<p>
Dream Big.<br>
Work Hard.<br>
Never Give Up.
</p>
</body>
</html>
Output
Dream Big.
Work Hard.
Never Give Up.
Step-by-Step Explanation
- The quote is written inside one paragraph.
<br>moves each sentence to a new line.- This keeps related text together in a single paragraph.
Question 5
Problem Statement
Create a webpage that displays two paragraphs separated by a horizontal line.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Separator</title>
</head>
<body>
<p>HTML is the foundation of every website.</p>
<hr>
<p>CSS is used to style HTML webpages.</p>
</body>
</html>
Output
HTML is the foundation of every website.
----------------------------
CSS is used to style HTML webpages.
Step-by-Step Explanation
<p>creates paragraphs.<hr>draws a horizontal line.- The line visually separates two sections of content.
<hr>does not need a closing tag.
Question 6
Problem Statement
Create a webpage that displays a short poem using line breaks (<br>).
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Poem</title>
</head>
<body>
<p>
Twinkle, twinkle, little star,<br>
How I wonder what you are!<br>
Up above the world so high,<br>
Like a diamond in the sky.
</p>
</body>
</html>
Output
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
Step-by-Step Explanation
<p>creates a paragraph.<br>moves each line of the poem to a new line.- All lines remain inside the same paragraph.
Question 7
Problem Statement
Create a webpage that displays your daily routine in separate paragraphs.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Daily Routine</title>
</head>
<body>
<p>I wake up at 6:30 AM.</p>
<p>I attend my classes and complete my assignments.</p>
<p>I practice HTML coding for one hour every evening.</p>
</body>
</html>
Output
I wake up at 6:30 AM.
I attend my classes and complete my assignments.
I practice HTML coding for one hour every evening.
Step-by-Step Explanation
- Each activity is written in its own paragraph.
- The browser automatically adds space between paragraphs.
- Separate paragraphs improve readability.
Question 8
Problem Statement
Create a webpage that displays your contact information with each detail on a new line.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Contact Information</title>
</head>
<body>
<p>
Name: Rahul Sharma<br>
Email: rahul@email.com<br>
Phone: +91 9876543210
</p>
</body>
</html>
Output
Name: Rahul Sharma
Email: rahul@email.com
Phone: +91 9876543210
Step-by-Step Explanation
<p>groups the contact details.<br>places each detail on a separate line.- This format is commonly used for contact information.
Question 9
Problem Statement
Create a webpage that displays three paragraphs about HTML, CSS, and JavaScript, separated by horizontal lines.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Web Development</title>
</head>
<body>
<p>HTML creates the structure of a webpage.</p>
<hr>
<p>CSS is used to style webpages.</p>
<hr>
<p>JavaScript adds interactivity to webpages.</p>
</body>
</html>
Output
HTML creates the structure of a webpage.
-------------------------
CSS is used to style webpages.
-------------------------
JavaScript adds interactivity to webpages.
Step-by-Step Explanation
<p>displays each paragraph.<hr>separates the content into sections.- Horizontal lines make the webpage easier to read.
Question 10
Problem Statement
Create an “About Me” webpage that uses paragraphs, line breaks, and a horizontal line.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<p>
Name: Rahul Sharma<br>
City: New Delhi<br>
Occupation: Student
</p>
<hr>
<p>
I enjoy learning HTML and building simple websites.
</p>
</body>
</html>
Output
Name: Rahul Sharma
City: New Delhi
Occupation: Student
-------------------------
I enjoy learning HTML and building simple websites.
Step-by-Step Explanation
<p>is used to create paragraphs.<br>displays related information on separate lines.<hr>separates two sections of the webpage.- Combining these elements creates a clean page layout.
Key Takeaways
<p>is used to create paragraphs.<br>moves content to the next line without creating a new paragraph.<hr>adds a horizontal line to separate content.- Browsers automatically add spacing around paragraphs.
- Use
<br>for addresses, poems, and contact details. - Use
<hr>to divide different sections of a webpage.
Frequently Asked Questions (FAQs)
1. Which tag is used to create a paragraph in HTML?
The <p> tag is used to create a paragraph.
2. What is the purpose of the <br> tag?
The <br> tag inserts a line break and moves the next content to a new line.
3. Does <br> create a new paragraph?
No. It only creates a new line within the same paragraph.
4. What does the <hr> tag do?
The <hr> tag inserts a horizontal line to separate sections of content.
5. Does the <hr> tag need a closing tag?
No. <hr> is a void element and does not require a closing tag.
6. Can I use multiple <p> tags on one webpage?
Yes. You can use as many paragraphs as needed.
7. When should I use <br> instead of <p>?
Use <br> when you want a new line without starting a new paragraph, such as for poems, addresses, or contact information.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
