Language
HTML Tutorial
HTML Elements
HTML Attributes
HTML Image
HTML Style
HTML Tables
HTML Layout
HTML Forms

HTML Formatting


HTML provides some text formatting. This formatting helps to change the design of the text. Formatting can be used to change the size, structure, and bold of the text.

HTML Formatting

HTML Formatting List

  •    <b> - Bold
  •    <strong> - Important
  •    <i> - Italic
  •    <small> - Smaller
  •    <del> - Deleted
  •    <ins> - Inserted
  •    <sub> - Subscript
  •    <sup> - Superscript



HTML <b> Elements

The <b> tag is used to make the text bold.

Bold Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <b>ipsum dolor sit</b> amet.</p>
</body>
</html>
Try it Yourself

HTML <strong> Elements

The < strong > tag defines the text with great importance, and the inner content is usually displayed in bold color.

HTML strong Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <strong>ipsum dolor sit</strong> amet.</p>
</body>
</html>
Try it Yourself

HTML <i> Elements

The < i > tag displays the text diagonally.

HTML Italic

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <i>ipsum dolor sit</i> amet.</p>
</body>
</html>
Try it Yourself

HTML <small> Element

The <small> tag changes the text to a smaller size.

HTML small Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <small>ipsum dolor sit</small> amet.</p>
</body>
</html>
Try it Yourself

HTML <del> Element

The < del > tag indicates that the text has been deleted.

HTML Deleted Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <del>ipsum dolor sit</del> amet.</p>
</body>
</html>
Try it Yourself

HTML <ins> Element

The < ins > tag underlines the text.

HTML Inserted Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <ins>ipsum dolor sit</ins> amet.</p>
</body>
</html>
Try it Yourself

HTML <sub> Element

The < sub > tag displays the text in the lower half of the normal line.

HTML Subscript Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <sub>ipsum dolor sit</sub> amet.</p>
</body>
</html>
Try it Yourself

HTML <sup> Element

The < sup > tag displays the text in the upper half of the normal line.

HTML Superscript Image

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Lorem <sup>ipsum dolor sit</sup> amet.</p>
</body>
</html>
Try it Yourself