最終更新日:
公開日:
基礎
HTML
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の基本構造です。
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。