上毛印刷株式会社

HTMLの意味を知ろう!

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サイト)が作成できるようになります!

次は

<title>Website</title>

です。
このタグは「このページのタイトル」を宣言するためのものです。
具体的にどこに表示されるのかというと

皆さんがお使いのブラウザの上部に表示されています。


あと、
検索結果の

に表示されます。
ですので非常に重要なタグです。
忘れないようにしてください。

これで一旦、head内に記述する要素の解説は完了です。
どうでしょうか。
難しいですか?

まあhead内の記述はただ単に覚えればいいだけなので、
全然難しく考えなくて大丈夫です。

さて次はいよいよブラウザに表示されるタグです。

<body></body>

「body」、体ですね。
ブラウザに表示される箇所は全てこの「body」の中に記述します。

そしてその中に大見出しの意味を持つ

<h1></h1>

のタグの中にHello world!と記述することで初めてブラウザにコンテンツ表示されるんです。

まとめ

タグには色んな役割・意味があります。
HTMLはとにかく役割・意味を適切に理解して、
適切に構築していくことが最重要になりますので、
しっかり覚えていってください。

ソーヤ

上毛印刷WEB制作担当
前職は東証一部上場企業の本社受託チームにてフロントエンドエンジニアを3年経験。

PAGE TOP