HTML Element

Publish in HTML Tutorial el 24/05/2025 17:19

The element represents text that should be marked or highlighted for reference purposes, typically due to its relevance in another context. It's particularly useful when you want to draw attention to specific portions of text without changing the semantic meaning.

By default, most browsers render content with a yellow background, but you can customize this with CSS. The element is an inline element and can be used within paragraphs, lists, or other text containers.

Basic Syntax

Rendered Example

This text will be highlighted

Common Use Cases

The element is perfect for:

Highlighting search results in a page
Marking important passages in quoted text
Drawing attention to relevant content
Creating visual cues in documentation

Examples

1. Basic Highlighting

Simple example of marking important text in a paragraph.

Play Code

<p>When working with HTML, it's important to remember that <mark>semantic elements</mark> provide meaning to both browsers and developers.</p>

2. Search Results Highlighting

Simulating how search terms might be highlighted in results.

Play Code

<p>Search results for "HTML":</p>
<p>The <mark>HTML</mark> specification includes many elements for structuring content, including the <mark>HTML</mark> element itself which is the root element.</p>

3. Custom Styled Mark

Showing how to customize the appearance of the mark element.

Play Code

<style>
  mark.custom {
    background-color: #ff6b6b;
    color: white;
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }
</style>
<p>This is <mark class="custom">important notice</mark> with custom styling.</p>

4. JavaScript Dynamic Highlighting

Using JavaScript to dynamically mark text based on user input.

Play Code

<p id="highlightText">This paragraph contains text that can be highlighted dynamically using JavaScript.</p>
<input type="text" id="searchTerm" placeholder="Enter text to highlight">
<button onclick="highlightText()">Highlight</button>

<script>
  function highlightText() {
    const text = document.getElementById('highlightText');
    const searchTerm = document.getElementById('searchTerm').value;
    const regex = new RegExp(searchTerm, 'gi');
    text.innerHTML = text.textContent.replace(regex, match => `<mark>${match}</mark>`);
  }
</script>

5. Mark with JavaScript Event

Using JavaScript to toggle highlighting on click.

Play Code

<p>Click on any word in this sentence to highlight it.</p>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const paragraph = document.querySelector('p');
    const words = paragraph.textContent.split(' ');
    
    paragraph.innerHTML = words.map(word => 
      `<span onclick="this.innerHTML = this.classList.toggle('highlighted') ? 
        '<mark>${word}</mark>' : '${word}'">${word}</span>`
    ).join(' ');
  });
</script>

Tips and Tricks

Accessibility: The element is recognized by screen readers, which will typically announce the highlighted content appropriately.
Styling: Always customize the highlight color to match your site's design using CSS.
Semantics: Use only for highlighting, not for general styling. For purely visual effects, use CSS instead.
Performance: When using JavaScript to dynamically mark large amounts of text, consider performance implications.
Printing: The highlight will typically print as-is, but you can customize print styles with @media print in your CSS.

Browser Support

The element is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It's also supported in Internet Explorer 9 and later.