タグと要素

要素はふつう、開始タグ、内容、スラッシュのついた終了タグの三つが並んだものです。

要素の部分

<p>Bread is ready.</p> を見てみましょう。開始タグ <p> は、ここから段落が始まることを示します。最初の山かっこのあとにスラッシュがある終了タグ </p> は、そこで終わることを示します。その間にあるものすべてが内容です。タグと内容を合わせた全体が要素です。要素のことをタグとよぶ人も多く、会話ならそれでかまいませんが、ドキュメントを読むときにはこの区別が役立ちます。タグは山かっこで囲まれた部分、要素はページの完成した部品です。

属性で細かく指定する

開始タグには属性をつけられます。name="value" の形で書く追加の設定です。<a href="menu.html">Menu</a> では、属性 href がリンク先を示します。<html lang="en"> では、属性 lang が言語を表します。値はダブルクォーテーションで囲みましょう。標準では引用符なしの値も一部認められていますが、引用符をつけて困ることはありません。複数の属性は空白で区切り、順番は関係ありません。フォームの入力欄の required のように、いくつかの属性は真偽値属性で、名前だけ書けば有効になります。

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

入れ子：開いた順の逆に閉じる

要素はほかの要素の中に入ります。上の例では、<strong> が <p> の中にあります。きまりは計算のかっこと同じで、最後に開いたものを最初に閉じます。<p><strong>7 am</p></strong> は、strong要素が開いたまま段落が閉じているのでまちがいです。ブラウザーは意図を推測しますが、まちがい方がちがえば推測もちがいます。このコースの例のように子要素をスペース二つ分字下げすると、入れ子が見やすくなります。

空要素

内容をもてないので、終了タグがない要素もあります。これを空要素といいます。よく使うのは <br>（改行）、<hr>（話題の区切り）、<img>、<input>、<meta>、<link> です。<br /> のようにスラッシュつきで書かれているのを見ることもあります。HTMLではこのスラッシュは認められていて無視されるので、どちらの書き方でも動きます。

見た目ではなく意味

段落の中では、強い重要性を表す <strong> と、文の読み方が変わるような強調を表す <em> で語に印をつけられます。ブラウザーはstrongを太字、emを斜体で表示しますが、大切なのは意味です。スクリーンリーダーは声の調子を変えて読むことがあり、検索エンジンは重要な語として扱います。飾りとして太字にしたいだけなら、それはCSSの仕事です。<b> と <i> も、船の名前や外国語のように、特に重要ではないけれど区別したいテキストのために残っています。

特殊文字とコメント

< はタグの始まりなので、ふつうの文字としては入力できません。かわりに文字参照を書きます。小なりは <、大なりは >、アンパサンドそのものは & です。<!-- like this --> のようなコメントはブラウザーに無視されるので、自分用のメモに便利です。最後に、HTMLは空白をまとめます。ファイルの中の十個のスペースや三つの改行は、一つのスペースとして表示されます。レイアウトは要素とCSSでつくるもので、スペースキーを押してつくるものではありません。