HTML5 Tutorial - HTML Paragraphs

Posted by Ridwan Fadilah on Jul 05, 2020 - 06:25 pm

---

An HTML5 paragraph is used to insert a new line of the text. By default, a paragraph is usually will display a different result on the large or small screen size. On HTML, you cannot change the display by adding extra space and lines in your HTML code.

In this tutorial, you'll learn about the HTML5 paragraph usage examples. You'll also learn about the HTML Horizontal Rules, HTML Line Breaks, and Preformatted Text.

HTML5 Paragraph Tags

The paragraphs are defined by the <p> element.

A paragraph will start on new lines, the browser will automatically add some space before and after the text line.

Example:

The example above will display by the browser like this:

Styling The Paragraph Elements

If you have learned about the HTML Headings, surely you know how to add some style to the HTML Elements. There's no difference.

You can learn about the HTML Headings in the previous chapter.

Add the HTML 'style' attribute and the CSS property to the <p> element to add some styles.

Example:

The example above will display by the browser like this:

The CSS 'font-size' property defines the size of the text.

The CSS 'color' property defines the color of the text.

The CSS 'background-color' property defines the color of the text background.

HTML5 Preformatted Text

The HTML <p> element does not allow you to add some extra spaces or line breaks. The solution to this problem is by using the HTML5 preformatted text element.

Use the <pre> element to make an HTML5 preformatted text.

Here's the example of differences between the <p> element and the <pre> element:

The example above will display by the browser like this:

You can specify the text size and the font type of the <pre> element by using the HTML 'style' attribute and the CSS property. You can also change the color of the text and the color of the text background.

Example:

The example above will display by the browser like this:

HTML5 Horizontal Rules

Use the <hr> tag to make a thematic line break in the HTML page.

The <hr> element is used to separate content on your HTML page.

The <hr> element is an empty tag, which means that it has no end tag.

Example:

The example above will display by the browser like this:

HTML5 Line Breaks

The last is the line break element. Use the <br> tag to make an empty line break or new line in the HTML page.

The <br> element is used to insert new line without starting a new paragraph on your HTML page.

Like the <hr> element, the <br> element is an empty tag, which means that it has no end tag.

Example:

The example above will display by the browser like this:

Okay, that's the basic tutorial about the HTML5 Paragraphs. Find another tutorial of HTML5 on the related article below.

You can also find another tutorial on our YouTube Channel.

Thanks for reading, see you in the next article.

---

Related Articles

---