最近知ったHTMLタグ

Last updated at 2019-12-10Posted at 2019-12-10

こちらはGEEK Inc. Advent Calendar 2019 10日目の記事です。

#はじめに
こんにちは、初投稿です。

マークアップする上では正しい文書構造で記述する必要がありますが、
業務で初めて知るタグがあったので、
色々調べた中で知っておいた方が良さそうなタグを少しピックアップしてまとめました。

【参考にさせていただいたページ】

https://developer.mozilla.org/ja/docs/Web/HTML/Element
https://www.w3schools.com/tags/tag_address.asp

<address>

連絡先の電話番号・メール・住所などを含めることを示す要素
・要素の中のテキストは斜体で表示される。

例

<address>
  <a>TEL: 080-xxxx-xxxx</a>
  <a>メールアドレス: xxx@mail.com</a>
</address>

ドキュメントから削除されたテキストであることを示す要素。取り消し線が引かれる
・逆に、追加された文字列を示すのは<ins>で、こちらは下線が引かれます。

例

<p>
  吾輩は<del>犬</del>である。
<p>

↓

吾輩は犬である。

なお、CSSでも以下の記述で取り消し線を引けるようです。

text-decoration: line-through;

引用・転載であることを示す要素
・cite属性により引用元の文書のURL を、 <cite> 要素により引用元の文書のタイトルなどを明示可能。

例

<blockquote cite="https://example.com/index.html">
  <p>我輩は猫である。名前はまだ無い。</p>
</blockquote>

中の要素が図表やイラストなどのコンテンツであることを示す要素
・figcaptionタグにより、そのfigureのキャプションをつけることが出来る。

例

<figure>
  <img src="graph.jpg" alt="図">
  <figcaption>これは図です。</figcaption>
</figure>

時刻や日付であることを示す要素
・datetime属性で、日付や時刻を指定可能で、ここにはコンピュータで読み取れる正確な日付を入れることが出来る。

例

<time datetime="2019-12-10T09:00">２０１９年12月１０日午前9時</time>

#終わりに

調べてみると色々あって改めて勉強になりました。
HTMLタグは新規追加や廃止やルールの変更がたまにあるので逐一取り入れていきたいです。

GEEKのアドベントカレンダー次回は、フロントエンドチームのtanigomeさんです！
GEEK Inc. Advent Calendar 2019 - Adventar