In HTML, a number of elements are used to format text. The formatting tags are divided into two groups: physical tags, that are used to style the text (visual appearance of the text) and logical or semantic tags that add semantic value to the text parts (e. g., inform search engines for which keywords a web page should be ranked).
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>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 of the HTML <b> and <strong> tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>We use the <strong> tag to highlight the importance <strong> of this part of the text</strong>.</p>
<p>The <b> tag is a physical tag that stands for <b>bold text</b>.</p>
</body>
</html>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>
<p><i>Lorem ipsum</i>, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. </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 <u> 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 <br> tag</h1>
<p> We can insert the <br /> 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>A team sport involving kicking a ball to score a goal. </p>
<hr>
<h1>Basketball</h1>
<p>A game that is played between two teams of five players.</p>
</body>
</html>Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.