HTML Formatting

❮ Prev Next ❯

HTML formatting tags are used to change the appearance of text or other elements on a web page.

HTML Formatting Elements

Here are some of the most commonly used formatting tags in HTML:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Supscript text

HTML <b> and <strong> Elements

The <b> and </b> tag is used to make text bold. It's often used to highlight important words or phrases. Anything placed between these two tags will appear in bold on the web page. However, the use of this tag is not recommended for the sole purpose of making text stand out. It's better to use it for highlighting important words or phrases.

The <strong> and </strong> tag is used to make text bold and give it more importance. It's often used to highlight important words or phrases. Anything placed between these two tags will appear in bold on the web page. This tag is more semantic than the <b> tag, as it indicates that the text is important for a specific reason, such as emphasis or importance.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p><b>This text will be bold</b></p>
        <p><strong>This text will be strong</strong></p>
      </body>
  </html>

HTML <i> and <em> Elements

The <i> and </i> tag is used to make text italic. It's often used to indicate a change in the tone or emphasis of the text. Anything placed between these two tags will appear in italic on the web page. However, this tag should be used sparingly, as it can make the text harder to read if overused.

The <em> and </em> tag is used to add emphasis to text. It's often used to indicate a change in the tone or emphasis of the text. Anything placed between these two tags will appear in italic on the web page. This tag is more semantic than the <i> tag, as it indicates that the text is being emphasized for a specific reason, such as importance or stress.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p><i>This text will be Italic</i></p>
        <p><em>This text will have Emphasis</em></p>
      </body>
  </html>

HTML <small> Element

The <small> and </small> ttag is used to make text smaller. It's often used to indicate fine print or smaller text that is not as important as the main text. Anything placed between these two tags will appear smaller on the web page. This tag should be used sparingly, as it can make the text harder to read if overused.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p><small>This text will be smaller</small></p>
      </body>
  </html>

HTML <u> Element

The <u> and </u> tag is used to underline text. It's often used to indicate a hyperlink or to emphasize a specific word or phrase. Anything placed between these two tags will appear underlined on the web page. However, the use of this tag is not recommended, as it can be mistaken for a hyperlink and can also make the text harder to read.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p><u>This text will be underlined</u></p>
      </body>
  </html>

HTML <mark> Element

The <mark> and </mark> tag is used to highlight text. It's often used to indicate a specific word or phrase that is important or needs to be emphasized. Anything placed between these two tags will appear highlighted on the web page. This tag should be used sparingly, as it can make the text harder to read if overused.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p><mark>This text will be highlighted</mark></p>
      </body>
  </html>

HTML <del> and <ins> Element

The <del> and </del> tag is used to indicate text that has been deleted or removed from a document. It's often used in conjunction with the <ins> tag, which indicates text that has been inserted into a document.

The <ins> and </ins> tag is used to indicate text that has been inserted or added to a document. It's often used in conjunction with the <del> tag, which indicates text that has been deleted from a document.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p>The <del>old</del> <ins>new</ins> version of the document is available for download.</p>
      </body>
  </html>

The <ins> tag is typically rendered by the browser as underlined text, but this can be customized using CSS.

By using the <ins> tag, you can clearly indicate to your readers what changes have been made to a document, such as in a document version history or in a collaborative editing environment.

HTML <sub> and <sup> Element

The <sub> and </sub> tag is used to indicate subscript text, which is text that appears slightly below the baseline of the rest of the text. It's often used to represent chemical formulas, mathematical equations, or footnotes.

The <sup> and </sup> tag is used to indicate superscript text, which is text that appears slightly above the baseline of the rest of the text. It's often used to represent mathematical exponents or footnotes.

Example 

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>This is a normal text</p>
        <p>H<sub>2</sub>O is the chemical formula for water.</p>
        <p>The area of a circle is given by the formula A = πr<sup>2</sup>.</p>
      </body>
  </html>

Now that you have learn valuable topic on how to make you page more accessible, lets see Quotations in the next chapter.

❮ Prev Next ❯