Learning Basic HTML: Text and Paragraph Formats In HTML

You’ll frequently find many text format in HTML writing, either in the title writing or the content of a website page. Here are some explanations and examples of text formatting In HTML.

Text Formats In HTML

There are several text formats in HTML that are frequently used, such as;

Bold Text in HTML

To bold a text on a web page view, you can use the following <b> tag. The following HTML syntax is the example of how to create a bold text format on a web page:

<b> this is a bold text </b>

Italic Text in HTML

To make an italic text in HTML, you can use <i> tag. For example: <i> this is an italic text </i>

Underlined Text in HTML

To make an underline under a text on a web page, you can use <u> HTML tag.
For example : <u> this is an underlined text </u>

The following table is the text formats that are often used in HTML.

HTML tagDescription
<b>bold text format
<i>italic format
<u>underlined text format
<small>small text format
<strong>text format similar to bold format
<sub>sub-scripted text format
<sup>super-scripted text format
<ins>underlined text format
<del>a text format with a line in the middle
<mark>colorful text format

Here’s an example of writing tags/text format elements in which have been studied above:

<!DOCTYPE html>
<html>
<head>
      <title>Learn how to make a text format in HTML</title>
</bead>
<body>
      <b> this is a bold text format</b> <br/>
      <i> this is an italic text format </i> <br/>
      <u> this is an underlined text format </u> <br/>
      <em> this is an em text format</em> <br/>
      <small> this is a small text format </small> <br/>
      <strong> this is a strong text format</strong> <br/>
      <sub> this is a sub text format</sub> <br/>
      <sup> this is a sup text format </sup> <br/>
      <ins> this is an ins format text</ins> <br/>
      <del> this is a del text format</del> <br/>
      <mark> this is a text mark </mark>
</body>
</html>

Here are the browser view text format elements above:

Paragraph Format in HTML

To create a paragraph in HTML, use the <p> tag, firstly you have to have understood how to write tags, elements, and attributes in HTML. The paragraph HTML tag is the form to make paragraph view on a web page. There are three paragraph attributes that can be combined directly with paragraph tags (<p> and </p>), such as:

Learn the following HTML paragraph format example:

An HTML paragraph format uses <p>. Below is the implementation of <p> in an HTML document:

<!DOCTYPE html>
<html>
<head>
      <title>learn how to create a paragraph in HTML</title>
</head>
<body>
      <p>this is the first paragraph in an HTML document </p>
      <p>this is the second paragraph in an HTML document </p>
</body>
</html>

From the example above, you can see that the writing of the first and the second paragraphs re separated. To separate between the first and the second paragraphs is using the <p> tag.

Read also: How to write heading tags in HTML

Types of Paragraph in HTML

Here are some examples of paragraph types in HTML.

Left Paragraph

<p align = “left”> 1. This is a left-side paragraph writing in the HTML document </p>

Right Paragraph

<p align = “right”> 2. This is a right-side paragraph writing in the HTML document </p>

Centered Paragraph

<p align = “center”> 3. This is the a centered paragraph writing in the HTML document </p>

Justified Paragraph

<p align = “justify”> 4. This is a justified paragraph writing in the HTML document </ p>

Here’s a complete example of writing all of HTML paragraph types in an HTML document or web page.

<!DOCTYPE html>
<html>
<head>
      <title>Learn how to make a paragraph in HTML document</title>
</head>
<body>
      <p align = "left"> 1. This is a left-side paragraph writing in the HTML document </p>
      <p align = "right"> 2. This is a right-side paragraph writing in the HTML document </p>
      <p align = "center"> 3. This is the a centered paragraph writing in the HTML document </p>
      <p align = "justify"> 4. This is a justified paragraph writing in the HTML document </ p>
</body>
</html>

Web Design Tips

  1. Make sure you have no problem with your HTML structure on your web content. Make your web document HTML structure SEO friendly (indexable content).
  2. Use online tools such as Google’s cache, MozBar, or SEO-browser.com to find out what elements of your content are indexable to the search engine.
  3. After checking using those tools, you may find that your web page is not even showing a particular part of your HTML text on those tools. For most marketers, this is a big problem as their content is not visible on search engines.
  4. If you someday in the future become a professional web designer, you will find that most of your clients must primarily concern on SEO in their web design requirements. So, learn from now on Onpage SEO skill and how you should create a website for them and what people are really most need in their web design. If they really matter on SEO, then, using an SEO-friendly HTML structure is mandatory.
Learning Basic HTML: Text and Paragraph Formats In HTML was last modified: August 5th, 2017 by