HTML Paragraphs and formatting

How to use paragraphs in HTML

In the previous lesson, we learned about the basic structure of an HTML document and how to create elements using tags. We also learned about semantic elements and their importance in structuring the content of a web page.

Now, we will learn how to use paragraphs to structure the content of a web page articles effectively.

A paragraph always starts on a new line, and is usually a block of text.

<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>

When you write a paragraph, you should always use the <p> tag to define it. This tag is used to create a block of text that is separated from other blocks of text by a blank line.

If you wish to add a new line inside an existing paragraph, you cannot just press Enter.

<p>This is my beatiful poem. It has two lines.</p>

This will not work as expected, because the browser will ignore the line break and display the text as a single line.

Here, you have 2 options:

• You can use the <br> tag to create a line break inside a paragraph. This tag is a self-closing tag, which means it does not have a closing tag. It is used to insert a line break without starting a new paragraph.

<p>
  This is my beatiful poem.<br />
  It has two lines.
</p>

• You can also use the <pre> tag to create a preformatted text block, which preserves the line breaks and spaces in the text. This tag is used to display text exactly as it is written in the HTML code, including line breaks and spaces.

<pre>
This is my beatiful poem.
It has two lines.
</pre>

Beware that the <pre> tag is not a paragraph, it is a block of text that is displayed in a fixed-width font and preserves the formatting of the text. It is used for displaying code snippets or other preformatted text. That is why the text is “touching” the left side and is not indented like a paragraph. It will render indented.

Another type of separation

You can also use the <hr> tag to create a horizontal line that separates different sections of the content. This tag is also a self-closing tag and does not have a closing tag. It is used to create a visual separation between different parts of the content.

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

This will result in:

This is the first paragraph.

---

This is the second paragraph.

Markers

You can use <strong>, <em>, and <mark> tags to emphasize text within a paragraph. These tags are used to highlight important parts of the text.

You can also use <center> tag to center the text within a paragraph. This tag is used to align the text to the center of the page. However, it is not recommended to use this tag, as it is deprecated in HTML5. Instead, you can use CSS to center the text, which is a better practice. CSS is discussed in another course .

<p>
  This is a <strong>strong</strong> text, this is an <em>emphasized</em> text,
  and this is a <mark>marked</mark> text.
</p>
<p>
  <center>This text is centered</center>
  .
</p>

Other formatting tags

You can use the <sub> and <sup> tags to create subscript and superscript text, respectively. These tags are used to display text that is smaller than the surrounding text and is positioned lower or higher than the baseline.

<p>
  This is a subscript text: H<sub>2</sub>O, and this is a superscript text:
  E=mc<sup>2</sup>.
</p>

This results in:

This is a subscript text: H₂O, and this is a superscript text: E=mc ².

---

The <del>, <ins>,<s> and <small> tags are used to indicate deleted, inserted, strikethrough, and small text, respectively. These tags are used to indicate changes made to the text or to display text in a smaller font size.

<p>
  This is a <del>deleted</del> text, this is an <ins>inserted</ins> text, this
  is a <s>strikethrough</s> text, and this is a <small>small</small> text.
</p>

This is a deleted text, this is an inserted text, this is a strikethrough text, and this is a small text.

Summary

In this lesson, we learned how to use paragraphs and formatting tags in HTML to structure the content of a web page. We learned about the <p> tag for creating paragraphs, the <br> tag for line breaks, and the <hr> tag for horizontal lines. We also learned about various formatting tags such as <strong>, <em>, <mark>, <sub>, <sup>, <del>, <ins>, <s>, and <small>.

<!doctype html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to my first HTML page!</h1>
    <p>This is a simple page that contains some text and images.</p>
    <p>
      This is a <strong>strong</strong> text, this is an
      <em>emphasized</em> text, and this is a <mark>marked</mark> text.
    </p>
    <p>
      This is a subscript text: H<sub>2</sub>O, and this is a superscript text:
      E=mc<sup>2</sup>.
    </p>
    <p>
      This is a <del>deleted</del> text, this is an <ins>inserted</ins> text,
      this is a <s>strikethrough</s> text, and this is a
      <small>small</small> text.
    </p>
    <hr />
    <p>
      This is a paragraph of text that contains a line break.<br />
      This is the second line of the paragraph.
    </p>
    <p>
      <center>This text is centered</center>
    </p>
  </body>
</html>

Welcome to my first HTML page!

This is a simple page that contains some text and images.

This is a strong text, this is an emphasized text, and this is a marked text.

This is a subscript text: H₂O, and this is a superscript text: E=mc ².

This is a deleted text, this is an inserted text, this is a strikethrough text, and this is a small text.

---

This is a paragraph of text that contains a line break.

This is the second line of the paragraph.

This text is centered

---

Questions