Formatting Text Using Tags in HTML

Zia

2 Followers

Jun 14, 2024

1 sec read

653

Formatting text in HTML

Formatting

The content format determines how the content will appear in the browser. For example, when you visit a Website, some text appears in a specific format such as bold or underlined. This means the formatted content makes an HTML page look readable and presentable. In HTML, formatting is applied to the text by using formatting elements, which are container elements.

Commonly used HTML formatting elements are as follows:

B
The B element displays text in bold. The text that must be displayed in bold is enclosed between and tags.

I
The I element displays text in italics. The text that must be displayed in italics is enclosed between and tags.

SMALL
The SMALL element makes text appear smaller in a browser. The smaller text must be enclosed between and tags.

U
The U element applies an underline to the text. The text that must be underlined is enclosed between and tags.

<!DOCTYPE html>

</html>

<head>

<title>Formats</title>

</head>

<body>

This is text is displayed in bold.

This text is displayed in italic.

This text is underline.

This text is displayed smaller.

</body>

</html>

You might want to display some text or characters above or below the baseline of its adjacent text. Further, you might want to apply strike through to some text to indicate that it is deleted. Therefore HTML provides you with some more formatting elements. These formatting elements are as follows:

DEL
The DEL element encloses text that has been deleted from the document. The text to be deleted is placed in the <del> and </del> tags.

INS
The INS element encloses text that has been inserted into the document. The text to be inserted is placed in the <ins> and </ins> tags. The INS element can be used with the DEL element to inform the user about the deleted text, which is replaced by new text.

STRONG
The STRONG element emphasizes text as compared to its surrounding text. The text to be emphasized is placed in and tags.

SUB
The SUB element displays the text as a subscript. The text to be displayed as a subscript is enclosed in and tags.

SUP
The SUP element displays text in superscript. The text to be displayed in superscript is enclosed in and tags.

<!DOCTYPE html>

</html>

<head>

<title>Formats</title>

</head>

<body>

This is an example of <del>delete</del> and <ins>inserted</ins> text.

This is an example of Strong text.

This is an example of subscript text.

This is an example of superscript text.

</body>

</html>

Monospaced and preformatted text

By using monospaced fonts in HTML5, a Web developer can provide the same amount of horizontal space between fonts, even if font size, shape, and type are not the same. Monospaced fonts are used for programming code scripts, instruction texts, and ASCII characters.

The <pre> tag is used to apply preformatted text content to a Web page.

The <pre> tag applies a fixed font width to the text content. It also maintains standard formatting for spaces and line breaks. The <pre> tag is usually used when you want to copy-paste content from a source but do not want to change the formatting of the same. The content would be copied while maintaining all the line breaks and spaces.

Lists some of the other predefined tags available for the formatting of text in HTML.

: Used for emphasizing text
<dfn>: Used for a definition term
<code>: Used for a computer code
<samp>: Used for sample output from a computer program
<cite>: Used for a citation

1. Format a Block Quote

To define a long quotation or a block quotation, the <blockquote> tag can be used. When the <blockquote> tag is used, the quotation is indented in browsers.

"When one door closes, another opens; but we often look so long

and so regretfully upon the closed door that we do not see the

one which has opened for us. -Alexander Graham Bell

</blockquote>

HTML Formatting text in HTML Formatting text using tags formatting tags in html formatting text html text tags formatting tags example monospace text in html preformatted text in html blockquote html format a block quote

Published by:

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.