HTMLの意味を知ろう！

2022年07月13日

WEBサイト制作

#HTML

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回はHTMLの意味を知りましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

前回の「HTMLを書いていこう！(2022年06月29日公開)」でこんなHTMLを書きました。
それをお使いのブラウザで表示させてみるとHello world!と出ましたね。

「あれ？なんか色々HTML書いたのに、これしか表示されないの？」と思いませんか？
そうなんです。
HTMLにはせっかく書いたのに表示されないものがたくさんあります。

今回はその表示されるHTMLや表示されないHTMLについて解説していこうと思います！

タグの考え方について

タグとは具体的には

<head></head>

です。
基本的にはタグは対になっていて

◆開始タグ

<head>

と
◆閉じタグ

</head>

があり、このタグで囲まれたものを要素と呼びます。
この開始タグと閉じタグの間にさらに

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>

このように別の要素を挟むような形にすることを入れ子、もしくはネストと呼びます。
入れ子になった要素同士を親子関係といいます。
この場合、

<head>
</head>

が親にあたり、

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>

が子に当たります。

これが基本的なHTMLにおけるタグの考え方です。

タグの意味について

次はタグの意味について解説していきます。

まず最初にこれですね。

<!DOCTYPE html>

このタグは対になっていません。つまり閉じタグがありません。
意味は「文書がHTML5で作成されたものであることを宣言する」です。
HTML作成する際、まず初めに必ず記述する必要があります。
忘れないようにしましょう！

次は、

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

です。
このタグは先程の<!DOCTYPE html>とほとんど同じ意味です。
ただ一点注意が必要なのは、オレンジ色で書かれている「lang」はHTML属性と呼ばれるものです。
それに「=」で繋がれて黄緑色で「″ja″」と書かれているのが属性値です。
これはすごく重要なんでよく覚えておいてください。
意味は、「このHTMLは日本語で記述されています」ということです。

次は、

<head></head>

です。
このタグは英語でhead、つまり「頭」を意味します。
ただこれがちょっと厄介でこのheadタグ以外に重要なタグのheaderというタグも存在ので、混同しないように気をつけてください。
また意味というか役割ですが、
表示されない様々な設定を記述するためのタグです。
例えばCSSを読み込んだり、Googleの検索エンジンに表示される文言の設定などもこのタグの中に記述します。

次は、

<meta charset="UTF-8">

です。
このmetaタグは「Webサイトの情報を記載する」役割を持ちます。
「charset」というHTML属性に「=」で繋がれて黄緑色で「″UTF-8″」と書かれているのが属性値です。
なので、この要素の意味は「このページでは文字コードのUTF-8を使用します」という宣言になっています。

さて次は、

<meta name="viewport" content="width=device-width, initial-scale=1.0">

です。
これは意味は「このページはスマホ、タブレット対応です」と宣言している要素になります。
これもmetaタグですね。
「name」というHTML属性に「=」で繋がれて「″viewport″」という属性値が記述されてますね。
そしてもう一つ、「content」というHTML属性に「=」で繋がれて「″width=device-width, initial-scale=1.0″」という属性値が記述されています。
これでレスポンシブサイト（端末の画面幅によってデザインが可変するWEBサイト）が作成できるようになります！

次は