メインコンテンツまでスキップ

HTMLの基礎

先ほどのindex.htmlをもう一度見直してみましょう。実は、HTML ファイルはただ文章を書けばよいというものではなく、いくつかの約束事があります。index.htmlを正しい HTML ファイルにするため、以下の通りに書き換えてください。

index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Document</title>
</head>
<body>
Hello World!
</body>
</html>
ファイルの保存

ファイルを保存したら忘れずに保存しましょう。ほとんどのソフトウェアではCtrl (Cmd) + Sがこの操作に該当します。

先ほどとは表示が変わっていないのにもかかわらず、コードの量が大きく増加してしまいました。どうしたものでしょうか。

HTML ファイルは、文書に意味を持たせるために、タグと呼ばれる構造を持つことができます。タグは、<tag>のような、「小なり」と「大なり」で囲まれた英数字のまとまりです。

タグは、<tag>内容</tag>のように、タグ名の先頭にスラッシュを付けるか否かの区別により開始タグ終了タグに別れ、内部のテキストや別のタグを挟み込むことができます。開始タグから終了タグまでのまとまりを要素(Element)といいます。

開始タグには、<tag type="value">のように、属性名="値"の形式で属性を指定することができます。例えば、htmlタグにはlang属性を指定することができ、その文書が何の言語で記されたものであるかを示すことができます。

また、全ての HTML ファイルは、一行目の

<!doctype html>

という「このファイルは HTML ファイルだ!」と宣言する定型句ののち、html要素を頂点とした木構造を形成します。

順を追って見ていくと、html要素の直属の子としては、head要素とbody要素がそれぞれ 1 つずつのみ存在することが分かります。

このうち、head要素は文書のメタ情報(文書自身に関する情報)を格納するものです。上記の例であればtitle要素によって文書のタイトルを、metaタグのcharset属性において文字コードを指定しています。

bodyタグの中には実際に画面に表示される情報を記述します。今回はHello Worldというテキストのみが存在していますね。

HTML の定型的な部分はそこそこ長いので、最初のうちはコピペで構いません。そのうち覚えます。