HTML5のmark要素で該当の文章をハイライトして目立たせる

2018年9月21日HTMLHTML5,mark,ハイライト,要素

HTML5で新しく追加された要素にmark要素があります。

これは、囲んだ部分のテキストをハイライトして目立たせる効果がありますが、em要素やstrong要素のようにその部分を強調する(ことをブラウザや検索エンジンに伝える)効果はありません。

実際にコードを書いてみて、それがブラウザ上でどのように表示されるのかを確認してみます。

HTML5で新しく追加されたmark要素によりハイライトされたテキストは、背景色黄色で表示される

<mark>強調したいテキスト</mark>はchromeで背景色黄色で表示される。

上記が実際のGoogle Chromeブラウザでhtmlファイルを開いた時の表示になります。

注意したいのが、markタグを使ってもSEO的に強調する効果は一切無いという点

emタグやstrongタグは、SEO的に囲んだ文字列を強調する意味があるため、不用意に乱用するのはNGですが、markタグはそういう効果は無い(あくまでブラウザ上の表示を変えるだけ)ので、安心して使って大丈夫です。

2018年9月21日HTMLHTML5,mark,ハイライト,要素