HTML Text Formatting
In HTML, there are several tags used to format text. These are called HTML text formatting elements.
HTML text formatting can be divided into two main categories:
- Physical Tags: These define only the visual appearance of the text. They tell the browser how the text should look (e.g., bold or italic) without adding extra context for search engines or accessibility tools.
- Logical (Semantic) Tags: These define the meaning or importance of the text. While they often look identical to physical tags in a browser, they provide vital information for screen readers and SEO.
HTML Formatting Tags
| Tag | Type | Description | Example |
|---|---|---|---|
| <b> | Physical | Makes text bold visually only. | Example |
| <strong> | Logical | Indicates text is important; usually displayed in bold. | Example |
| <i> | Physical | Displays text in italics without extra meaning. | Example |
| <em> | Logical | Emphasizes text; usually displayed in italics and read with stress by screen readers. | Example |
| <mark> | Physical | Highlights text (usually with a yellow background). | Example |
| <small> | Physical | Renders text in a smaller font size. | Example |
| <del> | Logical | Indicates text that has been deleted (usually has a strikethrough). | Example |
| <ins> | Logical | Indicates text that has been inserted (usually underlined). | Example |
| <sub> | Physical | Defines subscript text (e.g., in H₂O). | Example |
| <sup> | Physical | Defines superscript text (e.g., in E=mc²). | Example |
Key Benefits
- Readability: Helps users quickly scan and understand the content hierarchy.
- SEO: Search engines use logical tags like <strong> and <em> to determine the most important keywords on a page.
- Accessibility: Semantic tags help visually impaired users by allowing screen readers to interpret the "tone" or importance of specific words.
Different between Physical and Logical Tags
| Feature | Physical Tags | Logical Tags |
|---|---|---|
| Main Purpose | Defines the visual look of text (bold, italics). | Defines the meaning or role of text (importance, emphasis). |
| Browser Action | Instructs the browser exactly how to "draw" the text. | Provides context to the browser, search engines, and screen readers. |
| Accessibility | Poor; screen readers may ignore them. | Excellent; screen readers emphasize text for visually impaired users. |
| SEO Impact | Minimal value. | High; helps search engines understand content structure in 2025. |
| Modern Usage | Deprecated or replaced by CSS for styling. | Recommended for modern, semantic HTML5 development. |
Examples
Bold Text
- Physical: <b> (Bold) — Simply makes text thicker without adding importance.
- Logical: <strong> (Strong Importance) — Makes text bold and signals to crawlers that it is highly important content.
Italicized Text
- Physical: <i> (Italic) — Simply slants the text.
- Logical: <em> (Emphasis) — Slants the text to indicate stress or emphasis in a sentence.
Expert Advice for 2025: Always prioritize Logical Tags (also known as semantic tags) to ensure your website is accessible to all users and optimized for search engine indexing. Use CSS rather than physical tags to manage the visual appearance of your page.