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>: クライアントサイドスクリプトをページに組み込むために使用され、多くの場合はページの最後に配置されます。
これらの要素を組み合わせることで、ウェブページの基本的な構造が形成され、ブラウザはこれを解釈してユーザーに視覚的なページとして表示します。