HTMLの基礎
先ほどのindex.html
をもう一度見直してみましょう。実は、HTML ファイルはただ文章を書けばよいというものではなく、いくつかの約束事があります。index.html
を正しい 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 の定型的な部分はそこそこ長いので、最初のうちはコピペで構いません。そのうち覚えます。