HTMLのページ構造とは

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>: クライアントサイドスクリプトをページに組み込むために使用され、多くの場合はページの最後に配置されます。

これらの要素を組み合わせることで、ウェブページの基本的な構造が形成され、ブラウザはこれを解釈してユーザーに視覚的なページとして表示します。

SNSでもご購読できます。

コメントを残す

*