HTMLの基本構造
HTMLには、HTMLとして成立させるための最低限の構成があります。この章では、その構成に必要なタグやコードを説明していきます。
下記は、そのサンプルです。
<meta charset="utf-8">
<title>タイトル</title>
<body>
<section>
<h3 id="doctype-1">DOCTYPE宣言</h3>
<p>1行目に記述されたソースコードは、DOCTYPE（ドックタイプ）宣言と言います。
<br>HTMLは、大文字と小文字を区別しないため、<!doctype html>という表記でも問題ありません。</p>
<pre class="html"><code>
HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。
当サイトは、最新のHTML5で宣言しています。HTML5以前のバージョンは、xhtml1.0。その前はhtml4.01となります。（3つのHTMLの仕様（DOCTYPE）の比較）
特に理由がなければ、HTML5の宣言で問題ありません。DOCTYPEは、必ず1行目に書く必要があります。
html要素
HTMLの最上位のタグです。すべてのタグは、htmlタグ内に記述しなければなりません。
htmlタグのlang属性は、どの国の言語で書かれているかを表します。jaは日本語という意味です。他にも英語のenなど複数の言語があります。
lang属性は、ブラウザの翻訳機能のトリガーになっています。指定しない場合、翻訳をするかの確認表示が正しく表示されないので、必ず指定しておきます。
head要素
headタグ内には、HTML文書に関する情報（メタデータ）を記述します。
headタグ内に記述できるタグは、決まっていて、titleタグ・linkタグ・metaタグなどがあります。
headタグ内に記述した内容は、ブラウザに表示されません。
ただし、titleタグのテキストは、タブ名やブックマークで表示されます。
meta charset="utf-8"
headタグ内に記述するmeta要素の一種です。
charset属性は、HTMLの文字コードを指定する属性です。
metaタグは、開始タグのみで、終了タグがありません。
<meta charset="utf-8">
文字コードの指定を省略したり、値を間違えるとブラウザの表示で、文字化けが発生します。
UTF-8以外にも、Shift_JISなどの文字コードがありますが、HTML5以降は、UTF-8を推奨しており、他の文字コードは基本的に指定しません。
title要素
headタグ内に記述します。ページのタイトルを記述します。
タイトルの文字数に関しては、「初級42. meta要素 - ページの説明文（meta description）」でも紹介
しています。
<title>ページのタイトル</title>
ブラウザのタブに表示されたり、お気に入り（ブックマーク）に登録時のラベルになります。
また、検索結果のタイトルに表示される文字にもなります。
検索結果で表示される文字数には制限があり、全角文字で30文字以内で収めるのが基本です。
titleタグは、検索サイトが重要視するタグの1つです。
ポイントは、ページごとにタイトルを変えることです。GoogleやBingなどの検索サイトでは、ページごとにタイトルを変えることを推奨しています。
body要素
bodyタグ内には、ブラウザに表示される文書を記述します。
この先の章で、特に指定がない場合、すべてbodyタグ内で記述していきます。
まとめ
- HTMLの基本構造のタグは省略してはいけない
- <!doctype html>は、必ず1行目に指定する
- titleタグのテキストは、ページごとに変える