« Previous Next »

Paragraphs

The <p> element is used to define a paragraph in HTML.
Paragraphs are block-level elements and always start on a new line.
Most browsers automatically add white space (also called margins) before and after each paragraph.

Basic Syntax

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

Multiple Paragraphs

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

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

Tips

Use separate <p> tags for separate blocks of text.
Paragraphs cannot contain other block-level elements like <div>, <table>, etc.
You can style paragraphs using CSS for margins, line height, font size, etc.

Example

Output :

Display

In HTML, you cannot control exactly how content will appear on every screen.
Different devices such as large desktops, small phones, or resized browser windows may display elements differently.

Adding extra spaces or blank lines in your HTML code will not affect the actual output on the browser.
Browsers treat multiple spaces or line breaks as a single space unless styled or formatted otherwise.

Output :

Horizontal Rules

The <hr> tag defines a thematic break in an HTML document.
It is commonly displayed as a horizontal line, and is used to separate sections or indicate a change in topic.

Syntax

  <hr>

Example

Output :

Line Breaks

The <br> tag in HTML is used to insert a line break within a block of text.
It allows content to continue on a new line without starting a new paragraph.

When to Use

Inside poems or addresses where new lines are required
Inside a single paragraph where line breaks improve readability

Syntax

  <br>

Example

Output :

<pre> Element in HTML

The <pre> element is used to display preformatted text.
Text inside a <pre> block retains all spaces and line breaks exactly as written in the HTML source.
It is usually shown in a monospace (fixed-width) font like Courier.

When to Use

To show computer code or command-line output
To display poetry, ASCII art, or formatted data
Anytime you want to preserve whitespace formatting

Syntax

  <pre>
  
Line 1 of text  
    Line 2 with spaces  
Line 3 on a new line  
  
  </pre>

Output Preview

Line 1 of text  
    Line 2 with spaces  
Line 3 on a new line

Key Points

<pre> preserves formatting: spaces, tabs, and new lines.
Often used together with <code> for displaying code samples.
You can apply CSS to style the font, size, color, background, and more.

Output 5:

Practice Exercises

Task 1: Which tag creates new text paragraphs?

Goal: Learn how to separate text blocks on new lines.
💡 Hint: Wrap each text block inside the <p> tag.

💡 Show Solution

<html>
  <body>
    <p>Welcome to the Academy of Information Technology (AIT), Aurangabad.</p>
    <p>We offer high-quality courses in Web Development, Programming, and IT Skills.</p>
  </body>
</html>

Output :

Welcome to the Academy of Information Technology (AIT), Aurangabad.

We offer high-quality courses in Web Development, Programming, and IT Skills.

Explanation: The <p> tag is a block-level element that always starts on a new line with automatic spacing before and after.

Task 2: How to draw horizontal dividing line?

Goal: Practice adding thematic breaks between different content sections.
💡 Hint: Place an <hr> tag between sections.

💡 Show Solution

<html>
  <body>
    <h1>Welcome to AIT</h1>
    <p>We provide quality education in IT.</p>
    <hr>
    <h2>Our Courses</h2>
  </body>
</html>

Output :

Welcome to AIT

We provide quality education in IT.

Our Courses

Explanation: The <hr> tag defines a thematic break in HTML, creating a horizontal line across the page.

Task 3: How to break lines without new paragraph?

Goal: Learn to force line breaks inside a single paragraph.
💡 Hint: Insert the <br> tag where you want text to wrap.

💡 Show Solution

<html>
  <body>
    <p>Welcome to AIT.<br>Learn Web Development.<br>Start today!</p>
  </body>
</html>

Output :

Welcome to AIT.
Learn Web Development.
Start today!

Explanation: The <br> tag inserts a single line break without adding extra paragraph margin spaces.

Task 4: Which tag keeps exact code spaces?

Goal: Preserve extra spaces and newlines exactly as written in source code.
💡 Hint: Wrap formatted text inside the <pre> tag.

💡 Show Solution

<html>
  <body>
    <pre>
Academy of Information Technology (AIT)

  Learn. Code. Innovate.

Web Development | Programming | Certifications
    </pre>
  </body>
</html>

Output :

Academy of Information Technology (AIT)

  Learn. Code. Innovate.

Web Development | Programming | Certifications

Explanation: The <pre> tag retains all white space, tabs, and line breaks exactly as typed.

« Previous Next »