様々なタグを使って文書の構造を見やすくしよう【HTMLを書いていこう】

目次

文書の構造がわかりやすくなる様々なタグの使い方について

意味のあるまとまりに使えるタグ

前回はページ内へリンクを作る方法について見てきました。

詳しくは『ページ内へのリンクを作る方法について【HTMLを書いていこう】

意味のあるまとまりにするために区切るタグについて見ていきましょう。

サイトを視覚的に見やすくするためにも重要なのでしっかり学んでいきましょう。

まずheaderとfooterです。

headerは主に導入的なコンテンツでfooterは主に締めくくりのコンテンツで著作権情報を書くための箇所でもあります。

ただ、必ずしも最初や最後に配置されるコンテンツではありませんのであくまで導入や締めくくりの意味合いがある箇所に使っていきましょう。

navタグはページの主要なナビゲーションに使われます。

メニューリンクを作るときに活躍するコンテンツです。

mainタグはコンテンツの主要なコンテンツを囲います。

主要なコンテンツという制約があるのでページ内で1つしか使えないので覚えておきましょう。

asideタグは関連が薄いコンテンツに使います。

本文に関係のない内容を掲示する場合に使います。

主にサイドバーにつける広告などで使われます。

articleタグとはメディアの記事など独立したコンテンツで使われることが多く。

具体的にはニュースの記事やブログなどで記事が個別で独立している箇所をそれぞれ囲う形になります。

sectionタグは凡用的に使えるタグでどのタグにも分類できないけどひとくくりのまとまりにしておきたい時に使います。

sectionタグはmainタグの中で子要素として使ったりもするので頻繁に使います。

以上





この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次