4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTML bodyの基本構成

Last updated at Posted at 2023-05-16

Webコンテンツの区画の整理

WebページのコンテンツはHTMLのbody要素内にhタグやpタグをそのまま利用して記述することができる.しかし,コンテンツが複雑になり,要素の数が増えるとCSSやJSの実装が難しくなる場合がある.このような場合は,Webページの区画整理を行うことによって,文書構造をわかりやすくできる.

モダンなWebサイトの基本構造

モダンなWebサイトの基本構造として以下の3つのエリアで構成されることが多く,HTMLで記述する際も同様に分ける必要がある.

  • ヘッダーエリア
  • メインコンテンツエリア
  • フッターエリア

区画整理に利用されるタグ

HTML5(HTMLの改訂第5番)から登場した新しいタグを利用することによってコンテンツ内の整理がしやすくなった.コンテンツの整理に使用するため,全てbody要素内で使われる.

image.png

1.header
Webサイトにおけるヘッダーエリアを明示するタグ.
2.nav
NavはWebサイト内でナビゲーションリンクであることを明示するタグ.
ナビゲーションリンクとはページ内の指定部分や他ページへの誘導を行うもの
3.main
HTML文書内の主要コンテンツであることを明示し,メインコンテンツエリアを担当するタグ.同一タグ内に1つしか使用することができない.
4.section
Webサイト内で文章のまとまりを明示するタグ.基本的に小要素に見出し(<h1>〜<h6>タグ)を持つことが推奨されている.
5.article
ブログ記事のように自己完結するコンテンツを明示する.<article>タグは子要素に見出しを含む形で記述する.<article>タグに<article>タグを配置することも可能
6.aside
サイドバーのように補助的なコンテンツを明示するタグ.広告,人気記事,新着記事,SNSシェアボタンなどのコンテンツを含んだ形で使用する.
7.footer
Webサイト内のフッターエリアを明示するタグ.コピーライトなどを書くのが一般的.

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?