HTML(HyperText Markup Language)のページ構造は、ウェブページのコンテンツとデザインを定義するための要素(タグ)で構成されます。
以下は、基本的なHTMLページの構造です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
<!-- ここにはスタイルシートのリンクやスクリプトなど、他のメタ情報が含まれます -->
</head>
<body>
<!-- ページのヘッダー -->
<header>
<!-- ロゴ、ナビゲーションバーなどがここに含まれる -->
</header>
<!-- メインコンテンツ -->
<main>
<!-- ページの主要なコンテンツや記事がここに含まれる -->
<article>
<!-- 記事やメインのテキストがここに含まれる -->
</article>
<section>
<!-- 関連するコンテンツのセクション -->
</section>
<aside>
<!-- サイドバーに関連するコンテンツやウィジェット -->
</aside>
</main>
<!-- ページのフッター -->
<footer>
<!-- 著作権情報、連絡先情報などがここに含まれる -->
</footer>
<!-- その他のスクリプト -->
<script src="javascript.js"></script>
</body>
</html>
各セクションの役割
<!DOCTYPE html>
: ドキュメントタイプ宣言で、ブラウザにHTML5文書を使用していることを伝えます。<html>
: ページのルート要素で、ページ全体のコンテンツを囲みます。<head>
: ページのメタデータ、スタイルシートのリンク、スクリプトなどを含むセクションで、表示されるコンテンツではなく、文書の設定に関する情報を提供します。<body>
: 実際にブラウザに表示されるページのコンテンツを含みます。<header>
: 通常はロゴ、ナビゲーションメニューなどのウェブページのヘッダー部分を定義します。<main>
: ページの主要なコンテンツが含まれ、<article>
、<section>
、<aside>
などの要素を含むことがあります。<article>
: 独立したコンテンツを表すために使用され、ブログの投稿やニュース記事などがこの要素に囲まれます。<section>
: 関連するコンテンツをまとめるために使用され、たとえばFAQや章など、文書内のセクションを表します。<aside>
: サイドバーに置かれるコンテンツや、本文とは直接関係がないが補足的な情報を含む要素です。<footer>
: フッター部分を定義し、通常は著作権情報、連絡先情報、サイトマップへのリンクなどを含みます。<script>
: クライアントサイドスクリプトをページに組み込むために使用され、多くの場合はページの最後に配置されます。
これらの要素を組み合わせることで、ウェブページの基本的な構造が形成され、ブラウザはこれを解釈してユーザーに視覚的なページとして表示します。