HTMLの基本構成（!DOCTYPE、html、head、body）

カテゴリ：HTML編

index.htmlファイル

Webサーバーでは初期設定でDirectoryIndexとしてindex.htmlが指定されており、index.htmlはURLに指定しなくても存在すれば自動で見つけて表示してくれます。

例えば

http://example.com/index.html

は

http:/example.com/

で表示できます。

そのため、トップページはindex.htmlファイルに記述します。
※サーバーサイド言語によってindex.phpやindex.jspである場合もありますが今の時点では気にする必要はありません。

HTMLファイルの基本構成は以下となり、htmlタグ内は大きくヘッダ部と本文部に分かれます。

<!DOCTYPE html>
<html>
    <head>
        ヘッダ
    </head>
    <body>
        本文
    </body>
</html>

DOCTYPEはドキュメントタイプの略でhtmlタグの前に指定します。
HTML5以前は、DTD（Document Type Definition：マークアップ言語の文書型定義）のパスを指定していました。
HTML5では簡略化され、以下のように、単にhtmlを指定します。

<!DOCTYPE html>

htmlタグはHTML文書であることを表し、HTML文書全体を囲みます。
つまりHTML文書はhtmlタグから始まり、HTML文書のルート要素（最上位の要素）となります。

<html>
HTML文書をここに書く
</html>

なお、以下のようにlang属性で使用言語（日本語の場合ja）を指定する事もできますが、目的はプログラムによる自動翻訳を助ける事です。

<html lang="ja">

指定すべきか否かは意見が分かれます。
※ちなみにGoogle検索エンジンは言語の判別にこのlang属性は見ていません。

html要素は、HTML文書のルートを表します。
著者は、ドキュメントの言語を指定して、ルートhtml要素にlang属性を指定することを推奨します。これは、音声合成ツールを使用して、使用する発音、使用するルールを決定するための翻訳ツールなどを決定します。

headタグはHTML文書のヘッダ部であることを表します。
ヘッダ部はtitleやmetaタグなどWebページには表示されない情報を記述します。

<head>
    <title>私のホームページのトップ</title>
    <meta name="description" content="私のホームページ">
</head>

head要素は、ドキュメントのメタデータのコレクションを表します。

bodyタグはHTML文書の本文（本体）であることを表します。
bodyタグ内にWebページに表示したい文書を記述します。

<body>
    <h1>私のホームページ</h1>
    <p>・・・</p>
</body>

body要素はドキュメントの内容を表します。
適合する文書では、body要素は1つだけです。

意外かもしれませんが、HTML5ではhtml、head、bodyタグを省略できます。
つまり記述されたタグを見て、Webブラウザ側で自動判別するのです。

省略した場合、以下のようになります。

<!DOCTYPE html>
    <title>私のホームページのトップ</title>
    <meta name="description" content="私のホームページ">
    <h1>私のホームページ</h1>
    <p>・・・</p>

※構造が非常に分かりにくいためお勧めしません。本サイトの解説ではこれらは省略しません。

公開日時：2017年12月29日 14:27:59
最終更新日時：2022年03月12日 07:26:39