基礎

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の基本構造です。

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

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

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