知っておく価値のある珍しいHTMLタグ

以下はChristopher Kadeによる記事、Unusual HTML tags worth knowingの日本語訳です。

なお斜体は訳者(私だ)による補足です。

Unusual HTML tags worth knowing

正しいHTML要素を使用することは、私たちの多くが考えている以上に重要です。

Semantic HTMLとして知られるそれは、ページにデザインだけではなく、意味を持たせることができます。
<p>要素には段落が含まれており、それがどのように見えるべきかを誰もが知っています。
ページの内容を検索エンジンに伝えるのに役立つだけではなく、スクリーンリーダーが正確に仕事を行うためにも役立ちます。

この記事では、日常的に使うのに便利な、あまり知られていないタグを幾つか紹介します。

abbr

MDN

下記例のように、略語を提供します。
title属性、およびインラインテキストを使用し、読者になじみのない省略形を定義することができます。

See the Pen <abbr> example by Christopher Kade (@christopherkade) on CodePen.

dfn

MDN

文中で説明されている単語の定義に対して使用する要素です。
親要素の<p>、<dt>/<dd>、<section>に入る範囲がその単語の定義と見做されます。

See the Pen <dfn> example by Christopher Kade (@christopherkade) on CodePen.

address

MDN

連絡先を提供するために使用するタグです。
Lars De Richterのコメントにあるように、全ての種類の連絡先について使うものではないことに留意してください。

addressタグによって提供される情報には、ドキュメントのメンテナの名前、Webページ、メールアドレス、住所、電話番号などがあります。
このタグを、全ての住所やメールアドレスなどに使用すべきではありません。3
ドキュメントの担当者についての情報を提供するために予約されるべき(SHOULD)です。

See the Pen <address> example by Christopher Kade (@christopherkade) on CodePen.

cite

MDN

創作物の引用に使用するタグです。

引用文にはblockquoteタグを使い、その出典へのリンクにciteタグを使う。

See the Pen <cite> example by Christopher Kade (@christopherkade) on CodePen.

del

MDN

文書から削除されたテキストはこれで囲みます。
このタグを使うことによるアクセシビリティの問題点については注意する必要があります。

See the Pen <del> example by Christopher Kade (@christopherkade) on CodePen.

hgroup

MDN

このタグは、ドキュメント内の複数の見出し(h1からh6タグ)をグループ化します。
このようにすることで、各hタグに個別の子ノードを持たせる必要はありません。

See the Pen <hgroup> example by Christopher Kade (@christopherkade) on CodePen.

hgroup要素はW3C仕様からは削除されましたが、WHATWG仕様には残っています。
しかし、多くのブラウザでは部分的に実装されており、なくなることはないでしょう。
注意事項を参照のうえ、慎重に使用してください。

W3CとWHATWGはWHATWGに統合されたので、存続するかもしれない。

ins

MDN

文書に後から追加されたテキストを表します。
これは、GitHubが置換されたコード行を強調表示するのによく似ています。

See the Pen <ins> example by Christopher Kade (@christopherkade) on CodePen.

Wrapping up

Web開発者の多くが知らないような未知のHTMLはたくさん存在します。
見た目と構造を同じレベルに置くことで、より良く、より包括的なWebページを構築することができます。
必要なのは練習だけです。

これらのタグのいくつかでも、あなたのやりたいことに役立つことを願っています。

この記事を読んでくれてありがとう。
Twitterで@christo_kadeをフォローしてくれれば、私の最新記事と、おかしなサイドプロジェクトをお教えします。

コメント欄

「よいTIPSだった。」
「どのタグも知らなかったよ。参考になる。」
「hgroupは勧めないで。MDNに仕様上の注意が書いてあるのを見つけたはずです。」「ありがとう修正した。」
「よい記事だったが、addressタグについては非常に良くある間違いをしてる。ここで明快に解説されてるよ。」「ありがとう修正した。」
「 <mark>Highlight text</mark>」
「<marquee>どこ！？」

感想

海外にもmarquee厨はおったか。

最近はもう、適当に雛形引っ張ってきてCSSフレームワーク載っけてはい完成、なんか困ったらdivにclass=XXしとけ、みたいなかんじになってしまっていて、正しいタグを意識しなくなってしまって久しいので、たまには初心に帰るのもよいですね。