--- title: "HTML – Formatting" url: https://khanwaseem.com/blog/course/html-formatting author: "khan Waseem" published: 2023-09-19 updated: 2023-09-19 topics: ["course", "HTML Tutorial"] description: "Explore HTML formatting techniques for text, headings, lists, and more. Learn how to structure and style content on web pages effectively with HTML elements." --- # HTML – Formatting In HTML, formatting refers to the way you present and style your content on a web page. It includes various HTML elements and techniques that help structure text, add emphasis, create lists, and control the layout and appearance of your content. Table of Contents [Toggle](#) - [Bold Text :](#bold-text) - [Italic Text :](#italic-text) - [Underlined Text :](#underlined-text) - [Strike Text :](#strike-text) - [Monospaced Font :](#monospaced-font) - [Superscript Text :](#superscript-text) - [Subscript Text :](#subscript-text) - [Inserted Text :](#inserted-text) - [Deleted Text :](#deleted-text) - [Grouping Content :](#grouping-content) ## Bold Text : In HTML, you can make text bold using the `` element or the `` element. Both elements are used to indicate text that should be displayed in a bold font. Here’s how you can use them: Using the `` element: ```xml

This is bold text using the <strong> element.

Code language: HTML, XML (xml) ``` Using the `` element: ```xml

This is bold text using the <b> element.

Code language: HTML, XML (xml) ``` Both of these examples will render as: “This is **bold text** using the **element.” and “This is bold text using the element.”** While both `****` and `****` can make text bold, there is a semantic difference between them. The `****` element is used to indicate strong importance or emphasis, while `****` is used for stylistic bolding without conveying strong importance. It’s generally recommended to use `****` when the bold text is meant to carry significance or emphasis. **Exmaple : ** ```xml Bold Text Example

Bold Text Example

This is bold text using the <b> element.

This is strong text using the <strong> element.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19184925/image-168.png) **In this example:** - We have a basic HTML document with a heading (`

`). - We use both the `` element and the `` element to make text bold within two separate paragraphs. - When you open this HTML file in a web browser, you will see that the text enclosed within the `` and `` elements appears bold. Both elements are commonly used for making text visually bold, but `` also carries semantic meaning, indicating that the text is of strong importance, which can be useful for screen readers and search engines. ## Italic Text : In HTML, you can make text italic using the `` element or the `` element. Both elements are used to indicate text that should be displayed in an italic font. Here’s how you can use them: Using the `` element: ```xml

This is italic text using the <em> element.

Code language: HTML, XML (xml) ``` Using the `` element: ```xml

This is italic text using the <i> element.

Code language: HTML, XML (xml) ``` Both of these examples will render as: “This is *italic text* using the *element.” and “This is italic text using the element.”* Similar to the `****` and `****` elements for bold text, there is a semantic difference between `****` and** ``**. The `****` element is used to indicate emphasized text or text with a level of importance, while `****` is used for stylistic italics without conveying emphasis. It’s a good practice to use `****` when the italicized text is meant to carry meaning or emphasis. **Exmaple : ** ```xml Italic Text Example

Italic Text Example

This is italic text using the <i> element.

This is emphasized text using the <em> element.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19185359/image-169.png) In this example: - We have a basic HTML document with a heading (`

`). - We use both the `` element and the `` element to make text italic within two separate paragraphs. - When you open this HTML file in a web browser, you will see that the text enclosed within the `` and `` elements appears italic. Similar to the `` element for bold text, the `` element carries semantic meaning, indicating that the text is emphasized or of importance. It is often preferred for italicizing text when there is a need for semantic emphasis. ## Underlined Text : In HTML, you can underline text using the `` element. The `` element is used to define and format text with an underline. Here’s how you can use it: ```xml

This is underlined text using the <u> element.

Code language: HTML, XML (xml) ``` This example will render as: “This is **underlined text** using the `****` element.” However, it’s important to note that the use of underlined text for general content is not recommended in modern web design. Underlines are often reserved for indicating hyperlinks (text links) to maintain consistency and clarity in user interface design. For emphasizing or styling text, it’s typically more common to use bold (`****`), italics (`****`), or CSS styles to achieve the desired effect. **Example : ** ```xml Underlined Text Example

Underlined Text Example

