HTMLの基本構造

HTML5における、最も基本的なHTMLの構造について解説します。

この記事のポイント

HTML5の基本的な骨格が分かる

HTMLの基本構造

HTMLは文法が正しい範囲では自由に要素を組み合わせてマークアップすることができますが、HTML5であるために必ず必要な要素が決まっています。
それは次の5つの要素です。

HTML5文書の宣言
html要素
head要素
body要素
文書の文字コードを指定するmeta要素

これらの要素は記述する場所も決まっているため、これがHTMLの基本構造となります。
次のコードのうち、赤い箇所が基本構造となる要素です。

HTMLの基本構造

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
その他のmeta要素はここに記述
-->
<title>CSSセレクタのスタイルが適用される優先順位について</title>
<!--
ここにCSSの読み込みや、スタイルシートを記述
<link rel="stylesheet" href="css/reset.css">

<!--
ここにJavaScriptの読み込みやコードを記述
<script type="text/javascript" src="js/jquery.js"></script>
-->

</head>
<body>

<!-- ここに本文を記述 -->

</body>
</html>

1行目の「<!doctype html>」はHTML5文書の宣言になります。

続く「<html lang=”ja”>〜</html>」がルート要素と呼ばれる大元のHTML要素です。
開始タグの中にある「lang=”ja”」はHTML文書で使用する言語を指定しています。

ルート要素の中に、head要素とbody要素が続きます。
この2つの要素の並びも遵守する必要があります。

head要素にはmeta要素、title要素、CSSやJavaScriptを記述したり外部ファイルの読み込みを記載する場所になります。

CSSとJavaScriptの記載順序は任意ですが、HTMLはレンダリング（表示）する際に上から順に解析していくため、CSSを先に書いておいた方がスタイルが適用されるタイミングが速くなり表示の遅延を防ぐことができます。

head要素の「<meta charset=”utf-8″>」は、HTMLの文字コード指定です。
厳密には必須ではありませんが、文字化けを防ぐため指定しておいた方が無難です。

その下のbody要素では、コンテンツとなる本文が入ります。

以上がHTMLの基本構造です。

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。