知ってた？ナルホド！
こんにちは！フロントエンドエンジニアの山田です。
お待ちかね（？）第3弾です！
知ってそうで知らないHTML要素について引き続きまとめてまいります。
発信する側としてもHTML書く時に、本当にこの要素でいいのか？不安になり立ち止まって文書構造を考えてみることが増えてきました。
本日の要素はこちら。
- kbd要素
- keygen要素
- mark要素
- meter要素
- samp要素
なんだか操作にまつわる要素が多そうですね。
私はmark要素以外は初耳でしたが、近々使うことになるかもしれません。
1. kbd要素
どうも、TKGっぽい聞こえるこの要素の役割は、ユーザーが入力する内容や操作を表します。
特に、キーボードによる操作のときに使用しますが、音声入力などの場合にも使用します。
なるほど、kbdとはキーボードの略が由来だったのですね。
要素は下記のように、入力するキーをタグで囲みます。
CSSを簡単に綺麗にする方法はCtrl+Aを押した後に、Delキーを押すことです。
2. mark要素
タグで囲んだ文字列にマーカーを引いたように、文字列に背景色をつけてハイライトする要素です。
HTMLは装飾が目的で使用できないため、矛盾が生じたように聞こえてしまいますが、mark要素は文脈の中で関連性や重要性がある要素であることを表します。
ページ内で重要なワードはstrong要素、強調したいワードはem要素、関連性があるワードはmark要素を使います。
いずれにも該当せず、単に装飾としてワードをハイライトしたい場合はspan要素を使います。
また、blockquote要素の中で関心を引きたいワードに対してmark要素を使用することができます。
3. meter要素
その名の通り、メーターを作成します。
規定範囲内での測定値を表すときに使用します。
HTML5より追加された要素ですが、進行状況を表したい場合はprogress要素を使用します。
属性値を使用して、測定値を表示します。そのため、value属性が必須属性となります。
value属性は測定した値を入力します。
min属性は下限値、max属性は上限値を指定します。
low属性は低いと判定する値、high属性は高いと判定する値です。value属性の値が、low属性またはhigh属性の値を超えた場合、グラフの色が変化します。
また、測定値については要素内にテキストで表記する必要があります。
【記入例】
HP 100
MP 25
EXP 90% 【実行結果】
4. samp要素
samp要素は、プログラムやコンピュータが返す何らかのメッセージなどのサンプルを示します。
ウェブサイトで使用する機会はそんなに多くありませんが、アプリケーションやシステムに関するウェブページでは使用することが多そうですね。
特に私たちの場合は、コマンドプロンプトやターミナルでのコマンドの実行時に返ってくるメッセージなどをマークアップするときに使用できます。
尚、以前に弊社のブログ「output要素を使ってBMI数値を表示しよう！」で使用しているoutput要素との違いは、ウェブサイト内でのプログラムの実行結果を出力をする要素です。
5. まとめ
知らない要素もあったのではないでしょうか？
kbd要素やsamp要素はシステムやアプリケーションでのウェブサイトでは使用する機会もあるように思えますが、mark要素に関してはウェブサイトの制作でも早速使用することができそうです。
span要素、em要素、strong要素、mark要素それぞれをちゃんと理解して、適切に使い分けていく必要がありそうです。
単に装飾として色を変えたり、マーカーのようなスタイルにしたい場合にはspan要素が適切かもしれませんが、そのテキストが何か意味がある場合にはそれ以外のタグで適切にマークアップするように心がけたいと思います。
前回までの記事についても、よければご覧ください。
