HTML Text Formatting

Html text formatting represents the appearance or layout of a text.

HTML Text Formatting Elements

Each formatting element will display text in its own kind of way.

Here are lists of formatting elements in HTML:

<b> represents a bold text
<i> represents an italicized text.
<em> represents an empahzised text.
<strong> represents an important text.
<mark> represents an highlighted text.
<del> represents a deleted text.
<small> represents a smaller text than the normal.
<big> represents a large text.
<sub> represents a subscript.
<sup> represents a superscript
<u> represents an underlined text.
<strike> represents strikethrough a text.
<ins> represents an inserted text attached to contents.

HTML <b> Element

<b> tells the web browser that the text should be in bold without any importance to it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tutorial</title>
</head>
<body>
   <h1>HTML Text Formatting</h1>
   <p><b>This is a bold text with no importance.</b></p> 
</body>
</html>

HTML <em> Element

<em> tells the web browser that the text is an emphasized text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p><em>This is an emphasized text.</em></p>
</body>
</html>

HTML <strong> Element

<strong> tells the web browser that the text is really important.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
  <p><strong>This text is really important.</strong></p>  
</body>
</html>

HTML <mark> Element

<mark> tells the web browser to highlight the text to draw attention to it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>Don't forget to read on <mark>CSS.</mark></p>
</body>
</html>

HTML <del> Element

<del> tells the web browser that the text or content has been deleted. The web browser deletes the text by striking a line through the deleted text or content.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p><del>Delete this text, I don't need it.</del></p>
</body>
</html>

HTML <small> Element

<small> indicates a smaller text from the default font size of 16px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>This is a normal text of default font size of  16px
           </p>
   <p><small>The text here will be small</small></p>
</body>
</html>

HTML <big> Element

<big> represents a bigger text from the default font size.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <p>This is random text in the default font size.</p>
   <p><big>This is a bigger random text.</big></p>
</body>
</html>

HTML <sub> Element

<sub> means a subscripted text. It is a text or character written in half the size of a character in a document. It can also be used in chemical equations.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    <p>Water can be written as H<sub>2</sub>O.</p>
</body>
</html>

HTML <sup> Element

<sup> means a superscripted text. It is a text or character written above another text or character in a document. It can be used in mathematical equations or footnotes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <p>In physics, E=mc<sup>2</sup></p> 
</body>
</html>

HTML <u> Element

<u> means underline. It tells the web browser to underline the specified text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
   <p>Find the synonym of the underlined word in the sentence</p>
<pThis is a <u>large</u> piece of cake.</p>
</body>
</html>

HTML <strike> Element

<strike> means to strikethrough a text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
  <p>Only <strike>CSS</strike> has a strike through it in this sentence.</p>  
</body>
</html>

HTML <ins> Element

<ins> represents insert. When a text is inserted into a document, the browser underlines it to show that it's an inserted text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
<p>I don't like <ins>Robots.</ins></p>    
</body>
</html>