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

以下は[Christopher Kade](https://dev.to/christopherkade)による記事、[Unusual HTML tags worth knowing](https://dev.to/christopherkade/unusual-html-tags-worth-knowing-3gbk)の日本語訳です。

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


# Unusual HTML tags worth knowing

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

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

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


### abbr

[MDN](https://developer.mozilla.org/docs/Web/HTML/Element/abbr)

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="christopherkade" data-slug-hash="EzpMLZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;abbr&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/EzpMLZ/">
  &lt;abbr&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### dfn

[MDN](https://developer.mozilla.org/docs/Web/HTML/Element/dfn)


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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="christopherkade" data-slug-hash="WBKmaV" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;dfn&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/WBKmaV/">
  &lt;dfn&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### address

[MDN](https://developer.mozilla.org/docs/Web/HTML/Element/address)

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

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="christopherkade" data-slug-hash="EzpMBX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;address&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/EzpMBX/">
  &lt;address&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### cite

[MDN](https://developer.mozilla.org/docs/Web/HTML/Element/cite)

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

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="christopherkade" data-slug-hash="QRBPGN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;cite&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/QRBPGN/">
  &lt;cite&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### del

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)

文書から削除されたテキストはこれで囲みます。
このタグを使うことによる[アクセシビリティの問題点](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del#Accessibility_concerns)については注意する必要があります。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="christopherkade" data-slug-hash="pmZBeN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;del&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/pmZBeN/">
  &lt;del&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


### hgroup

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup)

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="christopherkade" data-slug-hash="mYjgMZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;hgroup&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/mYjgMZ/">
  &lt;hgroup&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

hgroup要素はW3C仕様からは削除されましたが、WHATWG仕様には残っています。
しかし、多くのブラウザでは部分的に実装されており、なくなることはないでしょう。
[注意事項](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#Usage_notes)を参照のうえ、慎重に使用してください。

*W3CとWHATWGはWHATWGに統合されたので、[存続する](https://html.spec.whatwg.org/#the-hgroup-element)かもしれない。*


### ins

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins)

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="christopherkade" data-slug-hash="gJjyjb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="&amp;lt;ins&amp;gt; example">
  <span>See the Pen <a href="https://codepen.io/christopherkade/pen/gJjyjb/">
  &lt;ins&gt; example</a> by Christopher Kade (<a href="https://codepen.io/christopherkade">@christopherkade</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## Wrapping up

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

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

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


# コメント欄

「よいTIPSだった。」
「どのタグも知らなかったよ。参考になる。」
「hgroupは勧めないで。[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup#Usage_notes)に仕様上の注意が書いてあるのを見つけたはずです。」「ありがとう修正した。」
「よい記事だったが、addressタグについては非常に良くある間違いをしてる。[ここ](http://html5doctor.com/the-address-element/)で明快に解説されてるよ。」「ありがとう修正した。」
「 `<mark>Highlight text</mark>`」
「`<marquee>`どこ！？」


# 感想

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

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