さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】mark要素について

Pocket
LINEで送る

HTML5におけるmark要素の使用例を紹介します。

mark要素は文書内の該当テキストをハイライトさせて強調表示させる要素です。strong要素やem要素のように、その部分を強調させることが目的ではなく、ユーザが参照しやすいように目立たせることが目的です。
具体的には、検索結果で検索キーワードとなる部分、パンくずリストでの現在のページ、引用した文章での主要コンテンツと関連のある部分等で使用されます。

【使用例】

<h1>HTML5とは</h1>
<p><mark>HTML5</mark>(エイチティーエムエル・ファイブ)とは HTMLの5回目に当たる大幅な改定版である。表記はHTMLと5の間にスペースを含まない[1]。XML の文法で記述する場合、XHTML5と呼ばれる。<br>
<mark>HTML5</mark>はWHATWGによって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日にドラフト(草案)が発表された。</p>

その他の例として、Google検索結果での「キャッシュ」を参照すると、検索で使用したキーワードがハイライトされています。このように他の文章と関連があり、ユーザに対して強調して表示させたいテキストに使用します。

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容