Text Formatting in HTML: An Introduction to Formatting Tags

HTML provides several tags for formatting text, such as bold, italic, underline, and more. These tags can be used to apply formatting to text in order to make it stand out or to indicate different types of content.

<p> <strong> <em> <u> <sup>
<sub> <mark> <del> <ins> <small>
<br> <hr> <blockquote> <q> <pre>
<code> <samp> <kbd> <var>

Some common text formatting tags in HTML include:

  • <p>: Defines a paragraph.
  • <b> and <strong> : These tags make the text bold. The <b> tag is used to indicate that the text is important, while the <strong> tag is used to indicate that the text has strong importance.
  • <i> and <em> : These tags make the text italic. The <i> tag is used to indicate that the text is in an alternate voice or tone, while the <em> tag is used to indicate that the text should be emphasized.
  • <u> : This tag underlines the text.
  • <s> and <strike> : These tags create a line through the text. The <s> tag is used to indicate that the text is no longer accurate or relevant, while the <strike> tag is used to indicate that the text is no longer relevant.
  • <mark> : This tag highlights the text with a yellow background.
  • <sub> and <sup> : These tags create subscript and superscript text respectively.
  • <big> and <small> : These tags increase or decrease the size of the text.
  • <del>: Defines deleted text and strikes it through.
  • <ins>: Defines inserted text and underlines it.
  • <br>: Inserts a line break.
  • <hr>: Inserts a horizontal rule.
  • <blockquote>: Defines a long quotation.
  • <q>: Defines a short quotation.
  • <pre>: Defines preformatted text.
  • <code>: Defines computer code text.
  • <samp>: Defines sample output from a computer program.
  • <kbd>: Defines keyboard input text.
  • <var>: Defines a variable or placeholder.

It is important to keep in mind that these tags have semantic meaning, and it's good practice to use them accordingly. Also, it is better to use CSS to style text, instead of using these tags, as using CSS allows you to have more control over the appearance of text and make it more consistent throughout the website.

This is an example of HTML code that creates a webpage with various text formatting tags.

Source Code

<!DOCTYPE html>
<html>
    <head>
        <title> HTML | Tutor Joes</title>
    </head>
    <body>
        <h1>Text Formatting Tags</h1>
        <hr/>
        <h1>HTML - <i>Hyper</i> <u>Text Markup</u> Language</h1>
        <h2>HTML - Hyper <u>T</u>ext Markup Language</h2>
        <u><h3>HTML - Hyper Text Markup Language</h3></u>
        <h4>HTML -<i> Hyper</i> Text Markup Language</h4>
        <h5>HTML - Hyper Text Markup Language</h5>
        <h6>HTML - Hyper Text Markup Language</h6>
        
        <b>ghfjhk</b><br><br>
        <strong>kjhkjh</strong><br><br>
        <s>kjklxcvxcmb.vcnbm;vlcj</s><br><br>
        <strike>kjklxcvxcmb.vcnbm;vlcj</strike><br><br>
        
        <h1>Tutor Joes <sub><small>Learn More Be Smart</small> </sub> </h1>
        <h1>Tutor Joes <sub>Learn More Be Smart </sub> Computer Education</h1>
        <h1>Tutor Joes <sup><small>Learn More Be Smart</small> </sup> </h1>
        
        <h1>H<sub>2</sub>O</h1>
        <h1>H<sup>2</sup>O</h1>
        <p>ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <em>Learn More Be Smart</em>
        <h1>Tutor Joes <mark>Software</mark> Solution</h1>
        
        <big>Learn More Be Smart</big><br><br>
        <small>Learn More Be Smart</small><br><br>
        
        <p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these<del> galleries to insert tables, headers, </del>footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.<ins>You can easily change </ins>the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery</p>
        
        <p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
        <blockquote>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</blockquote>
        On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
        
        <h1><q>Tutor Joes Software Solution</q></h1>
        <pre>Tutor Joes
            Computer Education
        </pre>
        <code><h1>Tutor Joes Computer Education</h1></code>
        <samp><h1>Output : <br>Enter Text : Tutor Joes</h1></samp>
        <kbd> Test Line </kbd>
        
    </body>
</html>
To download raw file Click Here

It's good to note that some of these tags have been deprecated like <b> and <i> it's better to use CSS to style text, instead of using these tags.

HTML Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions