HTML elements <mark>, <small>, <del>, and <ins> for text operation, along with code examples.
<mark> for Highlighting Text
The <mark> element, new in HTML5, is used to highlight text due to its relevance in another context. Think of it as a semantic version of a highlighter pen. The importance depends in noting certain words, and their appearance can be styled with CSS.
A common use case for <mark> is to highlight search terms in the results of a search. For example, if a user searches for “HTML5”, the search results could display <mark> HTML5 </mark> to draw attention to the term. It can also be used to call attention to part of a quote that wasn’t originally highlighted.
By default, browsers with native support for <mark> typically display the text with a yellow background. Older browsers might not render a background color by default, but you can instruct them to do so using CSS, for example, mark { background-color: yellow; }.
<!DOCTYPE html>
<html>
<head>
<title>Highlighting Text Example</title>
</head>
<body>
<p>Your search for <mark>HTML5</mark> resulted in several articles.</p>
<p>In the instructions, it said to cook for <mark>15 minutes</mark>.</p>
</body>
</html>Your search for HTML5 resulted in several articles.
In the instructions, it said to cook for 15 minutes.
In this example, the words “HTML5” and “15 minutes” will be highlighted with a yellow background in modern browsers.
<small> for Fine Print
The <small> element represents side comments such as fine print, which include disclaimers, caveats, legal restrictions, or copyrights. It’s planned for brief portions of inline text, not for lengthy content.
Browsers extract text within the <small> element in a smaller font size.
<!DOCTYPE html>
<html>
<head>
<title>Fine Print Example</title>
</head>
<body>
<p>This product comes with a limited warranty. <small>See terms and conditions for details. Copyright © 2023.</small></p>
</body>
</html>
This product comes with a limited warranty. See terms and conditions for details. Copyright © 2023.
The text “See terms and conditions for details. Copyright © 2023.” will be displayed in a smaller font size.
<del> for Deleted Text
The <del> element is used to mark content that has been removed or deleted from a document. Browsers commonly render deleted text with a strikethrough.
The <del> element supports the cite attribute, which can provide a URL to a source explaining why the edit was made, and the datetime attribute to indicate the time of the edit. These attributes are not typically displayed by browsers but can be useful for programmatic processing.
Notably, <del> can surround both phrasing (“inline”) content and blocks of content.
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>Our prices have changed. The old price was <del>$29.99</del>, and the new price is $39.99.</p>
<ul>
<li><del>Item A</del></li>
<li>Item B</li>
</ul>
</body>
</html>Our prices have changed. The old price was $29.99, and the new price is $39.99.
Item A- Item B
In this example, “$29.99” and “Item A” will likely be displayed with a strikethrough.
<ins> for Inserted Text
The <ins> element is used to mark content that has been added or inserted into a document. Inserted text is generally styled with an underline by default.
Similar to <del>, the <ins> element also supports the cite and datetime attributes for providing context about why and when the insertion occurred.
Like <del>, <ins> can also surround both phrasing and block content. Be aware that the default underline for <ins> might be confused with links, so you might want to use CSS to style inserted passages differently.
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>We are now offering free shipping on orders over $50! <ins>This offer is valid until the end of the month.</ins></p>
<ul>
<li>Item C</li>
<ins><li>New Item D</li></ins>
</ul>
</body>
</html>We are now offering free shipping on orders over $50! This offer is valid until the end of the month.
- Item C
- New Item D
In this example, “This offer is valid until the end of the month.” and “New Item D” will likely be displayed with an underline.
HTML5 Topics