ほんっとにはじめてのHTML5とCSS3：[22] HTML5の新要素 mark を使ってみよう

[22] HTML5の新要素 mark を使ってみよう

最終更新日：2017年11月02日　（初回投稿日：2011年09月01日）

今回は、HTML5から新たに加わった 要素を使ってみましょう。

使用する要素	`<mark> 〜 </mark>`

要素は、前回の と似ていますが、下記のように区別されます。

・は「重要性」を表す。すっごい重要だとアピールする所に使用。
・は「強調」を表す。部分的に「意味あいを強める」ために使います。
・は読者に「注目して欲しい部分」を表します。

mark要素は「注目させたい」ところに使う

 は重要でも強調でもなく、ほかの箇所に関連づけられている文章の1部分を、読者に注目して欲しいときに使います。

「mark（マーク）」は日本語でも「マークする」とかって使いますね。「注目する」とか「印を付ける」って意味です。

ブラウザのデフォルトスタイルでは、ハイライト表示（蛍光マーカーで塗ったみたいな表示）になります。

文章の注目させたいテキストを指定します。

HTMLはこちらです。とで囲むだけでとても簡単。

文章の<mark>注目させたいテキスト</mark>を指定します。

mark要素って具体的にどこに使う？

要素は具体的に、次のようなところに使われています。
せっかくなので、要素を使って表示してみます。

検索スクリプトが出した検索結果内で、該当キーワードをハイライトさせるために使う。
引用文の中で、特に注目して欲しいテキストに使う。
コンピューターのプログラムコードで特に注目させたい部分をハイライトさせるために使う。
「パンくずリスト」で現在地をハイライトさせる。

具体例を見ると、なんとなくわかってきますよね。
検索キーワードを書いて、表示されたページで、自分が書いたキーワードが太字になったりハイライトになったりしてますよね。あれは 要素で特化されてたんですね。

2番目の「引用文の中で特に注目して欲しいテキストに」っていうのは、紙の文書で注意したいところに「蛍光マーカーペン」使って目立たせる、あの感覚です。
これは3番目のプログラムコードでも同じことですね。

4番目の「パンくずリスト」とは、よくサイトの上の方にある「HOME > 親ページ > 子ページ > 孫ページ」と階層を示しながら現在位置を表示しているアレです。
（ヘンゼルとグレーテルが由来です。パンくずをちぎって道しるべにしたアレ）

整理しよう！ と と

それじゃ、3つの要素の使い分けを整理してみましょう。

・警告文など重要性の高いテキストには 要素
・意味合いを強調したいテキストには 要素
・重要でも強調でもなく、読者の注目を引きたいテキストには 要素

以前（HTML4 や XHTML1 まで）は、強調のための要素（ と ）の定義の仕方がかなりいいかげんだったので、HTML5からは「きちんと使い分けよう」ということになり、「重要でも強調でもない、ただ注目してもらいたい箇所には mark を使おう」ということで追加されたのだろうと思われます。
それだけに strong と em をしっかりと使い分けないと、markも使いこなせない…ってことですね。

ブラウザのデフォルトでの見た目の様子は、
●要素は「太字」
●要素は「イタリック」
●要素は「背景が黄色」
になります。
CSSで文字の色や大きさなどを変えて、さらに分かりやすくするとイイですね。

次回予告

いかがでしたか？
 は何だか説明が感覚的ですね。
いろいろ資料を読みましたが、ほとんどこんなかんじで「感じ分けてね」ということでした。
私は一応「感じ分けた感（？笑）」があるんですが、みなさんいかがでしょうか...？

さて次回なんですが、
HTML4 や XHTML1 では使えてた <big>（文字を大きくする）、（書体やフォントサイズや文字色を変える）、<strike>（取り消し線）など、見た目の指定をする要素は、HTML5から削除されました。
「見た目はCSSで整える」ってルールができたからです。

ですが、（文字を小さく）、（太字）、（イタリック）は残ってるんです。意外ですね。
これは、見た目以外の新しい役目を与えられたから。
というわけで次回は、要素、要素、要素 についてです。

<big> <strike> のように「今まであったけど HTML5から廃止された要素」もあります。
これらは「（ちょっとメモ）HTML5で廃止される要素一覧」でまとめていますのでご覧ください。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。