- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
HTML Formatting Text | HTML Formatting Tags with Example
This article will teach you how to format text in HTML. So without any further delay, let's start.
Text can be formatted to convey a specific meaning. As an example:
<!DOCTYPE html>
<html>
<body>
<p>Hello, my <b>name</b> is <u>William</u>.</p>
</body>
</html>Hello, my name is William.
In the above example, I used the text formatting tags, sometimes also called "phrasing tags," B and U, to make the text bold and underlined.
In this article, you will learn about the tags used to format the text on the web. However, I already listed and briefly described the "phrasing tags" at the start of the course. From the list of phrasing tags, some tags are used to format the text on the web.
HTML Formatting Tags
Some of the most common and well-known HTML formatting tags are briefly explained in the table below.
| <b> | represents bolded texts |
| <sub> | represents subscripted texts |
| <sup> | represents superscripted texts |
| <strong> | represents important texts |
| represents deleted texts | |
| <ins> | represents inserted texts |
| <mark> | represents marked texts |
| <i> | represents italic texts |
| <em> | represents emphasized texts |
| <small> | represents small texts |
HTML Text Formatting
HTML uses tags like HEAD and BODY to define the structure and appearance of a document. The HTML document is stored in plain text format by default, which means that it contains no formatting. To format text in an HTML document, you must use various HTML tags.
Formatting the text not only enhanced the visual appearance of the content but also improved its readability and comprehension.
The content of a formatted document is presented in an organized manner, which allows readers to easily differentiate between various types of information. For instance, any important piece of information in an HTML document can be enclosed between B or I tags to make it appear in bold or italics, respectively.
Sometimes, you may need to highlight, mark, or emphasize certain important or technical terms to differentiate them from the normal text content. So HTML provides you with the MARK and EM tags to highlight and emphasize the text content.
HTML Text Formatting Tags
HTML provides a set of tags that can be used to change the appearance of text by using formatting features such as bold, italics, subscript, and superscript. These HTML tags are used in conjunction with the beginning and ending tags. HTML formatting tags are classified into two categories:
"Text formatting with physical style tags" is defined in this article, whereas "text formatting with logical style tags" is defined in a separate (next) article.
HTML Text Formatting with Physical Style Tags
HTML uses physical style tags to change the appearance of text. If you want your text to appear in a particular style, such as bold or italics, you must use physical style tags. For example, to ensure that text appears in small font, you must enclose it between the starting and ending tags of the SMALL tag.
The table given below lists and describes the physical style tags used to format the text in an HTML document:
| Tag | Description |
|---|---|
| B | shows the text in bold |
| I | displays the text in italics |
| SMALL | The text is displayed in a small font size |
| SUB | Subscript text is displayed |
| SUP | displays the text as superscript |
Let me now create an example using all of the above tags to demonstrate how these tags can be used in an HTML document.
<!DOCTYPE html>
<html>
<body>
<p>The <i>chemical </i><small>formula</small> of <b>Water</b> is H<sub>2</sub>O.</p>
<p>(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab.</p>
</body>
</html>The chemical formula of Water is H2O.
(a+b)2 = a2 + b2 + 2ab.
The table below lists and describes all physical style tags available in HTML for formatting text in an HTML document.
| Attribute | Description |
|---|---|
| class | Indicates a class name for a tag |
| dir | Indicates the directionality of the text, such as left to right or right to left |
| id | Indicates a tag's unique ID |
| lang | Indicates the language code for the tag's content |
| style | Indicates an inline style for a tag |
| title | Specifies a title for a tag |
Now in the next tutorial, you will learn about "text formatting with logical tags."
« Previous Tutorial Next Tutorial »