This is underlined text using the <u> element.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19185719/image-170.png) In this example: - We have a basic HTML document with a heading (`

`). - We use the `` element to underline the text within a paragraph. - When you open this HTML file in a web browser, you will see that the text enclosed within the `` element appears underlined. The `` element is used for adding an underline to text, but it’s important to note that underlining text is not a recommended practice for general content since underlined text can be confused with hyperlinks. It’s typically used sparingly for special cases where it carries specific meaning or emphasis. For general emphasis, it’s often better to use the `` element for italics or CSS styles for other text decorations. ## Strike Text : In HTML, you can strike through text to create a “strikethrough” or “line-through” effect using the `****` element or the `****` element. Both elements are used to indicate that the text within them should be displayed with a horizontal line through it. Here’s how you can use them: Using the `` element: ```xml

This is strikethrough text using the <s> element.

Code language: HTML, XML (xml) ``` Using the `` element: ```xml

This is strikethrough text using the <strike> element.

Code language: HTML, XML (xml) ``` Both of these examples will render as: “This is strikethrough text using the `****` element.” and “This is strikethrough text using the `****` element.” The choice between `****` and `****` is mostly a matter of preference, as both elements achieve the same visual result. However, it’s important to note that in modern HTML, the semantic meaning of the text should guide your choice. If the text is being removed or no longer relevant, you might consider using a different element or CSS to indicate that, rather than relying solely on the visual strikethrough effect. **Example : ** ```xml Strike Through Text Example

Strike Through Text Example

This is strikethrough text using the <s> element.

This is strikethrough text using the <strike> element.

Code language: HTML, XML (xml) ``` **Output : ** ![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19190007/image-171.png) In this example: - We have a basic HTML document with a heading (`

`). - We use both the `` element and the `` element to create strikethrough text within two separate paragraphs. - When you open this HTML file in a web browser, you will see that the text enclosed within the `` and `` elements appears with a strikethrough line. The `` element is the recommended choice as it aligns with HTML5 standards, while the `` element is considered obsolete but still supported by most web browsers for backward compatibility. ## Monospaced Font : In HTML, you can display text using a monospaced or fixed-width font by using the `` element or the `
` element, combined with CSS styles if necessary. Monospaced fonts are often used for displaying code, preserving whitespace, and maintaining the alignment of characters.

- **Using the `` element:**
You can use the `` element to indicate that a piece of text should be displayed in a monospaced font. By default, it does not add any line breaks or extra spacing.

```xml
   
This is some monospaced font text.
Code language: HTML, XML (xml)
```

- **Using the `
` element:**
The `
` element is used to display preformatted text, including monospaced font text. It preserves whitespace, line breaks, and the formatting of text exactly as it appears in the HTML code.

```xml
   
   This is
   preformatted
   monospaced font
   text.
   
Code language: HTML, XML (xml)
```

If you want to style the monospaced text further or specify a particular monospaced font, you can use CSS. For example:

```xml



This is some styled monospaced font text.
Code language: HTML, XML (xml)
```

In this example, the CSS styles the text with the “Courier New” monospaced font and adjusts the font size. You can customize the styling according to your design preferences.

**Example : **

To display text in a monospaced or fixed-width font in HTML, you can use the `` element or apply CSS styles to the desired elements. Here’s an example of both approaches:

**Using the `` Element:**

```xml



    Monospaced Font Example


    
Monospaced Font Example


    
    
This is monospaced font text using the <code> element.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19190535/image-172.png)

**Using CSS Styles:**

```xml



    Monospaced Font Example
    


    
Monospaced Font Example


    
    
This is monospaced font text using CSS.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19190605/image-173.png)

In these examples:

- We have a basic HTML document with a heading (`
`).

- In the first example, we use the `` element to wrap the text that should appear in a monospaced font.

- In the second example, we use CSS to apply a monospaced font to the text within a `` element with the class “monospaced.” We specify commonly used monospaced fonts like “Courier New” and “Courier” in the `font-family` property. The `monospace` keyword is a generic fallback for monospaced fonts.

- When you open these HTML files in a web browser, you will see that the text enclosed within the `` element or the `` element with the “monospaced” class appears in a monospaced font. Monospaced fonts are often used for displaying code snippets, computer programming code, or any content where maintaining the alignment of characters is essential.

## Superscript Text :

In HTML, you can create superscript text using the `` element. Superscript text is typically used for footnotes, mathematical exponents, and other content that should appear slightly above the regular text baseline. Here’s how you can use the `` element:

```xml

This is regular text with some superscript text.
Code language: HTML, XML (xml)
```

This example will render as: “This is regular text with some superscript text.”

You can use the `` element to enclose the text that you want to be superscripted. It’s worth noting that the default rendering of superscript text may vary slightly between different web browsers and CSS stylesheets, but the `` element ensures that the text is displayed above the baseline.

**Example : **

```xml



    Superscript Text Example


    
Superscript Text Example


    
    
