Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@kai_ika

最近知ったHTMLタグ

こちらは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>

<del>

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

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


吾輩はである。

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

text-decoration: line-through;

<blockquote>

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

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

<figure>

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

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

<time>

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

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

終わりに

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?