---
title: "HTML Formatting tags with example"  
description: "HTML formatting tags are used to style the contents of web pages in different formats."  
author: "Ashutosh Patel"  
published: 2024-06-05  
updated: 2024-06-05  
canonical: https://www.mindstick.com/blog/304308/html-formatting-tags-with-example  
category: "html"  
tags: ["html", "html5", "html tags"]  
reading_time: 3 minutes  

---

# HTML Formatting tags with example

### HTML Formatting tags

HTML formatting tags are used to apply various styles and effects to text and [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) within a [web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page). These tags allow you to change the appearance of text, such as making it bold, italic, underlined, or using different font sizes and colors.

#### Common HTML formatting tags

Here are some [common](https://www.mindstick.com/articles/23170/10-most-common-accounting-mistakes-of-small-business) HTML formatting tags along with examples,

## Bold Text (<b> or <strong>)

- **<b>** [Render](https://www.mindstick.com/articles/13048/questions-that-render-a-helping-hand-for-hiring-dedicated-wordpress-developer) the text in bold.
- **<strong>** Indicates strong emphasis, often rendered as bold by browsers

## Example-

```html
<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>
```

## Italic Text (<i> or <em>)

- **<i>** Renders text in italic.
- **<em>** Indicates emphasis, often rendered as italic by browsers.

## Example-

```html
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
```

## Underlined Text (<u>)

- **<u>** Renders text with an underline.

## Example-

```html
<p>This is <u>underlined</u> text.</p>
```

## Strikethrough Text(<s> or <strike>)

- **<s>** or **<strike>** Renders text with a strikethrough line.

## Example-

```html
<p>This is <s>strikethrough</s> text.</p>
<p>This is <strike>also</strike> strikethrough text.</p>
```

## Superscript Text (<sup>)

- **<sup>** Renders text as superscript (raised above the [baseline](https://answers.mindstick.com/qa/96771/explain-the-term-baseline)).

## Example-

```html
<p>This is 10<sup>th</sup> superscript text.</p>
```

## Subscript Text (<sub>)

- **<sub>** Renders text as subscript (lowered below the baseline).

## Example-

```html
<p>This is H<sub>2</sub>O subscript text.</p>
```

**[Font Size](https://www.mindstick.com/forum/158654/what-is-the-css-property-used-to-specify-the-font-size-of-an-element) (<font>)**

- **<font size="value">** Sets the size of the text, where "value" can be a numerical value (1-7) or [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css) [values](https://www.mindstick.com/forum/327/sum-textbox-values) like "small", "medium", "large", etc.

## Example-

```html
<p><font size="4">This is large text.</font></p>
```

## Font Color ( <font> )

- **<font color="value">** Sets the color of the text, where "value" can be a color name (e.g., "red", "blue", "green") or a hexadecimal color code (#RRGGBB).

## Example-

```html
<p><font color="red">This is red text.</font></p>
```

## Note-

some of these tags, such as `<b>`, `<i>`, `<u>`, `<s>`, `<font>`, are considered [deprecated](https://www.mindstick.com/forum/972/deprecated-as-a-property-in-sencha-touch) in favor of using CSS for styling. It's recommended to use CSS for styling whenever possible for better separation of concerns and maintainability.

## Example-

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting tags Example</title>
</head>
<body>
    <!-- Example using mostly used formatting tags -->
    <div class="formatted">
        <p>This is <b>bold</b> text.</p>
        <p>This is <i>italic</i> text.</p>
        <p>This is <u>underlined</u> text.</p>
        <p>This is <s>strikethrough</s> text.</p>
        <p>This is <sup>superscript</sup> text.</p>
        <p>This is <sub>subscript</sub> text.</p>
        <p><font size="5">This is large text.</font></p>
        <p><font color="red">This is red color text.</font></p>
    </div>
</body>
</html>
```

**[Output](https://www.mindstick.com/forum/161319/how-does-the-print-function-handle-output-in-python)-**

This is **bold** text.

This is *italic* text.

This is underlined text.

This is ~~strikethrough~~ text.

This is superscript text.

This is subscript text.

This is large text.

This is red color text.

---

Original Source: https://www.mindstick.com/blog/304308/html-formatting-tags-with-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
