Text Formatting Tags

Text formatting tags are used to style text within paragraphs and provide meaning to text on your webpage. Here are some commonly used text formatting tags:


<b> and <strong>

The HTML <b> element defines bold text, without any extra importance.


<p>This text is <b>bold</b> </p>

The <strong> tag is used to define text that is of strong importance. By default, text within this tag will be rendered as bold.


<p>This is an example of <strong>strong text</strong>.</p>


<i> and <em>

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.


<p>This text is <i>italic</i> </p>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.


<p>This text is <em>emphasized</em> </p>


<u> and <ins>

The <u> tag is used to underline text.


<p>This is an example of <u>underlined text</u>.</p>

The <ins> tag is used to indicate inserted text. Typically, this will be shown with an underline.


<p>This text has been <ins>added</ins> to the document.</p>


<sub> and <sup>

The <sub> tag is used to define subscript text.


<p>This is H<sub>2</sub>O - water</p>

The <sup> tag is used to define superscript text.


<p>This is E=mc<sup>2</sup> - Einstein's equation</p>


<mark>

The <mark> tag is used to highlight text. This is particularly useful for emphasizing keywords or important points.


<p>This text is <mark>highlighted</mark> to bring attention to it.</p>


<small>

The <small> tag is used to define smaller text, such as fine print or disclaimers.


<p>This is an example of <small>smaller text</small> for disclaimers.</p>


<del>

The <del> tag is used to indicate deleted text. It will usually be rendered with a strikethrough.


<p>This text is <del>deleted</del> and should not be considered.</p>


<blockquote>

The HTML <blockquote> use for Quotations. This element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.


<p>Non harum eos ea fuga sint veritatis, id unde animi voluptates porro doloribus nesciunt ad delectus amet recusandae debitis dolores! Ea?</p>

<blockquote>
    Officiis distinctio voluptates soluta assumenda doloremque deleniti libero molestias rem nostrum voluptatum dolores
</blockquote>


<q>

The HTML <q> tag use for Short Quotations defines a short quotation. Browsers normally insert quotation marks around the quotation.


<p>MSK Institute is the <q>Best for learning Coding & Computer Courses</q> in Shikohabad. </p>


<abbr>

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "ATM".

Marking abbreviations can give useful information to browsers, translation systems, and search engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.


<p>The <abbr title="MSK Institute">MSK</abbr> was founded in 2023.</p>


<address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.


<address>
    Written by: Sumit Kumar.<br>
    Visit at: MSK Institute<br>
    Website: mskinstitute.com<br>
    Address: Near Subhash Park, Shikohabad, Firozabad (UP)
</address>


<bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override. The HTML <bdo> tag is used to override the current text direction:

Example



<bdo dir="rtl">Best for learning Coding & Computer Courses in Shikohabad</bdo>


Marquee Example



<marquee direction="left">MSK Institute</marquee>

<!-- Scroll behavior -->
<marquee behavior="scroll" direction="left">Scrolling text</marquee>

<!-- Slide behavior -->
<marquee behavior="slide" direction="right">Sliding text</marquee>

<!-- Alternate behavior -->
<marquee behavior="alternate" direction="left">Bouncing text</marquee>

Meter Example


                    
<meter value="0.6">60%</meter>
<<< Back Next >>>