In 'n' Out

知識を取り込み、そして発信する

HTML文書の基本構造

HTML文書の構成を理解する

HTML文書は、ページの内容だけでなく、ブラウザが正しく解釈するための設定情報も含めて構成されています。
ここでは、HTML文書がどのような要素で組み立てられているかを大まかに説明します。
個々のタグの詳しい使い方は後で詳しく説明するため、ここでは全体の流れをつかむ程度で問題ありません。

HTML文書とは

HTML文書は、次のような並びで構成されます。

コード例

<!DOCTYPE html>
<html>
    <head>
    <!--ページの設定情報-->
    </head>
    <body>
    <!--ブラウザに表示される内容-->
    </body>
</html>

DOCTYPEは、この文書がHTMLで書かれていることをブラウザに伝える宣言です。

html要素は、HTML文書全体をひとつにまとめる最上位の要素です。
ブラウザは、この要素の中に書かれた内容をひとつのWebページとして読み取ります。

head要素は、ページの設定情報を記述する領域です。
タイトルや文字コード、外部ファイルの読み込みなど、画面には直接表示されない情報を記述します。

body要素は、ブラウザに表示される内容を記述する領域です。
文章や画像、リンク、ボタンなど、ユーザーが実際に見る要素はすべてbodyの中に書かれます。

まとめ

HTML文書は、DOCTYPE、html、head、bodyの4つが基礎になっています。
それぞれの役割を理解しておくことで、このあとのタグの理解がよりスムーズになります。