HTML Paragraphs
In HTML, paragraphs are used to add blocks of text to your web page. They help to break up the content into manageable sections, making it easier for readers to understand and digest the information.
Creating a Paragraph
- To create a paragraph in HTML, you use the <p> tag.
- The text you want to include in the paragraph goes between the opening <p> and closing </p> tags.
- Paragraphs always start on a new line and browsers add some space (margin) before and after each paragraph to separate them from other content.
Example:
<p>This is a paragraph of text on my web page.</p>
In this example, the text “This is a paragraph of text on my web page.” will be displayed as a single paragraph.
Automatic Formatting
- Browsers automatically handle the formatting of paragraphs, including line breaks and spacing.
- Extra spaces and line breaks in the HTML code are ignored by the browser, and the text is displayed as a single block.
Example
Here is an example of how HTML handles text inside paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Formating</title>
</head>
<body>
<p>
This paragraph contains a lot of lines in the source code,
but the browser ignores it and displays it as a single line.
</p>
<p>
This paragraph contains a lot of spaces in the source code,
but the browser ignores it and displays it with single spaces.
</p>
</body>
</html>
Output:
In this example:
- The first paragraph contains 2 lines in the source code, but the browser ignores it and displays it as a single line.
- The second paragraph contains a lot of spaces in the source code, but the browser ignores it and displays it with single spaces.
Browsers are designed to simplify text formatting for you. They collapse multiple spaces and line breaks into a single space, making your paragraphs look clean and uniform. This is why, even if you add many spaces or line breaks in your HTML code, the browser displays the text in a neat, single-line format.
Horizontal Rules
- The <hr> element is used to create a horizontal line that can visually separate sections of content.
- It is often used to indicate a thematic break or a change in topic.
- The <hr> tag is an empty tag, which means it does not have a closing tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
</body>
</html>
Output:
In this example:
- The <h1> element is used for the main heading and <h2> for subheading.
- The <p> element used for paragraph.
- The <hr> tag is used for creating a horizontal line.
This way, the <hr> tag helps to clearly divide different parts of your content, making your web page easier to read and navigate.
Creating Line Breaks
- The <br> tag in HTML is used to insert a line break within a block of text.
- This tag is especially useful when you want to start a new line without starting a new paragraph.
- The <br> tag is an empty tag and does not have a closing tag.
Example
Here’s an example of how to use the <br> tag:
<p>This is <br> a paragraph <br> with line breaks.</p>
Output:
In this example:
- Text: The text “This is a paragraph with line breaks” is within the <p> tags, making it a paragraph.
- Line Breaks: The <br> tags within the paragraph create line breaks.
- First Line Break: The first <br> tag creates a line break after “This is”.
- Second Line Break: The second <br> tag creates a line break after “a paragraph”.
Handling Preformatted Text
The Poem Problem
When you want to display text with preserved spaces and line breaks (such as a poem), using the <p> element will not work as it displays the text in a single block.
Example
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Output:
Solution: The <pre> Elements
- The <pre> element is used for preformatted text.
- Text inside an <pre> element is displayed in a fixed-width font (usually Courier), and both spaces and line breaks are preserved.
- This is ideal for displaying code, poems, or any text where formatting is important.
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Output:
YouTube Reference :
Practice Scenarios
Scenario 1: Multiple Paragraphs
Objective: Create a web page with multiple paragraphs.
Expected Output: A web page with three paragraphs containing different text.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Paragraphs Example</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph. It provides more information.</p>
<p>This is the third paragraph, concluding the content.</p>
</body>
</html>
Output:
Scenario 2: Paragraphs with Links
Objective: Create a web page with paragraphs that include hyperlinks.
Expected Output: A web page with two paragraphs, each containing a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs with Links Example</title>
</head>
<body>
<p>This is a paragraph with a link to <a href=”https://www.example.com”>Example</a>.</p>
<p>Visit <a href=”https://www.wikipedia.org”>Wikipedia</a> for more information.</p>
</body>
</html>
Output:
Scenario 3: Styled Paragraphs
Objective: Create a web page with styled paragraphs using inline CSS.
Expected Output: A web page with three paragraphs, each styled differently (color, font size, and background color).
<!DOCTYPE html>
<html>
<head>
<title>Styled Paragraphs Example</title>
</head>
<body>
<p style=”color: blue;”>This paragraph has blue text.</p>
<p style=”font-size: 20px;”>This paragraph has larger text.</p>
<p style=”background-color: yellow;”>This paragraph has a yellow background.</p>
</body>
</html>
Output:
Scenario 4: Paragraphs with Nested Elements
Objective: Create a web page with paragraphs containing nested elements like bold, italic, and span tags.
Expected Output: A web page with paragraphs containing bold and italic text, and styled spans.
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs with Nested Elements</title>
</head>
<body>
<p>This is a paragraph with <b>bold</b> text.</p>
<p>This is a paragraph with <i>italic</i> text.</p>
<p>This is a paragraph with a <span style=”color: red;”>red</span> word.</p>
</body>
</html>
Output:
Scenario 5: Combined Elements Paragraphs
Objective: Create a web page with three paragraphs, each incorporating different features like hyperlinks, styling, and nested elements.
Expected Output: A web page with three paragraphs:
– The first paragraph contains a hyperlink and is styled with a specific color.
– The second paragraph contains italic and bold text, with a specific background color.
– The third paragraph contains a span with a different font size and another span with a different text color.
Output:
