HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Formatting Elements

• <b> - Bold text
• <strong> - Important text (semantic bold)
• <i> - Italic text
• <em> - Emphasized text (semantic italic)
• <mark> - Marked/highlighted text
• <small> - Smaller text
• <del> - Deleted/strikethrough text
• <ins> - Inserted/underlined text
• <sub> - Subscript text (e.g. H₂O)
• <sup> - Superscript text (e.g. x²)

The HTML formatting tags are used to display formated text.

Example

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

<p>This is <i>italicized</i> text.</p>

Try this code ❯

HTML Formatting Elements

Formatting elements were designed to display special types of text:

Bold text

The HTML <b> element use to make text bold.

Example

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

Try this code ❯

Notes:

• Style sheets can be used to format b elements.
• Do not mark titles and headings using the <b> element.

Italic text

The HTML <i> element use to make text Italicize.

Example

<p>This text has been <i>italicized</i>.</p>

Try this code ❯

Emphasized Text

The HTML <em> element use to make text emphases.

Example

<p>Normal text <em>emphasized text</em></p>

Try this code ❯

Marked Text

The HTML <mark> element use to make text marked.

Example

<p>This is <mark>marked text</mark> was it yellow?</p>

Try this code ❯

Note: The mark element denotes the relevance of a span of text. By default, most browsers render it in black text on a yellow background, but you can change that with CSS.

To indicate importance, use <strong>; for emphasis, use <em>.

Tip: Don't use <mark>. for syntax highlighting purposes; instead, use the <span> element with appropriate CSS applied to it.

Deleted Text

The HTML <del> element use to make text deleted.

Example

<p>This text has been <del>deleted</del>.</p>

Try this code ❯

Note: A browser might render deleted text as strikethrough text.

Inserted Text

The HTML element use to make text inserted.

Example

<p>Cost of the product has been increased <ins cite="http://www.example.com/index.html" date="2021-01-01T00:00:00-00:00">New rates will be effected January 2021 onwards.</ins></p>

Try this code ❯

Striked Text

The HTML <s> element use to make text striked.

Example

<p>This text is <s>striked</s>.</p>

Try this code ❯

It is possible to indicate strikethrough text using a style sheet with the text-decoration property set to line-through.

Note: The <s> tag was deprecated in HTML 4, but it has been redefined in HTML5. However, use the <del> element instead if enclosed text represents deleted text.

Samller Text

The HTML <small> element use to make text smaller than as usual.

Example

<p>This is <small>small</small> text</p>

Try this code ❯

Strike Text

The HTML <strike> element use to make text strike through. This tag has been deprecated use text-decaration CSS property.

Example

<p>This is <strike>striked</strike> text</p>

Try this code ❯

This tag should act the same as the <s> tag.

This element has been deprecated by the W3C. The strict HTML and XHTML specifications include <strike> tag because it is possible to indicate strikethrough text using the style sheet property text-decoration: line-through;.

Note: The HTML5 specification specifies that this element as obsolete.

Important Text

The HTML <strong> element use to make text important.

Example

<p>This is <strong>important</strong> text</p>

Try this code ❯

Notes:

• This element generally renders as bold text.
• By default, most browsers render the strong element with bold text, but you can change that in CSS.
• If you are looking to emphasize a word or phrase, the element would be a better choice.
• If you want to bold text, but the text is not important, you should use the CSS rule font-weight: bold; on the appropriate element enclosing the text.

<p>This is <tt>Teletype Text</tt>.</p>

<p>This is <sub>subscript</sub> text</p>

<p>This is <sup>superscript</sup> text</p>