HTMLの基本構造と要素を解説!

2019年5月16日

本稿ではHTMLの構造と基本的な要素を説明致します。HTMLを構成する基本的な要素を理解することで、
HTMLを作成する上での基本的な構造を理解することが出来ます。

HTMLとはなにか?を知りたい方はHTMLの概要とタグの解説をご覧ください。

 

HTMLの基本構造

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
    <body>
        本文の内容
    </body>
</html>

上記のコードがHTMLの基本構造となります。

内容をテキストエディタにコピー&ペーストして、

ファイル名を「Sample.html」に変更後ブラウザで閲覧してみましょう。

 

DOCTYPE宣言

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
    <body>
        本文の内容
    </body>
</html>

太字の<!DOCTYPE html>がDOCTYPE宣言となります

DOTYPE宣言をすることによって以下の3つを宣言しています。

  1. 文書がHTMLであることを宣言
  2. HTMLのバージョンを宣言
  3. 指定のDTD※に従った記述を宣言
    ※Document Type Definition/文章の構成要素バージョン

使用するHTMLのバージョンによって宣言文が異なるのですが、

特別指定がない限り最新バージョンであるHTML5の宣言で問題ないです。

(その他のバージョン指定が気になる方はこちらをご覧ください。)

 

従ってHTML5を使用する際には、

<!DOCTYPE html>

と宣言することを覚えておきましょう。

 

html要素

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
    <body>
        本文の内容
    </body>
</html>

 

html要素はHTML文書のルートを表しており、

全ての要素はhtml要素の中に記述する必要がありますので、

html要素は必ず宣言しましょう。

 

 

head要素

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
</head>
    <body>
        本文の内容
    </body>
</html>

head要素は、文書のヘッダ情報を表す際に使用します。

ヘッダ情報とはその文書に関する情報のことです。

具体的にはメタデータを集めたものがhead要素となります。

 

meta要素

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
<title>ページタイトル</title>    </head>
    <body>
        本文の内容
    </body>
</html>

 

メタデータとはその文書に関する情報のことです。

具体的には下記がメタデータの一例となります。

  • <meta>  (メタデータ)
  • <title>    (タイトル)
  • <link>    (リンク情報)
  • <script> (スクリプト)

これらのタグは、全て<head>~</head>の中に配置します。

また、上記のサンプルコードでは文字コードエンディングとしてUTF-8を使用していますが、

初心者の方には少し難しいと思いますのでここでの具体的な説明は割愛します。

詳しく知りたい方は以下の記事をご覧ください。

 

title要素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
<title>ページタイトル</title>
    </head>
    <body>
        本文の内容
    </body>
</html>

title要素はhtmlファイルの中で一つしか使用できません。

title要素でwebページのタイトルを指定しています。

 

皆さんが今ご覧になっているこの記事を例にとると下記がタイトルになります。

HTMLの構造を解説!基本的な要素を覚えよう

 

body要素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
<body>
        本文の内容
</body>
</html>

body要素では、見出し・段落・引用などの文章の中身を記述します。