08. mark Tag
Introduction
Section titled “Introduction”The <mark> element highlights text, similar to using a highlighter pen on printed text. It’s useful for drawing attention to specific content, search results, or important passages. The mark element has semantic meaning, indicating that the marked text is relevant in a particular context.
Basic Usage
Section titled “Basic Usage”<p>This is <mark>highlighted text</mark> in a paragraph.</p>Visual Appearance
Section titled “Visual Appearance”By default, browsers render <mark> with:
- Yellow background color
- High contrast with text
- Similar to highlighter pen
Common Use Cases
Section titled “Common Use Cases”Search Results
Section titled “Search Results”Highlighting search terms in results:
<p>Search results for "HTML":The <mark>HTML</mark> tutorial covers basic tags.</p>Important Information
Section titled “Important Information”Drawing attention to key points:
<p>Remember: <mark>Always validate your HTML</mark> before publishing.</p>Quotations
Section titled “Quotations”Highlighting relevant portions:
<blockquote> <p>The <mark>most important</mark> thing is to keep learning.</p></blockquote>Styling
Section titled “Styling”You can customize the appearance with CSS:
<mark>Highlighted text</mark>
<style> mark { background-color: #ffeb3b; padding: 2px 4px; border-radius: 2px; }</style>Best Practices
Section titled “Best Practices”Use for Relevance
Section titled “Use for Relevance”Use <mark> when text is relevant in a specific context:
<!-- Good: Relevant in search context --><p>Search for "HTML": <mark>HTML</mark> is a markup language.</p>Don’t Overuse
Section titled “Don’t Overuse”Avoid highlighting too much text:
<!-- Avoid: Too much highlighting --><p><mark>This entire paragraph is highlighted</mark> which defeats the purpose.</p>