htmlタグ 👉 文書の基点(ルート)を表す

<html>は、HTML文書の基点(ルート)となるタグです。他のすべての要素は、<html>の子要素もしくは孫要素になります。言い換えると、他のHTMLタグはすべて<html>の中に入ります。

「ルート」は根本という意味で、いちばんの根っこ(基点)となる部分を指します。

htmlタグが基点となる
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプルのHTML</title>
  </head>
  <body>
    <p>サンプルの文章です</p>
  </body>
</html>

👆<html>の中に、<head><body>を配置し、さらにその中にWebページを構成するための要素を入れていくことになります。

htmlタグの直下にはheadとbodyを

イメージ的には下の図のようになります。

headタグとbodyタグの違い

<html>のすぐ下の<head>には、検索エンジンのクローラーやソーシャルメディアなどのロボット(プログラム)が読むための情報を入れ、<body>には実際にブラウザ画面に表示されるコンテンツを入れます。

lang属性を指定する

<html>タグには「どの言語で書かれているか」を表すlang属性を指定することが推奨されています。

<html lang="ja">
~略~
</html>

👆日本語で書かれているページならlang="ja"を、英語で書かれているページならlang="en"というように指定します。この情報は、翻訳ツールや読み上げソフトなどで使われることがあります。

決まり文句として覚えておこう

まとめると、WebページやWebアプリを作るときには、以下のような構造でHTMLを書くになります。決まり文句として覚えておくと良いでしょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    ~略~
  </head>
  <body>
    ~略~
  </body>
</html>

HTMLファイルでは、先頭に「これはHTMLの文書ですよ」ということを表すために<!DOCTYPE html>と書く必要があることに注意しましょう。

参考リンク