HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML Text Formatting

In the last chapter, you learned about the HTML style attribute.

HTML also defines special elements for formatting text.

Formatting indicate how text can appear in your HTML document. There are various tags to format web page.

Using the formatting tags you can make some text on your web pages to appear differently than normal text content.


HTML Bold text

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

Run code

The HTML <strong> element defines strong text, with added semantic "strong" importance.

Run code

You might think <b> and <strong> elements produce same effect, yes they do, but they behave differently.

The <strong> element defines strong text, with added semantic "strong" importance (for search engines).

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


HTML Italic text

The HTML <i> element defines italic text, without any extra importance.

Run code

The HTML <em> element defines emphasized text, with added semantic importance.

Run code

Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".



HTML Bi-Directional Override Text

The HTML <bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

This element takes one attribute dir stands for direction.

The dir attribute can have two possible values:

  • ltr - left to right
  • rtl - right to left
Run code

Superscript and Subscript

You will occasionally need to use superscript and subscript when marking up items like chemical formula, and mathematical equations so they have the correct meaning.

The <sup> and <sub> elements handle this job.

Run code

HTML Preserved tag

Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted (<pre>) element.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Run code

HTML <small> tag

The HTML <small> defines smaller text.

Run code

HTML <mark> tag

The HTML <mark> element represents text which is marked or highlighted for reference or notation purposes.

Run code

HTML <del> tag

The HTML <del> element represents a range of text that has been deleted from a document.

Run code

HTML <ins> tag

The HTML <ins> element represents a range of text that has been added in a document.

Run code

HTML Formatting Tags

Below is a list of some tags often used to format HTML document:

Tag Description
<b> Specifies bold text
<bdo> Specifies Bi-Directional Override
<del> Specifies deleted text
<em> Specifies emphasized text
<i> Specifies italic text
<ins> Specifies inserted text
<mark> Specifies marked text
<pre> Specifies preserved text
<strong> Specifies important text
<small> Specifies small text
<sub> Specifies subscript text
<sup> Specifies superscript text
<u> Specifies unarticulated Annotation