Highlight text with HTML mark tag

CodeTidbit by SamanthaMing.com

If you ever need to mark text within a paragraph, better use the <mark> tag. It's HTML version of a yellow highlighter. I've always used a <span> tag with some CSS styling sprinkled on it, not realizing this more semantic option existed. HTML5 is filled with all kind of goodies, am I right 😆

<p>
  <mark>Highlight</mark>
  text with HTML &lt;mark&gt; tag
</p>

Default <mark> styling

The default background color of <mark> is yellow.

<p>
  <mark>Default Yellow Highlight</mark>
</p>

Output

Custom Styling <mark> with CSS

Of course, like any text HTML tag, you can apply custom styling with CSS. You can think of it similarly to how you would style a <p> tag.

mark {
  background: red;
  color: white;
}

Output

<mark> vs Other Text HTML Tags

strong

<strong> is used to indicate text that has strong importance than the surrounding text, such as a warning or error. Semantically, its importance. It appears as bold

b

<b> is very similar to <strong> as it also appears as bold. However, unlike it, it doesn't really…