HTML

HTMLファイルの構造

HTMLファイルの基本構造

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

<!doctype html>

Doctype（ドクタイプ）宣言と言い、そのページがどのバージョンのHTMLでどの仕様に合わせて作られているのかを書いています。最新の仕様の「HTML Living Standard」では<!doctype html>と記述します。

<html>~</html>

Doctype宣言のすぐ後に記述します。全体を包み込む形で使われるhtml要素は、別名「ルート要素」と呼ばれます。ルート要素とは、すべての要素を包む根源的な要素、という意味です。このhtml要素があることで、コンピューター側に「これはHTMLの文書だ」ということを伝えることができます。また、<html>タグは多くの場合、言語を示すlang属性が一緒に書かれています。

<html lang="ja">

「lang」はWebページの言語を設定できる部分です。タグで囲まれた範囲が、どの言語で記述されているのかを示します。日本語サイトの場合は、lang属性にjaを指定します。他にen=英語、en-au=オーストラリア英語、de=ドイツ語…などの書き方があります。

<head>~</head>

この部分はページのタイトルや説明文、使用する外部ファイルのリンクなどページの情報を記述します。ブラウザには表示されません。

<meta charset=”UTF-8”>

文字コードをUTF-8にするという指定です。UTF-8は現在推奨されている文字コードです。これが正しく表記されていないと文字化けをして文字が上手く表示されない場合があるので必ず記述しましょう。

文字コードとは、文字をコンピュータで扱うために個々の文字や記号に割り当てられた、固有の番号のことです。文字コードの体系の代表的なものとしては、米国で最初に策定されたアスキー（ASCII）などがあります。日本語の文字コードとしては、日本工業規格（JIS）で標準化されたJIS X 0208（JISコード）、EUC（EUC-JP）、シフトJIS（Shift_JIS）などが主に利用されています。

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

ページの表示方法を制御するためのビューポート設定です。主にスマホなど画面の小さなブラウザに対しての制御です。width=device-widthはビューポートの幅をデバイスの幅に合わせることを指定し、initial-scale=1.0は初期のズ ムレベルを1倍に設定します。ズームを禁止する設定もできますが、アクセシビリティに悪影響な設定は避けるべきです。

<title>~</title>

ページのタイトルを記述します。この名前がブラウザのタブやユーザーがWebサイトをブックマークしたり検索したときのページタイトルや検索エンジンの検索結果画面として表示されます。

<meta name=”description” content=”~”>

ページについての説明文を記述します。検索エンジンでページタイトルとともに表示されます。必要なキーワードを含めて記述します。

<body>~</body>

HTML文書の本体部分です。ここに記述したコンテンツが実際にブラウザに表示されます。

-HTML