HTML基本構造 #初心者

HTMLの基本構造を解説します。

基本的には以下のような構造になっているはずです。

sample.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML基本構造</title>
    </head>
    <body>
        文章の内容
    </body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>は、文書がHTML5で作成されたものであることを宣言しています。これは要素ではありません。

html要素

HTML文書のルートを表します。全ての要素はhtml要素の中に記述します。

lang属性は要素内で使用されている言語(英語、日本語など)を指定します。
「ja」は日本語を意味する値で、html要素内で使われている言語が日本語という意味になります。
ちなみに英語なら「en」ドイツ語なら「de」というように何語かによって決められています。

head要素

HTML文書自体の情報(ヘッダ)を表し、html要素の最初の要素として使用します。

例えば、head要素の中にtitle要素を記述することで、HTML文章のタイトルを設定できます。その他にmeta要素などをヘッダ情報として記述でき、詳細は後述いたします。

meta要素

文章に関する情報(メタデータ)を表します。メタデータとは「情報についての情報」で、例えば文章のタイトルもメタデータの1つです。

meta要素を理解するには様々な知識が必要であり、おそらく現時点では理解が難しいと思いますので、はHTML文章に必要なおまじないぐらいに、現時点では覚えておいてください。

title要素

HTML文書の表題を表します。head要素の中でしか使用できず、HTML文書の中に1つしか入れてはいけません。

title要素の内容は、ブラウザのタイトルバーに表示されます。

body要素

文章の内容を記述する領域を表します。body要素の中は、見出し・段落・ハイパーリンクなど、文章の中身を記述します。

HTMLの基本構造まとめ

DOCTYPE宣言
HTMLのバージョン情報を宣言する。

html要素
HTML文書のルートを表す。全ての要素はhtml要素の中に記述する。

head要素
HTML文書自体の情報(ヘッダ)を表す。html要素の最初の要素として記述する。

meta要素
文章に関する情報(メタデータ)を表す。

title要素
HTML文書の表題を表す。ブラウザのタイトルバーに要素の内容が表示される。

body要素
文章の内容を記述する領域を表す。