- 3 years ago
- Shahzad Gujjar
- 2,670 Views
-
2
This tutorial will teach you how to make HTML paragraphs.
Creating Paragraphs
Text is published on web pages using the paragraph element.
The p> tag is used to designate paragraphs. The paragraph tag is the most basic and sometimes the first tag you’ll need to publish text on the web pages. Here’s an example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
NOTE: Built-in style sheets in browsers build a margin above and below the content of a paragraph by default, but you can override it with CSS.
Closing a Paragraph Element
It was enough to use the opening tag to start a new paragraph in HTML 4 and earlier versions. Even if you forgot the end tag, most browsers will display HTML correctly. Try the following case:
<p>This is a paragraph.
<p>This is another paragraph.
Most web browsers can work with the HTML code in the example above, but don’t count on it. Leaving out the end tag may lead to unexpected outcomes or errors.
NOTE: It’s best to use both the opening and closing tags for the paragraphs for forwards- compatibility and good coding practice.
Creating Line Breaks
On a web page, the <br> tag is used to insert a line break.
There is no need for a corresponding </br> tag since <br> is an empty element.
<p>This is a paragraph <br> with line break.</p>
<p>This is <br>another paragraph <br> with line breaks.</p>
To add extra space to your web pages, don’t use the empty paragraph, i.e. <p></p>. Because it is a logical tag, the browser may ignore the empty paragraphs. To adjust the space around the elements, use the CSS margin property instead.
Creating Horizontal Rules
The <hr> tag can be used to visually separate content sections on a web page by creating horizontal rules or lines. The <hr> tag, like <br>, is an empty element. for example:
<p>This is a paragraph.</p>
<hr>
<p>This is another paragraph.</p>
Managing White Spaces
By pressing the space bar or tab key on the keyboard, the browser will normally display the multiple spaces created within the HTML code as a single space. Multiple line breaks created by pressing the enter key within the HTML code are also displayed as a single space.
Without additional space, the following paragraphs are shown in one single line:
<p>This paragraph contains multiple spaces in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>
Use the tag to create extra consecutive spaces, and the <br> tag to create line breaks on your web pages, as shown in the example below:
<p>This paragraph has multiple spaces.</p>
<p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>
Defining Preformatted Text
Sometimes, using , <br>, etc. is inconvenient to manage spaces.
You can also use the <pre> tag to display spaces, tabs, line breaks, and other elements exactly as they appear in the HTML file. It’s especially useful when presenting text that requires spaces and line breaks, such as a poem or code.
The text in the following example will appear in the browser exactly as it appears in the source code:
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
NOTE: Browsers usually render text within the <pre> element in a monospace or fixed-width font, such as Courier, but you can override this with the CSS font property.
- 3 years ago
- Shahzad Gujjar
- 2,670 Views
-
2
