HTML Formatting
HTML formatting helps make your text look nice and readable without needing CSS. There are many tags in HTML to format text, making it bold, italic, underlined, and more.
These tags are divided into two main categories:
- Physical Tags: These tags change the way the text looks.
- Logical Tags: These tags give meaning or importance to the text.
Note: Some tags might look the same but have different meanings.
Here’s a list of the common HTML formatting tags and their purposes.
| Tag | Description | Example |
|---|---|---|
| <b> | Makes text bold (physical). | <b>Bold Text</b> |
| <strong> | Makes text bold and indicates importance (logical). | <strong>Important Text</strong> |
| <i> | Makes text italic (physical). | <i>Italic Text</i> |
| <em> | It makes text italic and emphasizes it (logical). | <em>Emphasized Text</em> |
| <mark> | Highlights text. | <mark>Highlighted Text</mark> |
| <u> | Underlines text. | <u>Underlined Text</u> |
| <sup> | Raises text above the normal line (superscript). | <sup>Superscript Text</sup> |
| <sub> | Lowers text below the normal line (subscript). | <sub>Subscript Text</sub> |
| <del> | Shows text as deleted. | <del>Deleted Text</del> |
| <big> | Makes text one size larger than the surrounding text. | <big>Larger Text</big> |
| <small> | Makes text one size smaller than the surrounding text. | <small>Bold Text</small> |
1. Bold Text
Use the <b> or <strong> tag to make text bold.
- The <b> tag is used to make text bold. It is a physical (presentational) tag, which means it only changes the visual appearance of the text without adding any semantic importance.
- The <strong> tag is used to indicate that the text is important. It also makes the text bold but adds semantic meaning, indicating that the content is of strong importance.
Example:
<p>In this paragraph <b>This text is bold.</b></p>
<p>In this paragraph <strong>This text is important and bold.</strong></p>
Output:
2. Italic Text
Use the <i> or <em> tag to make text italic.
- The <i> tag is used to italicize text. It is a physical (presentational) tag, so it only changes the appearance of the text without adding any semantic importance.
- The <em> tag is used to emphasize text. It italicizes the text and also adds semantic meaning, indicating that the content should be stressed.
Example:
<p> In this paragraph <i>This text is italic.</i></p>
<p> In this paragraph <em>This text is emphasized and italic.</em></p>
Output:
3. Highlighted Text
The <mark> tag is used to highlight text with a yellow background color, making it stand out from the rest of the content.
Example:
<p>In this paragraph <mark>This text is highlighted.</mark></p>
Output:
4. Underlined Text
The <u> tag is used to underline text.
Example:
<p> In this paragraph <u>This text is underlined.</u></p>
Output:
5. Superscript Text
The <sup> tag is used to display text as superscript, raising it slightly above the normal line of text.
Example:
<p>This is normal text and this is <sup>superscript</sup>.</p>
Output:
6. Subscript Text
The <sub> tag is used to display text as a subscript, lowering it slightly below the normal line of text.
Example:
<p>This is normal text and this is <sub>subscript</sub>.</p>
Output:
7. Deleted Text
The <del> tag is used to indicate text that has been deleted. It adds a strikethrough and semantic meaning that the text has been removed.
Example:
<p>This text is <del>deleted</del>.</p>
Output:
8. Larger Text
The <big> tag is used to make text one size larger than the surrounding text.
Example:
<p>This text is <big>larger</big>.</p>
Output:
9. Smaller Text
The <small> tag is used to make text one size smaller than the surrounding text.
Example:
<p>This text is <small>smaller</small>.</p>
Output:
Combining Formatting Tags
You can combine different formatting tags to apply multiple styles to the text.
Here’s an example that uses several tags together:
Output:
By using these HTML formatting tags, you can control how your text appears on a web page, making it more readable and visually appealing.
Course Video
Course Video English
YouTube Reference :
Practice Scenarios
Scenario 1: Superscript and Subscript Text
Objective: Create a web page with text using superscript and subscript formatting.
Expected Output: A web page with the text “H2O” where the “2” is subscript, and “E=mc^2” where the “2” is superscript.
<!DOCTYPE html>
<html>
<head>
<title>Superscript and Subscript Text</title>
</head>
<body>
<p>Water’s chemical formula is H<sub>2</sub>O.</p>
<p>Einstein’s equation is E=mc<sup>2</sup>.</p>
</body>
</html>
Output:
Scenario 2: Preformatted Text
Objective: Create a web page with preformatted text that preserves whitespace and line breaks.
Expected Output: A web page with a block of text that preserves whitespace and line breaks.
<!DOCTYPE html>
<html>
<head>
<title>Preformatted Text</title>
</head>
<body>
<pre>
This is a preformatted text.
It preserves whitespace
and line breaks.
</pre>
</body>
</html>
Output:
Scenario 3: Nested Formatting
Objective: Create a web page with nested formatting elements.
Expected Output: A web page with the text “This is bold and italic text with an underlined word.” where “bold and italic text” is both bold and italic, and “underlined” is underlined.
<!DOCTYPE html>
<html>
<head>
<title>Nested Formatting</title>
</head>
<body>
<p><b><i>This is bold and italic text with an <u>underlined</u> word.</i></b></p>
</body>
</html>
Output:
Scenario 4: Highlighted Text
Objective: Create a web page with highlighted text.
Expected Output: A web page with the text “This is highlighted text.” using the <mark> tag.
<!DOCTYPE html>
<html>
<head>
<title>Highlighted Text</title>
</head>
<body>
<p>This is <mark>highlighted</mark> text.</p>
</body>
</html>
Output:
Scenario 5: Combined Text Formatting
Objective: Create a web page with paragraphs that include superscript and subscript text, preformatted text, nested formatting, and highlighted text.
Expected Output: A web page with two paragraphs:
1. The first paragraph includes superscript, subscript, and highlighted text.
2. The second paragraph includes preformatted text and nested formatting elements.
Output:
Scenario 6: Complex Text Formatting
Objective: Create a web page with complex text formatting including superscript, subscript, nested formatting, highlighted text, and embedded links.
Expected Output: A web page with three paragraphs:
1. The first paragraph includes a superscript, subscript, and a hyperlink.
2. The second paragraph contains nested formatting elements: bold, italic, and underlined text.
3. The third paragraph includes highlighted text, a combination of different text colors, and a nested hyperlink within formatted text.
Output:
Use an HTML formatter by applying tags like <b> or <i>.
HTML formatting applies styles like bold, italic, or underline.
Create HTML format using tags for specific styles.
HTML format structures and styles web content.
Text formatting involves tags like <strong> and <em>.
Text style defines font and appearance via CSS or inline styles.
Format fonts using CSS properties.
Formatting tags include <b>, <i>, <u>.
Basic tags include <html>, <head>, <body>.
10 basic tags: <html>, <head>, <body>, <title>, <p>, etc.
