HTML Text Formatting

December 20, 2022 | by Arround The Web | No comments

To make any document clear and readable, we need to keep in mind the text formatting of the document. The text formatting is of two types, qualitative, such as font family, and quantitative, like font size, color, and more. In HTML, different elements can be utilized for applying formatting styles to the document elements.

This post will guide about:

HTML Formatting Styles

Several HTML text formatting styles are listed below:

Bold
Italic
Strikethrough
Subscript
Superscript
Underline
Emphasize
Strong
Small

Let’s implement some of them one by one with examples.

How to Bold Text in HTML?

The HTML “” tag is utilized to bold the text to gain the user’s attention towards the text.

Example
In HTML, inside the body element, add <h3> tag for the heading and

tag for some text. In between the element, we have placed the starting tag and closing tag. The content in between these tags will be formatted to bold.

HTML

<div class="container">
<h3>Bold</h3>
This paragraph defines how to style text as bold.
</div>

In CSS, these mentioned tags would be applied with several style properties for a better presentation.

Style All Elements

* {
font-family: Geneva, sans-serif, Verdana, Tahoma;
}

The asterisk ( * ) sign is utilized in CSS to apply all elements to the same properties. So, the “font-family” property of each element is set as “Verdana, Geneva, Tahoma, sans-serif”. This list of values is provided to ensure that if the first one is not supported by the browser, others will be applied to the elements.

Style div container

.container {
background-color: rgb(238, 165, 157);
width: 90%;
margin: auto;
padding: 10px;
border: 3px dashed brown;
font-size: 20px;
}

Here:

“background-color” property sets the background color of the div element.
“width” property, with a value of 90%, sets the width of the div element to 90%.
“margin” property with value “auto” adds equal space around an element.
“padding” property adds spacing around the content of the div main.
“border” property adjusts a border of width 3px, a dashed line with the color brown.
“font-size” property sets/adjusts the size of the text to 20px.

From the below image, it is clear that the selected text is formatted in bold:

How to Italicize Text in HTML?

Oftentimes, a document needs to italicize the text to show a quote or definition. To do this, use the “” tag.

Example
In HTML, add the starting and closing tags of tag before and after the part to italicize as follows:

This paragraph defines how to style text as Italic.

Output

How to Make Strikethrough Text in HTML?

The strikethrough text refers to the text having a line through it. It is simple by utilizing the HTML “<del>” tag.

Example
Add the starting <del> tag and closing </del> tag to the part of the text that is to be made a strikethrough as shown below:

This paragraph defines how to style text as <del>Strikethrough</del>.

Output

How to Add Text as Subscript in HTML?

The subscript is the small-size text that is displayed slightly below the text. For instance, in mathematical expressions. The HTML “” tag can be utilized to do so.

Example

The below HTML code represents a tag with some part of text inside the _tag:

This paragraph defines how to style text as subscript.

It can be seen from the below image that the part of text placed inside the sub beginning and closing tag is formatted as subscript text:

How to Add Text as Superscript in HTML?

The Superscript is the small text that appears slightly above the normal text line. Moreover, to make a text superscript HTML “” tag is utilized.

Example
Here is the code representing the element. Some part of the paragraph is within the tag as shown in the below code:

This paragraph defines how to style text as superscript.

The selected text part is successfully formatted as superscript:

How to Underline Text in HTML?

Sometimes, it is necessary to mark some text as underlined. For this purpose, a text formatting element “” is supported in HTML.

Example
Below HTML code shows element with some part resides inside the starting and closing tags:

This paragraph defines how to style text as underline.

Output

How to Make Emphasize Text in HTML?

In most of the documents, to draw special attention from the readers, the text is formatted to emphasize. The HTML “” tag is used to make the text italic. The readers stress their voices when they read the emphasized text.

Example
Here, the starting and closing tags of element are used in the paragraph:

This paragraph defines how to style text as Emphasize.

Output

How to Make Text as Strong in HTML?

The HTML “” element is used where it is required to show importance and urgency through text. It has a starting tag and a closing tag .

Example
Let’s observe the working of element by implementing it in HTML:

This paragraph defines how to style text as strong.

Output

How to Make Small Text in HTML?

The HTML “” element is used in making the font size small.

Example
The below code section contains element with some content and some part of it resides between the tag:

This paragraph defines how to style text as small.

Output

We have discussed different HTML formatting styles and their applications.

Conclusion

Text formatting plays a vital role in making a document clear and readable. A well-formatted document keeps the user’s attention and helps in understanding. To make an HTML document well-formatted there are several formatting tags such as “”, “”, “”, “”, and more that can be utilized accordingly. This blog has explained the elements to format text in HTML with practical examples.

Source: linuxhint.com