MENU

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

【PR】アフィリエイト広告リンクを含みます。

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

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

文字を強調するem,strong,b要素をSEO的に正しく使い分ける

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

目次

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

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

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

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

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

正しいアンカーリンクの使い方を知り、見出しタグを利用した目次を作る

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次