HTML&CSSコーディング
bodyタグ内の構造化

前回のページでは、HTMLファイルの基本的な骨組みについて解説しました。

ここでは、その中でもブラウザのウィンドウに表示される部分であるbodyタグ内の構成について、わかりやすく解説します。

headerタグ、mainタグ、footerタグ

まずはおさらいとして、HTMLファイルの基本的な骨組みは次のとおりです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="HTMLタグの使い方を解説">
    <title>HTMLファイルの構造</title>
  </head>
  <body>

  </body>
</html>

bodyタグの中にそのままhタグやpタグを記述することもできますが、実際のウェブページにはさまざまな情報が整理されて表示されています。

そのため、まずはウェブページの区画整理を行います。

モダンなウェブサイトの基本構造として、ヘッダーエリア、メインコンテンツエリア、フッターエリアに分けられます。

それぞれ対応するタグ、つまりheadrタグ、mainタグ、footerタグをmainタグ内に設置してみます。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="HTMLタグの使い方を解説">
    <title>HTMLファイルの構造</title>
  </head>
  <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>
</html>

DEMO

上記例のリンク先では、わかりやすくなるようにheaderタグ、mainタグ、footerタグに高さを設定して、色分けしています。

各タグは、一般的に次のように使われます（あくまで一般論であって、自由です。）。

headerタグ

headerタグ内にはロゴやメニュー（ナビゲーション）などが設置されます。なお、headタグとheaderタグは別物なので、間違えないように気をつけてください。

mainタグ

mainタグ内にはそのウェブページのメインとなるもの、そのウェブページ固有の情報が設置されます。

例えば、記事を構成するhタグやpタグなどは、mainタグ内に記述します。

footerタグ

footerタグ内には付加的な情報を設置します。例えば、利用規約やプライバシーポリシー、サイトマップ、問い合わせフォームなどのアンカーテキスト、運営元情報などです。

記事ページをコーディング

具体例として、記事を掲載するウェブページをコーディングしてみます。

便宜的にdivタグを使っていますが、これはボックス（四角い箱）を作るものです。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="HTMLタグの使い方を解説">
    <title>HTMLファイルの構造</title>
  </head>
  <body>
    <header>
      <div>サイト名やロゴ</div>
    </header>
    <main>
      <h1>HTMLファイルの構造</h1>
      <p>HTMLファイルは、まずDOCTYPE宣言をします。</p>
      <p>DOCTYPE宣言の後にはHTMLタグが続きます。</p>
      <h2>htmlタグに入るもの</h2>
      <p>htmlタグにはheadタグとbodyタグが入ります。</p>
      <h3>headタグ</h3>
      <p>headタグにはメタデータを記述します。</p>
      <h3>bodyタグ</h3>
      <p>bodyタグに記述するものはブラウザで表示されます。</p>
      <h2>lang属性の設定</h2>
      <p>htmlタグにはlang属性の設定が必要です。</p>
    </main>
    <footer>
      <div>利用規約のアンカーテキストや運営元情報</div>
    </footer>
  </body>
</html>

DEMO