【HTML】基本構造を確認

Webサイトを作成する上で必要となるHTML文書の基本構造をまとめます。

HTML文書の全体像

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <h1>見出し</h1>
        <p>段落</p>
    </body>
</html>

ひとまず文字が表示される程度の、非常にシンプルなものです。
ここから様々な要素を追加していくことで、私達が普段見ているようなWebサイトになります。

HTML文書の基本

要素とタグ

HTML文書は複数の要素によって構成されています。
要素は開始タグと終了タグ(閉じタグ)、それに挟まれるテキスト(コンテンツ)によって構成されています。

<h1>見出し</h1>

上の例で言えば、<h1>が開始タグ、見出しがコンテンツ、</h1>が終了タグ、全て合わせて要素となります。
要素によっては終了タグが省略可能なものもあります。

空要素

<img src="img/a.jpg" alt="image">

コンテンツも終了タグも存在しない要素を空要素といいます。

参考：空要素

要素の入れ子構造

それぞれの要素は入れ子構造で配置していくことになります。

<p>入れ子<span>構造</span>の例</p>

閉じる順番を間違えないように注意する必要があります。
必ず内側の要素から閉じるようにします。

下の例のように配置してはいけません。

<p>こういう<span>配置は</p>NG</span>

属性

要素には開始タグ内で属性を付与することが出来ます。
この例では、html要素の中で、この文書では日本語を使用すると指定をしています。

<html lang="ja">

それぞれの要素には使用できる属性が決まっています。

参考： HTML属性リファレンス

大枠の各要素について

DOCTYPE宣言

<!DOCTYPE html>

まず初めにこの文書はHTMLであるということと、そのバージョンを宣言します。
HTML5以降であればバージョンの指定も必要なく、この1文だけで大丈夫なようです。

html要素

<html lang="ja">
    <head></head>
    <body></body>
</html>

html要素はこのページのすべての要素を含み、ルート要素とよばれることもあります。
この中に、head要素とbody要素を記述します。
また、このhtml要素のlang属性に「ja」を設定することで、このページは日本語であると明示することが出来ます。

head要素

<head>
    <meta charset="utf-8">
    <title>タイトル</title>
</head>

head要素内にはこのページのタイトルやブラウザでは表示されない情報等を記述します。
この例では、文字コードを「utf-8」で宣言し、タイトルとして「タイトル」を設定しています。
この他にも検索エンジン向けのキーワードや説明文、見た目を操作するCSSやスクリプトに関する記述を行います。

body要素

<body>
    <h1>見出し</h1>
    <p>段落</p>
</body>

body要素内には、実際にブラウザ上で表示される部分を記述します。
この例では、h1要素で見出しと、p要素で段落を作成しています。
この他にもリストや表を作成したり、画像や動画を表示したりとページ利用者へ見せるものがこの中に含まれます。

まとめ

HTML文書の大まかな構造は次のようになります。

文書の種類を明示するDOCTYPE宣言
body要素とhead要素を囲うhtml要素
ページ上では表示されない設定を行うhead要素
実際にページ上で表示されるコンテンツを含むbody要素

html文書には様々な要素やルールが存在するため、それに従った記述を行うよう注意する必要があります。

Loki's Note