HTML

What is Text Formatting in HTML? - Basics

Mohd Sohail

Mohd Sohail

— 3 min read
Text Formatting in HTML Featured Image

Today’s topic is Text Formatting in HTML. Welcome to the second article in TheITStuff’s HTML tutorial series. We have covered the basics and structure of HTML in the previous article, if you haven’t read it, you can read it here.

Text-Formatting-in-HTML

Text Formatting in HTML

In this article, we will look at the various types of texts and formatting that can be used with HTML. HTML is very rich in text formatting and you can create some really beautiful texts.

Headings

making headings in html heading tag
how companies create mailing list

True to their names, headings in HTML are used to create headings for different sections. There are a total of 6 heading tags they are h1,h2,h3,h4,h5,h6. To understand what they do, just copy the following code in your html file and refresh your browser page.


<html>
<head></head>
<body>
<h6>I am Heading 6</h6>
<h5>I am Heading 5</h5>
<h4>I am Heading 4</h4>
<h3>I am Heading 3</h3>
<h2>I am Heading 2</h2>
<h1>I am Heading 1</h1>
</body>
</html>


You should see an output similar to this. Heading 6 <h6> is the smallest and Heading 1 <h1> is the largest in size. You already know about the paragraph tag so let us see some text-formatting we can do to texts.


Here is a snap from my screen with various types of formatting. So there are many things in here and here is the code for the same.


<html>
<head></head>
<body>
<p>
A lot of <b>commercial</b> organizations use <i>Web Crawlers</i> to specifically<sub>2</sub> search <br> for email addresses<sup>2</sup> and phone numbers of people so that they can later<br> send them promotional offers and other schemes. This is <del>basically</del> <ins>spam</ins>, but that is how <br> <hr>most companies <mark>create</mark> their<i> mailing list<i>.
</p>
</body>
</html>


Let us go through each tag one by one.

  • <b> – This is the bold tag which is used to make a text bold.
  • <i> – This is the Italic tag that can make a text italic.
  • <sub> – The subscript tag is used to make a text appear as a subscript.
  • <sup> – The subscript tag is used to make a text appear as a superscript.
  • <ins> – The insert tag is used to show that a text has been inserted in that space.
  • <mark> – The Mark tag is used to show that a text has been marked or highlighted.

Now there are two more tags in this example, the <br> and <hr> tag.
These tags are a little special as they are empty tags. I had told you earlier, that we need to close all HTML tags. That rule doesn’t apply here. Empty tags are tags that don’t need to be closed. There are quite a few of them and we will see more such tags in the coming articles.

  • <br> – The <br> tag breaks the current line. Moves the pointer to the next line.
  • <hr> – The <hr> tag inserts a horizontal line.

Conclusion

HTML offers many text formatting options. Headings in HTML are from 1-6, h1 is the biggest in size while h6 is the smallest. There are a lot of tags like <b>, <i>, <sub>, <sup>, <ins>, <mark> tags. HTML also has empty tags which do not need to be closed. <hr> and <br> tags are empty tags used in text formatting in HTML.


I hope you get the basic idea of how formatting works in HTML.  If you ever need help just drop a comment below.

Read more