​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ファイルの基本構成は以下となり、htmlタグ内は大きくヘッダ部と本文部に分かれます。
<!DOCTYPE html>
<html>
    <head>
        ヘッダ
    </head>
    <body>
        本文
    </body>
</html>

!DOCTYPE

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

html要素

htmlタグはHTML文書であることを表し、HTML文書全体を囲みます。
つまりHTML文書はhtmlタグから始まり、HTML文書のルート要素(最上位の要素)となります。
<html>
HTML文書をここに書く
</html>
なお、以下のようにlang属性で使用言語(日本語の場合ja)を指定する事もできますが、目的はプログラムによる自動翻訳を助ける事です。
<html lang="ja">
指定すべきか否かは意見が分かれます。
※ちなみにGoogle検索エンジンは言語の判別にこのlang属性は見ていません。

W3Cによるhtml要素の説明

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

head要素

headタグはHTML文書のヘッダ部であることを表します。
ヘッダ部はtitleやmetaタグなどWebページには表示されない情報を記述します。
<head>
    <title>私のホームページのトップ</title>
    <meta name="description" content="私のホームページ">
</head>

W3Cによるhead要素の説明

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

body要素

bodyタグはHTML文書の本文(本体)であることを表します。
bodyタグ内にWebページに表示したい文書を記述します。
<body>
    <h1>私のホームページ</h1>
    <p>・・・</p>
</body>

W3Cによるbody要素の説明

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

HTML5ではhtmlやhead、bodyまでもが省略できる

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

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

<!DOCTYPE html>
    <title>私のホームページのトップ</title>
    <meta name="description" content="私のホームページ">
    <h1>私のホームページ</h1>
    <p>・・・</p>
※構造が非常に分かりにくいためお勧めしません。本サイトの解説ではこれらは省略しません。

公開日時: 2017年12月29日  14:27:59

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

HTML編に戻る

「HTML編」に関するTips

「HTML編」に関するTipsはありません。

このページのトップに戻る