What is HTML Text Formatting (2023)

HTML text formatting refers to the various ways you can style and structure text within an HTML document. With HTML text formatting, you can control how text appears on a web page by applying different tags or elements that specify the desired presentation.

Some common HTML text formatting options include:

Headings: HTML provides six levels of headings, which represent the most significant heading and the least significant. Headings are used to create titles and subtitles for different page sections.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Paragraphs: To create paragraphs of text, you use the “<p>” tag. It adds vertical spacing between blocks of text, making the content more readable and organized.

<p>This is eaxample of paragraph</p>
HTML

This is eaxample of paragraph

Bold and Italics: To emphasize text, you can use the “<strong>” or “<b>” tag for bold and the “<em>” or “< i >” tag for italics.

<p> I am <b>Bold</b></p>
<p> I am <strong>Strong</strong></p>
<p> I am <i>italics</i> </p>
HTML

Output:

I am Bold

I am Strong

I am italics

I am italics

Underline and Strikethrough: Underline text using the tag “<u>” and apply a strikethrough effect using the or “<s>” tag.

<p>This is an <u>underlined</u> text.</p>
<p>This is a <s>strikethrough</s> text.</p>
HTML

Output:

This is an underlined text.

This is a strikethrough text.

Superscript and Subscript: The “<sup>” tag is used for superscript, which raises the text above the baseline, while the “<sub>” tag is used for subscript, which lowers the text below the baseline.

<p>This is a number raised to the power of <sup>2</sup>.</p>
<p>H<sub>2</sub>O is the chemical formula for water.</p>
HTML

Output:

This is a number raised to the power of 2.

H2O is the chemical formula for water.

Line Breaks: To insert line breaks, you can use the “<br>” tag. It creates a new line within a block of text.

<p>Welcome to Technalay </p>
<p>Welcome to <br> Technalay </p>
HTML

Welcome to Technalay

Welcome to
Technalay

Preformatted Text: To display text in a fixed-width font and preserve whitespace formatting, you can use the “<pre>” tag.

<pre>
    This is an example of preformatted text in HTML.
    
    It preserves all the spaces, line breaks,
    and indentation exactly as they are typed.
    
    <html>
        <head>
            <title>Preformatted Text Example</title>
        </head>
        <body>
            <h1>Hello, World!</h1>
            <p>This is a paragraph of text.</p>
        </body>
    </html>
</pre>
HTML
    This is an example of preformatted text in HTML.
    
    It preserves all the spaces, line breaks,
    and indentation exactly as they are typed.
    
    
        
            Preformatted Text Example
        
        
            

Hello, World!

This is a paragraph of text.

Blockquote: The “<blockquote>” tag is used to indicate quoted text, visually setting it apart from the regular content.

<p>Albert Einstein once said:</p>
<blockquote>
    "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe."
</blockquote>
HTML

Albert Einstein once said:

“Two things are infinite: the universe and human stupidity; and I’m not sure about the universe.”

Ordered and Unordered Lists: With the “<ol>”tag, you can create ordered lists, You can create unordered (bullet) lists with the “<ul>” tag. The list items are denoted by the “<li>” tag.

<p>Orderd list</p>
<ol>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Grapes</li>
</ol>
<p>Unorderd list</p>
<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
  <li>Yellow</li>
</ul>
HTML

Orderd list

  1. Apples
  2. Bananas
  3. Oranges
  4. Grapes

Unorderd list

  • Red
  • Green
  • Blue
  • Yellow

Read in Hindi: HTML Formatting in Hindi

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *