Logical Tags (Semantic Tags)
Tags that give meaning + style to text (important, emphasized, highlighted, deleted, inserted, etc.).
They are useful for SEO, accessibility, and screen readers.
Example: <strong>, <em>, <mark>, <del>, <ins>
<strong> – Important Text
- Also makes text bold, but with semantic meaning (used for important text).
- Screen readers read it with emphasis.
Example:
<p>This is <strong>very important</strong> text.</p>
Output:
<em> – Emphasized Text
- Makes text italic, but also adds importance (semantic).
- Screen readers will stress this word.
Example:
<p>Please <em>read carefully</em> before you start.</p>
Output:
<mark> – Highlighted Text
- Highlights text with a yellow background by default.
Example:
<p>This is <mark>highlighted</mark> text.</p>
Output:
<del> – Deleted Text
- Shows text with a strike-through (used for removed text).
Example:
<p>Price: <del>$100</del> $80</p>
Output:
<ins> – Inserted Text
- Shows inserted/added text (underlined by default).
Example:
<p>My favorite color is <ins>blue</ins>.</p>
Output:
