HTML Tags for Text Formatting

In HTML, there are tags that 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

<!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>

Result

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

<!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> tag 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

<!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>

Result

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

<!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>

Result

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

<!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

<!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>

Result

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

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

Result

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

Example

<!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>

Result

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

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

<!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

<!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>

Result

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

<!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

<!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>

Result

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

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

Example

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

Result

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

Example

<!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>

Result

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

<!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>

Result