HTML Tags for Text Formatting

In HTML, some tags are used to format text. The formatting tags are divided into two categories: the physical tags, used for text styling (visual appearance of the text) and logical or semantic tags, used to add semantic value to the parts of the text (for example, let the search engines know what keywords should be web page ranked for).

Let’s dive deeper and talk about formatting tags in details.

The <h1>-<h6> Tags

The <h1>-<h6> tags are used to define HTML headings. There are 6 levels of headings in HTML; the <h1> defines the most and the <h6> least important headings.

Example of the HTML <h1>-<h6> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

The <b> and <strong> Tags

The <b> tag is a physical tag that stands for bold text, whereas the <strong> tag being a logical tag is used to emphasize the importance of the text.

Example of the HTML <b> and <strong> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>We use the &lt;strong&gt; tag to highlight the importance <strong> of this part of the text</strong>.</p>
  </body>
</html>

Result

The <i> and <em> Tags

The <i> and <em> tags define italic text. The <i> tag is only responsible for visual appearance of the enclosed text, without any extra importance. The <em> tag defines emphasized text, with added semantic importance.

Example of the HTML <i> and <em> tags:

<!DOCTYPE html>
<html>
  <body>
    <p>This is a paragraph</p>
    <p>The important part of the text is defined <em> in italic</em>.</p>
  </body>
</html>

The <pre> Tag

The <pre> tag is used to define preformatted text. The browsers render the enclosed text with white spaces and line breaks.

Example of the HTML <pre> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>Spaces
               and line breaks
               within this element 
        are shown as typed.           
    </pre>
  </body>
</html>

The <mark> Tag

The <mark> tag is used to present a part of text in one document as marked or highlighted for reference purposes.

Example of the HTML <mark> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Learn the HyperText Markup Language on <mark>W3Docs.com</mark>.</p>
  </body>
</html>

Result

The <small> Tag

The <small> tag decreases the text font size by one size smaller than a document's base font size (from medium to small, or from x-large to large). The tag usually contains the items of secondary importance such as copyright notices, side comments, or legal notices.

Example of the HTML <small> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Usage of the SMALL tag</title>
  </head>
  <body>
    <p>The interest rate is only 10%*</p>
    <small>*  per day</small> /
  </body>
</html>

The <del> and <s> Tags

The <del> tag specifies a part of the text that was deleted from the document. Browsers display this text as a strikethrough.

Example of the HTML <del> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
     <p> She likes <del>violets</del> snowdrops․</p>
  </body>
</html>

The <s> tag defines text that is no longer correct, or relevant.

Example of the HTML <s> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><s>I am studying in high school.</s></p>
    <p>I am studying in a university.</p>
  </body>
</html>

The content of both tags is displayed as strikethrough. However, despite the visual similarity, these tags cannot replace each other.

The <ins> and <u> Tags

The <ins> tag defines the text that has been inserted (added) to the document. The content of the tag is displayed as underlined.

Example of the HTML <ins> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>She likes <del>violets</del> <ins>snowdrops</ins></p>
  </body>
</html>

Result

The <u> tag specifies text that is stylistically different from normal text, i.e. words or fragments of text that need to be presented differently. This could be misspelled words or proper nouns in Chinese.

Example of the HTML <u> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Here we used <u>the &lt;u&gt; tag</u>.</p>
  </body>
</html>

The <sub> and <sup>

The <sub> defines subscript texts. Subscript text is under the baseline of other symbols of the line and has smaller font. The <sup> tag defines superscript, that is set slightly above the normal line of type and is relatively smaller than the rest of the text. The baseline passes through upper or lower edge of the symbols.

Example of the HTML <sub> and <sup> tags:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The formula of water is H<sub>2</sub>O,  and the formula of alcohol is C<sub>2</sub>H<sub>5</sub>ОН </p>
    <p>E = mc<sup>2</sup>, where E — kinetic energy, m — mass, c — the speed of light. </p>
  </body>
</html>

Result

The <dfn> Tag

The <dfn> tag is used to define the term, that is mentioned for the first time. The content of the tag is displayed in italic.

Example of the HTML <dfn> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><dfn>HTML</dfn> (HyperText Markup Language ) — The standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the language HTML</p>
  </body>
</html>

The <p>, <br> and <hr> Tags

The <p> tag defines the paragraph. Browsers automatically add 1em margin before and after each paragraph.

Example of the HTML <p> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The first paragraph</p>
    <p>The second paragraph</p>
  </body>
</html>

The <br> tag inserts a single line break. Unlike the <p> tag an empty indent is not added before the line.

Example of the HTML <br> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <h1>How to use the &lt;br&gt; tag</h1>
    <p> We can insert the &lt;br /&gt; tag inside the paragraph, <br /> to transfer a part of the text to another line if necessary.</p>
  </body>
</html>

In HTML5 the <hr> tag defines a thematic change between paragraph level elements in an HTML page. In previous versions of HTML it was used to draw a horizontal line on the page visually separating the content. In HTML5 the element has semantic meaning.

Example of the HTML <hr> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Football</h1>
    <p>Team sports that involve, to varying degrees, kicking a ball with a foot to score a goal.</p>
    <hr>
    <h1>Basketball</h1>
    <p>A game played between two teams of five players in which goals are scored by throwing a ball through a netted hoop fixed at each end of the court.</p>
  </body>
</html>



Do you find this helpful?

Related articles