- 更新日: 2017年03月16日
- 公開日: 2015年12月03日
HTMLの要素を解説！ゼロから始めるHTML/CSS講座Vol03
ゼロから始めるHTML/CSS講座HTMLの基本構造
HTMLの基本構造
HTMLの要素は108ありますが、その中でもHTMLを書く上でほぼ必須となる要素について紹介してきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
上記がHTMLの基本構造となります。内容をテキストエディタで作成し、ブラウザで閲覧してみましょう。
ファイル名:sample.html
DOCTYPE宣言
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
<!DOCTYPEhtml>は、文書がHTML5で作成されたものであることを宣言しており、これは要素ではありません。HTMLはバージョンごとに使用できる要素や属性が厳密に定義されております。
本シリーズでは最新のバージョンであるHTML5を学んでいきます。
html要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
HTML文書のルートを表します。全ての要素はhtml要素の中に記述する必要があります。
lang属性は要素内で使用されている言語(英語、日本語など)を指定します。「ja」は日本語を意味する値で、html要素内で使われている言語が日本語という意味になります。
head要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
HTML文書自体の情報(ヘッダ)を表し、html要素の最初の要素として使用します。
例えばhead要素の中にtitle要素を記述することで、HTML文章のタイトルを設定できます。その他にmeta要素などをヘッダ情報として記載でき、詳細は次に説明します。
meta要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
文章に関する情報(メタデータ)を表します。メタデータとは「情報についての情報」で、例えば文章のタイトルもメタデータの1つです。
meta要素を理解するには様々な知識が必要であり、おそらく現時点では理解が難しいと思いますので、
title要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
HTML文書の表題を表します。head要素の中でしか使用できず、HTML文書の中に1つしか入れてはいけません。
title要素の内容は、ブラウザのタイトルバーに表示されます。
body要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
文章の内容
</body>
</html>
文章の内容を記述する領域を表します。body要素の中は、見出し・段落・ハイパーリンクなど、文章の中身を記述します。
HTMLの基本構造をまとめると以下のようになります。
- DOCTYPE宣言
- HTMLのバージョン情報を宣言する。
- html要素
- HTML文書のルートを表す。全ての要素はhtml要素の中に記述する。
- head要素
- HTML文書自体の情報(ヘッダ)を表す。html要素の最初の要素として記述する。
- meta要素
- 文章に関する情報(メタデータ)を表す。
- title要素
- HTML文書の表題を表す。ブラウザのタイトルバーに要素の内容が表示される。
- body要素
- 文章の内容を記述する領域を表す。
- HTMLの基本構造をイメージしやすいよう、図で示すと次のようになります。
今後HTMLでWebページを作成する際、基本構造は常に記載するようにしましょう。その上で実際にユーザに見せたい文章の内容をbody要素の中に記載していくのが、HTML5の基本となります。
ドキュメントツリー
HTMLは要素の入れ子によって構成されており、これをツリー状に表したものがドキュメントツリーです。ある要素の上位にある要素を親要素、下位にある要素を子要素と呼びます。
「titile要素はhead要素の中でしか使用できない」のように、親子関係が必須となっている要素もあります。
半角スペース・改行・タブ
HTMLタグの直前または直後に入れた半角スペース・改行・タブは、Webページの表示に影響を与えません。これらが複数連続で入っていたとしても、無視して表示されます。
例として、下記HTMLの表示結果はどちらも同じになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<p>半角スペース・改行・タブ</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<p>半角スペース・改行・タブ</p>
</body>
</html>
半角スペース・改行・タブが無視されることを利用し、1つ目のindent.htmlのように書くのが一般的です。
ドキュメントツリーで学んだ通り、HTMLは要素の入れ子で構成されていて、要素には親子関係になっているものがあります。要素の関係が分かるよう、親子関係にある要素は文章の行頭に空白を挿入して先頭の文字を字下げし、見た目を整えます。
この空白挿入による字下げのことをインデントと呼びます。適切にインデントを利用し、人に見やすく書くことを今後心掛けましょう。
なおインデントに半角スペースとタブのどちらを利用するかは好みによりますが、両方を混同するのは良くありません。どちらかに統一するように心掛けましょう。
NEXT LESSON ☛ HTMLの特殊文字
PREV LESSON ☛ CSSの基礎と記述方法
- この記事を書いた人
- CodeCampus編集部
