Open navigation menu

Mark Element for Highlighting

Uses the mark element to highlight relevant text portions, such as search results or important terms, with semantic meaning and styling.

HtmlForm Validation

Code

snippet
<p>
  Search results for <mark>HTML</mark>:
  The <mark>HTML</mark> standard defines the structure of web pages.
  Learning <mark>HTML</mark> is the first step in web development.
</p>

<p>
  The <mark>critical threshold</mark> is reached when
  the temperature exceeds 100&deg;C.
</p>

<blockquote>
  <p>
    It was the best of times, it was the worst of times,
    it was the age of <mark>wisdom</mark>, it was the age
    of <mark>foolishness</mark>.
  </p>
</blockquote>

<p>
  Required fields are marked with <mark>*</mark>.
  Please review the <mark>terms and conditions</mark>
  before proceeding.
</p>

<style>
  mark {
    background: #ffeb3b;
    color: #000;
    padding: 0 2px;
    border-radius: 2px;
  }
  mark.search-result {
    background: #fff3cd;
    border-bottom: 2px solid #ffc107;
  }
  mark.important {
    background: #ffcdd2;
    font-weight: bold;
  }
  mark::before {
    content: "\1F50E";
    margin-right: 2px;
  }
</style>

Related Examples