HTML Formatting

Formatting tags are used to change the format of text (like underline, bold) in the output. All formatting tags have start tag and end tag. These elements affect only the presentation of a document. You can also achieve a similar appearance using CSS.

images/articles/html/html-formatting.webp

1. Bold

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

<b>This text is bold</b>

2. Italics

The HTML <i> element defines italic text.

<i>This text is italic</i>

3. Strong (Important)

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

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

4. Emphasize

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

<em>This text is emphasized</em>

5. Subscript

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.

<p>Formula of water is H<sub>2</sub>O.</p>

6. Superscript

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes or in Mathematical expressions for squaring.

<p>This is <sup>superscripted</sup> text.</p>

7. Computer Code

The <code> tag is used to define a piece of computer code. The content inside is displayed in monospace font. 

<p>The HTML <code>button</code> tag defines a clickable button.</p>

8. Abbreviation

The <abbr> tag defines an abbreviation or an acronym, like HTML, CSS, ATM. The full form is written as the value of title attribute.

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

9. Quote

The <blockquote> tag specifies a section that is quoted from another source.

<blockquote>This is quotation text.</blockquote>

10. Inline Quote

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

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

11. Marked Text

The HTML <mark> element defines text that should be marked or highlighted.

<p>This is <mark>highlighted</mark> text.</p>

12. Small Text

The HTML <small> element defines smaller text.

<small>This is smaller text.</small>

13. Deleted Text

The HTML <del> element defines text that has been deleted from a document. Browsers usually strike a line through deleted text.

<p>This text is now <del>deleted</del> for some new text.</p>

14. Inserted Text

The HTML <ins> element defines a text that has been inserted into a document. Browsers usually underline inserted text.

<p>This text is <ins>inserted</ins>.</p>

Horizontal Rule

The <hr> element creates a horizontal rule across the page. It is an empty tag.

Example:

<hr>

This is frequently used to separate distinct sections of a page where a new heading is not appropriate.