> For the complete documentation index, see [llms.txt](https://codingzonebd.gitbook.io/html-elements/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codingzonebd.gitbook.io/html-elements/html-formatting-elements.md).

# HTML Formatting Elements

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

{% code overflow="wrap" lineNumbers="true" %}

```markup
<!DOCTYPE html>
<html>
<body>
  <p><b>This text is bold</b></p>
  <p><i>This text is italic</i></p>
  <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
```

{% endcode %}

### HTML Formatting Elements

Formatting elements were designed to display special types of text:

* `<b>` - Bold text
* `<strong>` - Important text
* `<i>` - Italic text
* `<em>` - Emphasized text
* `<mark>` - Marked text
* `<small>` - Smaller text
* `<del>` - Deleted text
* `<ins>` - Inserted text
* `<sub>` - Subscript text
* `<sup>` - Superscript text

**HTML \<b> and \<strong> Elements**

{% code lineNumbers="true" %}

```markup
<b>This text is bold</b>
```

{% endcode %}

**The HTML&#x20;**<mark style="color:red;">**\<strong>**</mark>**&#x20;element defines text with strong importance. The content inside is typically displayed in bold.**

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}

**HTML \<i> and \<em> Elements**

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

{% code overflow="wrap" lineNumbers="true" %}

```html
<i>This text is italic</i>
```

{% endcode %}

**HTML \<small> Element**

**The HTML \<small> element defines smaller text:**

{% code overflow="wrap" lineNumbers="true" %}

```html
<small>This is some smaller text.</small>
```

{% endcode %}

**HTML \<mark> Element**

**The HTML \<mark> element defines text that should be marked or highlighted:**

{% code overflow="wrap" lineNumbers="true" %}

```html
<p>Do not forget to buy <mark>milk</mark> today.</p>
```

{% endcode %}

**HTML \<del> Element**

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

{% code overflow="wrap" lineNumbers="true" %}

```html
<p>My favorite color is <del>blue</del> red.</p>
```

{% endcode %}

**HTML \<ins> Element**

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

{% code overflow="wrap" lineNumbers="true" %}

```html
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
```

{% endcode %}

HTML **\<sub>** Element

**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:**

{% code overflow="wrap" lineNumbers="true" %}

```html
<p>This is <sub>subscripted</sub> text.</p>
```

{% endcode %}

**HTML \<sup> Element**

**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, like WWW\[1]:**

{% code overflow="wrap" lineNumbers="true" %}

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

{% endcode %}
