HTML Formatting


December 31, 2021, Learn eTutorial
1109

In this HTML tutorial, you will learn all about text formatting in HTML. We will also discuss the most commonly used text formatting tags in HTML.

What is meant by text formatting?

HTML Formatting is the process of formatting text to improve its appearance and feel. HTML allows us to format text without requiring CSS. HTML has a variety of formatting tags. Text can be bolded, italicized, or underlined with these tags. There are a lot of possibilities for how the text looks in HTML and XHTML.

  • Bold Text :The <b> and <strong> tags in HTML are formatting elements. By default, both the <strong> and <b> tags render the contained text in a bold typeface, but the <strong> tag implies that its contents are of high importance, meanwhile the <b> tag just draws the reader's attention without imparting any special significance.
  • Italic Text :The <i> and <em> tags in HTML are formatting elements. Similar to the <em> tag, the <i> tag also renders the enclosed text in the italic form, but the <em> tag indicates that its components have a greater emphasis than the surrounding text, whereas the <i> tag is used for marking up text that stands out from the normal text, such as a technical term, an idiomatic phrase from another language, a thought, etc.
  • Marked formatting: In order to highlight or mark a text, you should write the content within <mark>.
  • Underlined Text: The <u> tag is used to show the enclosed content with an underline.
  • Strike Text: Anything written enclosed in the <strike> tag is displayed with a strikethrough. It is a fine line that crosses the content.
  • Monospaced Font: If you want each letter to be the same width, write the content enclosed within the <tt> element. Because different letters have different widths, most fonts are known as variable-width fonts. (For instance, 'w' is wider than I Monospaced fonts have the same amount of space between each letter.
  • Superscript Text: If you put the content enclosed within the <sup> element, it will be displayed in superscript, which means it will be half a character's height above the other characters.
  • Subscript Text: If you put the content enclosed within the <sub> element, it will be displayed in subscript, which means it will be half a character's height below the other characters.
  • Deleted Text: Anything enclosed within the <del> tag is shown as deleted content. It will have a strike over through the content.
  • Inserted Text: Anything enclosed within the <ins> tag is shown as inserted content. In most cases, browsers will underline entered text.
  • Larger Text: If you want your font size to be larger than the rest of the text, but it enclosed within <big> tag. It makes the typeface one size larger than the preceding one.
  • Smaller Text: If you want your font size to be larger than the rest of the text, but it is enclosed within <small> tag. It makes the typeface one size larger than the preceding one.

Example for HTML text formatting


<!DOCTYPE html>
<html>
<head>
    <title>Text Formatting</title>
</head>
<body>
   <p> this is the <b>b tag</b> </p>
   <p> this is the <strong>strong tag</strong> </p>
   <p> this is the <i>i tag</i> </p>
   <p> this is the <em>em tag</em> </p>
   <p> this is the <mark>mark tag</mark> </p>
   <p> this is the <u>u tag</u> </p>
   <p> this is the <strike>strike tag</strike> </p>
   <p> this is the <tt>tt tag</tt> </p>
   <p> this is the <sup>sup tag</sup> </p>
   <p> this is the <sub>sub tag</sub> </p>
   <p> this is the <del>del tag</del> </p>
   <p> this is the <ins>ins tag</ins> </p>
   <p> this is the <big>big tag</big> </p>
   <p> this is the <small>small tag</small> </p>
</body>
</html>
 
HTML - Text Formatting