18.今まで書いたHTMLコードの解説

ヤミー「今回は、過去記事（16.HTML言語にはバージョンがある）で書いた以下のhtmlコードの内容の解説をしていきたいと思います」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>こんにちは</title>
</head>
<body>
<main>
元気かな
</main>
</body>
</html>

ヤミー「上から順番に説明するとすれば、まずは<!DOCTYPE html>ですね。」

<!DOCTYPE html>: この文章がHTML5のバージョンで書かれていることを宣言するもの

サイトウ君「ビックリマークドキュタイプエイチティーエムエル？」

ヤミー「はい、そう書かれています。これは正確にはタグではなくてドキュメントタイプ宣言というもので、その文章がどのバージョンのHTMLかを示すために書かれるものです」

サイトウ君「ほう？」

ヤミー「過去記事（16.HTML言語にはバージョンがある）でも言ったけど、この文書はHTML5で書いてます。そして、HTML5ではドキュメントタイプ宣言は「<!DOCTYPE html>」と書くことが決められています」

サイトウ君「なるほど」

ヤミー「次が htmlタグ」

<html lang="ja"> ～ </html>: htmlコード全体を囲むもの

ヤミー「htmlタグはhtmlコード全体を囲むタグです」

サイトウ君「ふむふむ」

ヤミー「ちなみにhtmlコードって言うのはホームページを作るためのコードのことです」

ヤミー「そして今回、html タグに lang 属性で ja を指定しています」

ヤミー「lang は language（言語）のこと。そして ja は japanese（日本語）のことです。つまり「このサイトは日本語のサイトです」ということをブラウザ（インターネットを見るソフト）に教えるものです」

サイトウ君「なるほど。 ja 以外もあるの？」

ヤミー「はい。フランス語なら fr 。アメリカ英語なら en-US のように指定します」

サイトウ君「へー」

ヤミー「次が head タグ」

<head> ～ </head>: メタ情報（ホームページには表示されないけど、必要な情報）を書く場所

サイトウ君「なるほど。それがヘッドタグ。今まで勉強してきたことから、ちょっとだけ分かる」

ヤミー「次が meta タグ」

<meta charset="utf-8">: 文字コード utf-8 を指定している

ヤミー「これは文章の文字コードを指定しています。これを書かない場合、文字化けが発生する可能性があります。詳しくは過去記事（13.簡単な文字化けの解説）を見てね」

ヤミー「次も meta タグ」

<meta name="viewport" content="width=device-width, initial-scale=1">: スマホでホームページを見たときに問題なく見れるようにするために必要な記述

ヤミー「このmetaタグは、スマホでホームページを見たときに問題なく見れるようにするために必要な記述です」

サイトウ君「え？これを書かない場合はスマホでホームページが見れないの？」

ヤミー「いいえ、一応見れるのですが、確か異様に文字が小さく表示されたりする。でも、これを書くと文字の大きさとかも良い感じになる」

サイトウ君「へー」

ヤミー「次が title タグ」

<title> ～ </title>: そのウェブページのタイトルを書く

ヤミー「タイトルタグはそのウェブページのタイトルを書くタグです。このコードだと「こんにちは」がページタイトルになっています」

ヤミー「次が body タグ」

<body> ～ </body>: そのウェブページに表示する内容を書く

ヤミー「ボディタグには、そのウェブページに表示するための内容を書きます」

ヤミー「次が main タグ」

<main> ～ </main>: そのウェブページのメインコンテンツを書く

ヤミー「メインタグは、そのウェブページでの一番重要なコンテンツを囲むのに使うタグです」

ヤミー「実はbodyタグの中で、mainタグを使わずに」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>こんにちは</title>
</head>
<body>
元気かな
</body>
</html>

ヤミー「というような書き方も一応できるのですが、なんとなく「bodyタグの直下で直接文字を書くのはダサい」という風潮がプロの中にあります」

サイトウ君「ダサいの？」

ヤミー「ダサいです」

ヤミー「あと、このファイルは「a.html」というファイル名でしたね？HTMLコードを書いたとき、拡張子は「.html」とする、という決まりになっています」

サイトウ君「なるほど」

ヤミー「次回、19.HTMLコードを保存する場所を変える」