HTMLの基礎知識
要素とタグ
前のページで作った文書には<h1>、</h1>、<p>などの記号が登場しましたね。こういった記号のことを業界(?)ではタグといいます。そして<h1>、<p>、<title>などはじめに書くタグを開始タグ、</h1>、</p>、</title>など終わりに書くタグを終了タグと言います。そして、タグで囲んだ部分全体は要素を示しています。混乱しましたか？これは図を見て確かめましょう。
※tagという名前の要素は存在しません。私が勝手に見本として作っただけです。
<h1>〜</h1>で囲まれた部分をh1要素、<p>〜</p>で囲まれた部分をp要素のように言います。
属性
時々、タグにおまけがついていることがあります。下の例を見てください。
<h1 id="logo">ちょっと詳しいHTMLとCSS</h1>今までは<h1>だけだったのに、後ろに何かついてますね。この後ろについているid="logo"の部分を属性と呼びます。
属性のうち、右側のダブルクオーテーション(引用符)で囲まれている部分を属性値といいます。文字通り「属性の値」という意味です。
HTMLのルール
HTMLを書くときには守らなければならないルールや守ったほうがいい原則がいくつかあります。
まず、タグはすべて半角文字で書いてください。全角で書くとそのまま出力されます。
タグや属性は大文字・小文字どちらでもいいことになっています。ですが、最新のXHTMLではすべて小文字で書くことになっています。ですから新しいものに合わせてタグや属性は小文字で書くことをお勧めします。
属性値はすべて引用符で囲みましょう。引用符はダブルクオーテーション(")でもシングルクオーテーション(')でもOKです。
本当は「属性値が半角英数字とピリオド(.)、コロン(:)、ハイフン(-)、アンダースコア(_)だけだったら引用符をつけなくてもよいが、シャープ(#)やパーセント(%)を含むときは引用符で囲まないといけない」というルールがあります。でもすべて引用符で囲んでおけば問題ありません。
前のページで登場したp要素は、実は終了タグ</p>を省略してもよいことになっています。ほかにも終了タグを省略してよいものがいくつかあるんですが、いちいちそんなことを覚えるのは面倒！覚えるくらいなら終了タグを省略しなければいいんです。終了タグは省略しないようにしましょう。
コメントの書き方
画面には表示させたくないけど、コメントを入れておきたい時が来るかもしれません。HTMLのコメントは次のように書きます。
<!-- ここがコメントだよ -->
<!-- 途中で改行しても
大丈夫 -->コメントは画面には表示されません。前回作ったHTML文書にコメントを書いて試してみてください。
ちなみに、コメントはタグに似ていますがタグではありません。たまにコメントのことを「コメントタグ」という人がいますが、これは誤用です。
コメントの中にハイフンを連続して書いてはいけません。
<!-- こういう -- 書き方はだめ -->
実体参照
<や>や"はタグを書くときに使いますね。これらタグを書くための記号文字は、文中に直接書くことができません。文中で<などの記号文字を表示させたいときは、実体参照というものを使います。
| 実体参照 | 表示 |
|---|---|
| < | < |
| > | > |
| " | " |
| & | & |
表の左側のように書くと、右側のように表示されます。< > " &の4つは文中に直接書いてはいけません。実体参照を使ってください。
文字実体参照はIMEの辞書に登録しておくと便利です。私は＜を<と変換するようにしています。
上の4つ以外にもいろいろな実体参照があります。
| 実体参照 | 表示 |
|---|---|
| ♠ | ♠ |
| ♣ | ♣ |
| ♥ | ♥ |
| ♦ | ♦ |
| © | © |
| | [半角スペース] |
ほかにもまだまだあります。興味のある人はHTML4 で使える文字実体参照を参照してください。
まとめ
<tag>や</tag>などの記号の部分をタグといい、タグ自身とタグで囲まれた部分を合わせて要素という- タグ・属性はすべて半角小文字で書く
- 属性値はすべて引用符でくくる
- 終了タグは省略しない
- コメントは
<!-- 文字列 -->のように書く - < > " &は直接文中には書けない。文中に書くときは、実体参照を使う
結構いろいろなことが出てきましたが大丈夫でしたか？次回からは多少本格的なHTML文書を書いてみます。
Information
現在の位置
- mynotes.jp
- > ホームページ作成講座
- > HTMLとCSS
- > HTMLの基礎知識