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

最終更新日:2017年11月02日  (初回投稿日:2011年09月01日)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

整理しよう!<strong> と <em> と <mark>

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

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

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

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

次回予告

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

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

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

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

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

Re: はじめまして

くるみさん、ありがとうございます!

Re: No title

あ、ホントだ〜!! 酢って…なんやねん。
ありがとうございます。さっそく直しました。恥ずかしい〜。
またなんかありましたら教えてください。よろしくお願いいたします〜
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.