HTML (HyperText Markup Language) provides various HTML text formatting elements that define the appearance and structure of content on web pages. These formatting tags help improve readability, emphasize important information, and enhance accessibility.
Understanding how and when to use these tags ensures that content is both visually appealing and properly interpreted by browsers, search engines, and assistive technologies such as screen readers.
This guide will cover HTML text formatting step by step, including its use cases, best practices, and examples.
1. Basic Text Formatting
Basic formatting tags modify the appearance of text, such as making it bold, italicized, underlined, or highlighted.
a. Bold and Strong Text (<b> vs. <strong>)
<b>(Bold): Makes text visually bold but does not add any special meaning.<strong>(Strong): Makes text bold and conveys importance to search engines and screen readers.
Example:
<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>Output:
This is bold text.
This is strong text.
🔹 Best Practice: Use <strong> instead of <b> when emphasizing important content for SEO and accessibility.
b. Italic and Emphasized Text (<i> vs. <em>)
<i>(Italic): Italicizes text for visual styling.<em>(Emphasized): Italicizes text and conveys emphasis or importance.
Example:
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>Output:
This is italic text.
This is emphasized text.
🔹 Best Practice: Use <em> when you want to stress a word semantically rather than just for style.
c. Underlined and Inserted Text (<u> vs. <ins>)
<u>(Underline): Underlines text for styling purposes (e.g., for misspelled words).<ins>(Inserted): Underlines text and indicates newly added content.
Example:
<p>This is <u>underlined</u> text.</p>
<p>This is <ins>inserted</ins> text.</p>Output:
This is underlined text.
This is inserted text.
🔹 Best Practice: Use <ins> to indicate updates in content rather than <u>.
d. Strikethrough and Deleted Text (<s> vs. <del>)
<s>(Strikethrough): Used for text that is no longer accurate but still relevant (e.g., old prices).<del>(Deleted): Indicates text that has been removed or replaced.
Example:
<p>This is <s>strikethrough</s> text.</p>
<p>This is <del>deleted</del> text.</p>Output:
This is strikethrough text.
This is deleted text.
🔹 Best Practice: Use <del> when showing content that has been replaced or removed for accuracy.
e. Highlighted Text (<mark>)
<mark>(Highlighted): Highlights text with a yellow background.
Example:
<p>This is <mark>highlighted</mark> text.</p>Output:
This is highlighted text.
🔹 Best Practice: Use <mark> to draw attention to important information.
2. Structural Text Formatting
Structural formatting elements help organize text into readable and well-structured content.
a. Headings (<h1> to <h6>)
<h1>to<h6>are used to define headings, where<h1>is the most important, and<h6>is the least important.
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>🔹 Best Practice: Use headings in hierarchical order to improve SEO and readability.
b. Paragraphs (<p>)
<p>defines a paragraph and ensures proper spacing between text blocks.
Example:
<p>This is a paragraph of text.</p>🔹 Best Practice: Use <p> instead of multiple <br> tags for readability.
c. Line Break (<br>)
<br>adds a single line break within text.
Example:
<p>First line.<br>Second line.</p>🔹 Best Practice: Use <br> sparingly; prefer <p> for separate paragraphs.
d. Horizontal Rule (<hr>)
<hr>inserts a horizontal line to separate sections.
Example:
<p>First section</p>
<hr>
<p>Second section</p>🔹 Best Practice: Use <hr> only when necessary to separate distinct sections.
3. Preformatted and Quoted Text
Certain elements preserve formatting and display text in a specific style.
a. Preformatted Text (<pre>)
<pre>preserves spaces, tabs, and line breaks as they appear in the HTML code.
Example:
<pre>
This is
preformatted text.
</pre>🔹 Best Practice: Use <pre> for code snippets or ASCII art.
b. Code Formatting (<code>)
<code>displays text in a monospaced font.
Example:
<p>Use <code><h1></code> for headings.</p>🔹 Best Practice: Use <code> for inline code snippets.
c. Blockquote (<blockquote>)
<blockquote>displays quoted text with indentation.
Example:
<blockquote>
"The best way to predict the future is to invent it."
</blockquote>4. Superscript and Subscript Text
<sup>(Superscript): Raises text (e.g., exponents).<sub>(Subscript): Lowers text (e.g., chemical formulas).
Example:
<p>Area: A = s<sup>2</sup></p>
<p>Water: H<sub>2</sub>O</p>5. Combining Multiple Formatting Tags
Multiple formatting elements can be nested within text.
Example:
<p><strong><em>Bold and Italic</em></strong></p>
<p><mark><u>Highlighted and Underlined</u></mark></p>
<p>H<sub>2</sub>O is water, and E = mc<sup>2</sup> is Einstein's equation.</p>6. Best Practices for Text Formatting
✅ Use semantic tags (<strong>, <em>, <ins>, <del>) over non-semantic ones (<b>, <i>, <u>).
✅ Structure content properly using paragraphs and headings.
✅ Use CSS for advanced styling rather than excessive HTML formatting tags.
Conclusion
Mastering HTML text formatting enhances readability, accessibility, and SEO. By implementing best practices and using appropriate tags, web content can be structured effectively for all users.