HTML Text Formatting

    In HTML, we have many special elements that can provide special meaning to text content.

    HTML Formatting Elements

    HTML Elements Description
    <b> Bold the text
    <strong> An alternative for <b>, which tell that this text is essential.
    <i> Italic the text
    <em> Similar to italic but used when we want to emphasize the text.
    <mark> It marks the text with a default "yellow" background colour
    <small> Decrease the text size
    <del> It prints a cross line over the text.
    <ins> Represents the inserted text by putting an underline.
    <sub> This element is used to display the subscript.
    <sup> It can make a text superscript.

    HTML <b> and <strong>

    Both the elements can be used to display a bold text, and you could not tell the difference between two texts when they showed on the browser. In HTML 5 we generally use <strong> rather than <b>. <b> tag just used to bold the text it does not specify any meaning, whereas <strong> is used when we want to specify a meaning about the text.

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

<b>What's your Name? </b>
<br>
<p>My name is <strong>Tom</strong> <p>

</body>
</html>

    Output: 

    What's your Name? 
My name is Tom

    HTML <i> and <em>

    The browser will display both the elements text content in an italic format, but both are used in different cases. If we want to display our content in the italic format, then we use the <i> element. But if we want to emphasize the text that specifies semantic importance, then we use the <em> element; however, you will find no difference when the browser print both elements content. 

    <i> It's TechGeekBuzz</i>
<p>Welcome to <em>TechGeekBuzz</em></p>

    Output 

    It's TechGeekBuzz
Welcome to TechGeekBuzz

    HTML <small>

    To display a small text as compared to the default one, we can use the HTML <small> element. 

    <p><small>Welcome to </small>TechGeekBuzz</p>

    Output 

    Welcome to TechGeekBuzz 

    HTML <mark>

    The <mark> element can mark or highlight a text content by changing its background colour. 

    <p> Welcome to <mark>TechGeekBuzz </mark></p>

    Output 

    Welcome to TechGeekBuzz

    HTML <del>

    <del> element is used to represent a deleted or removed text. It prints a cross line over the text. 

    <p> Welcome to <del>TechGeeeekbuzz</del> TechGeekBuzz</p>

    Output 

    Welcome to TechGeeeekbuzz TechGeekBuzz

    HTML <ins>

    <ins> element is used to represent an inserted or added text. It often uses when we want to represent an answer for fill in the blank. 

    <p>The approx. value of pi is <ins>3.4</ins></p>

    Output 

    The approx. value of pi is 3.4

    HTML <sub>

    <sub> stands for subscript, and using this HTML element we can represent one. 

    <p>The value of log<sub>10</sub> 100 is: 1</p>

    Output 

    The value of log10 100 is: 1

    HTML <sup>

    <sup> is just opposite of <sub> and it is used to represent superscript text. 

    <p>The value of 2<sup>3</sup> is: 8</p>

    Output 

    The value of 23 is: 8

    Summary

    • In HTML, we have various elements for text formatting.
    • <strong> can work as <b>, but <strong> provide meaning to the text whereas <b> does not.
    • <em> change the text format and provide a meaning to the text whereas <i> only change the text format.
    • <small> element reduce the text size by default one.
    • <mark> highlight the text.
    • <sub> and <sup> are used for subscript and superscript text.
    Previous Tutorial Next Tutorial