HTML Text Formatting
HTML Text Formatting Tags Tutorial by CodesWithPankaj
HTML provides several tags to format text, allowing you to emphasize content, style words, and convey specific meanings. Let’s explore these text formatting tags in detail to see how each can enhance your webpage content.
1. Bold Text - <b>
and <strong>
<b>
and <strong>
<b>
: Makes text bold without adding extra importance.<strong>
: Also makes text bold, but adds importance to the text for screen readers and search engines.
Example:
2. Italic Text - <i>
and <em>
<i>
and <em>
<i>
: Makes text italic, often used for styling or denoting foreign words.<em>
: Adds emphasis to text with italics and provides importance for screen readers.
Example:
3. Underline Text - <u>
<u>
The <u>
tag underlines text. It’s often used for stylistic purposes but is not commonly used for links (as it may confuse users).
Example:
4. Strikethrough Text - <s>
<s>
The <s>
tag displays text with a strikethrough, indicating content that is outdated or no longer accurate.
Example:
5. Small Text - <small>
<small>
The <small>
tag makes text appear smaller than the surrounding text, usually for disclaimers or fine print.
Example:
6. Superscript Text - <sup>
<sup>
The <sup>
tag raises text to the top of the line, commonly used for exponents or footnotes.
Example:
7. Subscript Text - <sub>
<sub>
The <sub>
tag lowers text to the bottom of the line, often used for chemical formulas or other scientific notations.
Example:
8. Inserted Text - <ins>
<ins>
The <ins>
tag underlines text and indicates that content has been inserted or added. It usually highlights updates to content.
Example:
9. Deleted Text - <del>
<del>
The <del>
tag shows deleted content with a strikethrough, useful for displaying text revisions.
Example:
10. Marked Text - <mark>
<mark>
The <mark>
tag highlights text, similar to a highlighter, for drawing attention to specific content.
Example:
11. Quotation Text - <q>
<q>
The <q>
tag is used for inline quotes. It automatically adds quotation marks around the text.
Example:
12. Blockquote - <blockquote>
<blockquote>
The <blockquote>
tag is used for longer quotes, usually displayed with indentation.
Example:
13. Abbreviations - <abbr>
<abbr>
The <abbr>
tag defines abbreviations or acronyms and provides an expansion when hovered.
Example:
14. Code Text - <code>
<code>
The <code>
tag is used to format code snippets within text, displaying in a monospace font.
Example:
Full Example
Here is an HTML document demonstrating all these formatting tags:
This tutorial covers the most commonly used HTML text formatting tags, making it easier for you to style and emphasize your webpage text as needed. Practice using each tag, and watch how it changes the appearance of your content. Happy coding with CodesWithPankaj!
Last updated