HTML Formatting – Learn Text Formatting in HTML

HTML Formatting basically refers to the enhancing of text in order to increase the visual appeal. HTML provides a range of formatting tags that can be used to make the text attractive to the users. There are many options available that can be used for formatting, just like any other text editor.

HTML Formatting tags

Keeping you updated with latest technology trends, Join DataFlair on Telegram

HTML Formatting Tags

There are two types of HTML tags:

  • Physical tags- These tags provide a visual appeal to the document. For example, bold, italic, underlined, etc.
  • Logical tags- These tags provide a logical meaning to the text. For example, the <strong> tag.

Formatting Text in HTML

Now, we shall discuss some of the major formatting text in HTML.

1. HTML Headings

HTML headings range from 1 to 6. The heading defined within <h1> is the more important i.e. larger font-size and font-weight whereas <h6> is the least important i.e. least font-size. These headings can be judiciously used to format the text.

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

Output:

html heading tag

2. HTML Bold text

This is defined by the <b> tag. This is a physical tag which is used to display the text in Bold. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><b>Welcome to DataFlair!</b></p>
</body>    
</html>

Output:

html strong tag

3. HTML Strong Element

It displays the content in a manner such that it appears as important.

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><strong>Welcome to DataFlair!</strong></p>
</body>    
</html>

Output:

html bold tag

4. HTML Underlining the text

In HTML, the text can be underlined using the <u> element, in order to emphasize on its importance. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p>Welcome to DataFlair!</p>
<p><u>Welcome to DataFlair!</u></p>
</body>    
</html>

Output:

html underline text

5. HTML Highlight

In HTML, the <mark> element is used to highlight the text. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><mark>Welcome to DataFlair!</mark></p>
</body>    
</html>

Output:

HTML Highlight

6. HTML Small text

This element is used to define small texts which can be used to add comments,notes,copyright,etc. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><small>Welcome to DataFlair!</small></p>
</body>    
</html>

Output:

HTML text font

7. HTML Superscript and Subscript

  • <sup>- It displays the content in superscript.
  • <sub>- It displays the content in subscript.

For example:

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><small>Welcome to DataFlair!<sup>E-learning!</sup></small></p>
<p><small>Welcome to DataFlair!<sub>E-learning!</sub></small></p>
</body>    
</html>

Output:

HTML Formatting

8. HTML Italicize and Emphasize

The <i> element is used to display the text it contains in italics.
The <em> element displays the text in italics along with semantic importance i.e. it emphasizes the text. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p><i>Welcome to DataFlair!</i></p>
<p><em>Welcome to DataFlair!</em></p>
</body>    
</html>

Output:

 

HTML Italisize

9. HTML Striking through and Inserting

In HTML, the <del> element is used to display a deleted text on the web-page, done by striking through the text, and the <ins> element is used to display the inserted text, shown underlined. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head> 
<body>
<p>Welcome to DataFlair!</p>
<p><del>Welcome to DataFlair!</del></p>
<p><ins>Welcome to DataFlair!</ins></p>
</body>    
</html>

Output:

HTML Striking

10. HTML Preformatted text

The <pre> tag of HTML allows the developers to display the text in the same format i.e. spaces,tabs,line breaks,etc, as written in the code.For example,

<html> 
<head> 
<title>DataFlair</title> 
</head> 
<body> 
<pre>
DataFlair
Learn Today.Lead Tomorrow.
</pre> 

Output:

html preformatted text

11. HTML Definition tag

As from the name itself, the definition tag is for defining a term that appears for the first time. Its contents are displayed in italics. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head>
<body>
<p><dfn>DataFlair</dfn><br>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.
DataFlair team comprises of trainers who are experts in their relevant technologies and are selected after many rounds of interviews, content team that continuously works hard to provide quality content to the readers, Marketing team that work hand in hand with other teams to make the content reaches the right audience and HR team that work to extend the team and to provide a healthy work environment.</p>
</body>
</html>

Output:

HTML tags

12. HTML Grouping content

The <div> and <span> elements are used to group similar content together and create sections or subsections.
The <span> element groups inline elements only. For example,

<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
</head>    
<body>
<div id = "menu" align = "middle" >
<a href = "#">HOME</a> | 
<a href = "#">CONTACT</a> | 
<a href = "#">ABOUT</a>
</div>
<p>This is the example of <span>span tag</span>
</p>
</body>   
</html>

Output:

HTML Grouping

Summary

In this article, we’ve looked at the major HTML formatting elements and some content-grouping elements. There’s a clear understanding of the elements such as <h>, <b>, <strong>, <small>, <pre>, <i>, <em>, <sub>, <sup>, <ins>, <dfn>, <del>, <div> and <span>. The <div> and <span> elements will be discussed in detail in the following articles.

Hope you like the article!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.