HTML&CSSコーディング
HTMLファイルの基本構造

ここからはHTMLファイルの基本的な構造について、わかりやすく解説します。

HTMLの基本的な構造

HTMLファイルは、次のような基本的な下地に各タグや属性を追加して構成していきます。

HTML

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

なお、これまでに見てきたhタグやpタグなどは、上記のbodyタグの間に記述します。bodyタグはブラウザで見える部分のコードを記述する領域です。

DOCTYPE宣言

はじめの行の<!DOCTYPE html>は、後に続くコードがHTML5の仕様に基づいていることを表すDOCTYPE宣言です。

DOCTYPE宣言とは、これから記述するHTMLがどのバージョンに基づくものかを宣言するものです。特別な事情がない限り、最新のHTML5を宣言しておきます。

定型なので、その構成については深く考えなくて大丈夫です。

htmlタグ

次に、htmlタグを記述します。文字通り、htmlであることを宣言するタグです。

<html></html>の中には、headタグとbodyタグを入れます。

また、htmlタグには、要素の言語を指定するlang属性を設定するのがほぼ必須です。日本語の場合はlang="ja"と記述します。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>

  </head>
  <body>

  </body>
</html>

headタグ

headタグの中には、そのHTMLファイル自体の情報を記述します。このような情報はメタデータといい、ブラウザのウィンドウに表示されない内部的な記述です。

ブラウザに対して参照するファイルやデータを伝えたり、検索エンジン（クローラー）に対してサイト情報を伝えたりする大切な役割があります。

HTML

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

  </body>
</html>

<meta charset="">

ここには文字コードを設定します。通常は「utf-8」です。

設定しておかないと文字化けすることがあります。

headタグ内でもなるべく上に記述します。

<meta name="description" content="">

通称、メタディスクリプション。ページの概要を記述します。

検索エンジンで検索ヒットしたときに、タイトルの下部に表示されていましたが、最近ではメタディスクリプションが表示されるとは限りません。

また、かつてSEO的に重要視されていましたが、最近ではSEO的効果はあまりないと言われています。

<title></title>

タイトルタグには、そのページのタイトルを記述します。

検索ヒット時のアンカーテキスト（リンクのあるテキスト）やブラウザのタグ、ブックマークのタイトルなどに表示されます。

SEO的にいまも重要視されているので、適度にキーワードを入れるべきです。

参考1：本サイトの検索ヒット時

参考2：本サイトトップページのブラウザ表示時

bodyタグで見える部分を作る

bodyタグの中には、ブラウザのウィンドウに表示される要素を記述します。

基本的にここから先は自由です。hタグやpタグを使って、ページの見える部分を作ってみます。

HTML

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

DEMO

次のページでは、オーソドックスな例として、ページをヘッダー、メイン、フッターに分けるケースを解説します。