HTML5 Handbook

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: