HTML5で意味を持つタグ主なものまとめ

HTMLとCSS

段落タグ <p>~</p> には、文章や画像などを含めることが出来る、などのようにHTML5では意味を持つタグが多数存在します。

この記事では、HTML5において意味を持つタグをブロックレベル要素インライン要素に分けて解説します。

ブロックレベル要素とインライン要素に関してはこちら

ブロックレベル要素で意味を持つタグ

タグ名意 味
headerヘッダー部分をグループ化して記述する
footerフッター部分をグループ化して記述する
navページのナビゲーション部分(ページ内リンク先)などをグループ化して記述する
articleブログの1つの記事のイメージ、新聞記事や口コミ情報のまとまりなど
参考:<article> – MDN
sectionコンテンツの1まとまり、ブログ記事内の1つの節などを表す
参考:<section> – MDN
asideページのサイドバーのイメージ、ページの本題とは関係ないものをグループ化する
参考:<aside> – MDN
div汎用のブロックレベル要素、上記タグに属さないものを扱うことが基本だが、現実には上記の代わりに用いられることも多い
addressそのページまたはその記事に対する連絡先
例)
<p>連絡先</p>
<address>mymail@emanon.com</address>

インライン要素で意味を持つタグ

タグ名意 味
strong非常に重要、緊急
small著作権表示や法的表記のような、注釈や小さく表示される文
例)<p><small>Copyright 2020 dianxnao.com</small></p>
cite書籍名、著作者名、URLなどの創作物のうちの1つを含める
例)<p><cite>星新一著</cite></p>
i外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列

コメント

タイトルとURLをコピーしました