This is superscript text using the <sup> element.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19190849/image-174.png)

In this example:

- We have a basic HTML document with a heading (`
`).

- We use the `` element to wrap the text that should appear as superscript.

- When you open this HTML file in a web browser, you will see that the text enclosed within the `` element appears as superscript. Superscript is typically used for mathematical exponents, footnotes, or other content that should appear above the regular baseline of the text.

## Subscript Text :

In HTML, you can create subscript text using the `` element. Subscript text is typically used for chemical formulas, mathematical expressions, and footnotes where the text should appear slightly below the regular text baseline. Here’s how you can use the `` element:

```xml

This is regular text with some subscript text.
Code language: HTML, XML (xml)
```

This example will render as: “This is regular text with some subscript text.”

You can use the `` element to enclose the text that you want to be subscripted. The default rendering of subscript text may vary slightly between different web browsers and CSS stylesheets, but the `` element ensures that the text is displayed below the baseline.

**Exmaple : **

```xml



    Subscript Text Example


    
Subscript Text Example


    
    
This is subscript text using the <sub> element.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19193043/image-175.png)

In this example:

- We have a basic HTML document with a heading (`
`).

- We use the `` element to wrap the text that should appear as subscript.

- When you open this HTML file in a web browser, you will see that the text enclosed within the `` element appears as subscript. Subscript is typically used for chemical formulas, mathematical subscripts, or other content that should appear below the regular baseline of the text.

## Inserted Text :

In HTML, you can indicate inserted text using the `` element. This element is typically used to mark text that has been added or inserted into a document compared to a previous version. Here’s how you can use the `` element:

```xml

This is some inserted text in HTML.
Code language: HTML, XML (xml)
```

This example will render as: “This is some inserted text in HTML.”

You can use the `` element to enclose the text that you want to mark as inserted. By default, it may be displayed with an underline, but you can customize its appearance using CSS if needed.

**Example : **

```xml



    Inserted Text Example


    
Inserted Text Example


    
    
This is some inserted text using the <ins> element.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19193321/image-177.png)

In this example :

- We have a basic HTML document with a heading (`
`).

- We use the `` element to wrap the text that represents the inserted content.

- When you open this HTML file in a web browser, you will see that the text enclosed within the `` element appears with an underline by default. The `` element is often used to indicate additions or changes in a document, and the underline styling is the default way browsers render it. You can customize the styling of inserted text using CSS if needed.

## Deleted Text :

In HTML, you can indicate deleted or removed text using the `` element. This element is typically used to mark text that has been deleted or struck through in a document compared to a previous version. Here’s how you can use the `` element:

```xml

This is some deleted text in HTML.
Code language: HTML, XML (xml)
```

This example will render as: “This is some deleted text in HTML.”

The `` element is often displayed with a strikethrough line to visually represent that the text has been deleted, but the exact rendering can vary depending on the browser and CSS styles applied to the document.

**Example : **

```xml



    Deleted Text Example


    
Deleted Text Example


    
    
This is some deleted text using the <del> element.


Code language: HTML, XML (xml)
```

**Output : **

![](https://blogkhanwaseem.s3.amazonaws.com/uploads/2023/09/19193559/image-178.png)

In this example:

- We have a basic HTML document with a heading (`
`).

- We use the `` element to wrap the text that represents the deleted content.

- When you open this HTML file in a web browser, you will see that the text enclosed within the `` element appears with a strikethrough line by default. The `` element is often used to indicate deletions or changes in a document, and the strikethrough styling is the default way browsers render it. You can customize the styling of deleted text using CSS if needed.

## Grouping Content :

In HTML, you can group content together using several elements to create structured and organized sections within a web page. Here are some common HTML elements for grouping content:

- **`
` Element**: The `
` element is a generic container that is often used to group and structure content for styling purposes. It doesn’t have any inherent styling and is typically styled using CSS.

```xml
   

       
This is some content within a div.

       
    
           
  • Item 1
    • 
           
  • Item 2
    • 
       

   
Code language: HTML, XML (xml)
```

- **`
` Element**: The `
` element is used to define a thematic grouping of content within a document. It helps in structuring a web page and is often used for chapters, articles, or major content sections.

```xml
   

       
About Us

       
We are a company dedicated to...

   
Code language: HTML, XML (xml)
```

- **`
` Element**: The `
` element is used for self-contained content that can be distributed independently and is meaningful on its own. It’s commonly used for blog posts, news articles, or forum posts.

```xml
   

       
Blog Post Title

       
This is the content of the blog post...

   
Code language: HTML, XML (xml)
```

- **`
` and `