The HTML elements <mark> and <del> are used to highlight and indicate deleted text, respectively. Here's how to use them:
The <mark> Element
The <mark> element is used to highlight text that is of particular relevance or importance in a given context. It's often rendered by browsers with a yellow background, similar to a highlighter pen.
When to use it:
To draw attention to specific parts of a sentence or paragraph.
To indicate search results within a document.
To highlight text that the user might be interested in.
Syntax:
<p>This is some regular text, but this part is <mark>highlighted</mark> because it's important.</p>
Example:
Let's say you have a paragraph about a new product and you want to emphasize its key feature:
<p>Our new smartphone boasts an incredible battery life, allowing you to use it all day without needing to recharge. Furthermore, it features a <mark>revolutionary AI camera system</mark> that captures stunning photos in any light condition.</p>
Accessibility Considerations:
While <mark> visually highlights text, it doesn't convey semantic meaning to screen readers in the same way that <strong> or <em> do for importance or emphasis. If the highlight is crucial for understanding the content, consider using additional ARIA attributes or providing alternative methods for conveying the importance.
The <del> Element
The <del> element is used to represent deleted (removed) text from a document. Browsers typically render the content of <del> with a strikethrough line.
When to use it:
To show changes or revisions to a document (e.g., in a draft or a version history).
To indicate a correction or an outdated piece of information.
In legal documents to show text that has been removed.
Syntax:
<p>The original price was <del>$99.99</del> now it's only $79.99!</p>
Attributes:
The <del> element can also have two optional attributes:
cite: This attribute specifies a URI to a document that explains the reason for the deletion or provides context.datetime: This attribute indicates the date and time when the text was deleted. The value must be a valid date or datetime string.
Example with attributes:
<p>We originally planned to launch on <del datetime="2025-06-15T10:00:00Z" cite="https://example.com/project-updates.html#delay">June 15th</del>, but the new launch date is July 30th.</p>
Combining with <ins>:
Often, <del> is used in conjunction with the <ins> (inserted text) element to show both what was removed and what was added.
Example:
<p>The correct spelling is <del>recieve</del><ins>receive</ins>.</p>
Key Differences and When to Use Which:
| Feature | <mark> | <del> |
| Purpose | Highlights text for relevance/importance | Indicates deleted/removed text |
| Appearance | Typically yellow background | Typically strikethrough |
| Semantic | Highlights for attention, not strong emphasis | Semantically indicates removed content |
| Attributes | None commonly used | cite and datetime |
| Use Case | Search results, drawing attention, emphasis | Revisions, corrections, outdated information |
By using <mark> and <del> appropriately, you can enhance the semantic meaning of your HTML documents and provide a clearer visual representation of your content.
