HTML5における<mark>タグの使い方

<mark>タグは、ユーザーが見やすいように、文章の一部をハイライトする際に使うタグです。今回は、HTML5における<mark>タグの使い方をご紹介します。

HTML5における<mark>タグの使い方

<mark>タグは、文章の一部をハイライトして閲覧しているユーザーに対して一部を目立たせる際に使用するタグです。使い方は、以下のコードで、文章中の目立たせたい範囲を囲むだけです。

<mark>〜</mark>

いかがサンプルコードになります。

<p>文章です。
  <mark>ハイライトです。</mark>
  文章です。
</p>

表示サンプルです。<mark>で囲んだ箇所は、多くのブラウザではデフォルトでこのように表示されます。

スクリーンショット 2016-06-27 11.22.14


しかし、<mark>要素は視覚的な意味以外で、強調や重要の意味を持たないので、強調したい部分に色が変わるからといって使用するのは、避けましょう。

重要性を表したい場合は、<strong>要素を、強調を表したい場合は<em>要素を使うことを勧めます。強調することで文章の意味が変わってしまう場合もあるので、強調や重要は、必ず適した場合のみに使用する必要があるでしょう。

<mark>要素は、検索ワードとの一致を表す場合などに、キーワード部分などで使用されることが多いようです。


イベント

2017/12/05(火)
Design Thinking Square