HTML：要素と属性
HTMLはタグで「どういう文章にするか」を決めるというのが基本ルールです。
ところが、いざHTML文を見てみると「何か複雑なHTMLやな・・・」ということってありませんか？
そういう場合はおそらくHTMLの要素と属性がたくさんかかれたHTMLなんだと思います。
ここではHTMLがタグで囲んだ文章であるということに加えて、『要素』『属性』を理解すれば、よりHTMLの理解が深まります。
これからいろんなタグの使い方を説明していきますが、HTML基礎中の基礎になります。
かなり重要な内容になるのでここはしっかり理解しておきましょう。
HTMLの要素とは
要素を説明していく上での例として、この項目の見出し↑『HTMLの要素』というものを確認します。
文章として『HTMLの要素』と記述しているだけですが、HTMLにすると以下のようになります。
<h2>HTMLの要素</h2>
このHTML文を分解すると大きく３つにわけることができます。
| HTML | 説明 |
|---|---|
| <h2> | 開始タグ |
| HTMLの要素 | 文章（HTMLとかではなく単なる文字列） |
| </h2> | 終了タグ |
HTMLの開始タグから終了タグまで、これらをひっくるめてHTML要素となります。
この例の場合だとh2要素とか呼ばれたりします。
HTMLでは意味上の最小単位と思っておいて差し支えなさそうです。
ただし！
必ずしも終了タグがあるとは限りません。
例えば、画像を表示するタグは<img>というものを使いますが、このimgタグには終了タグ（</img>）はありません。
他にも改行（<br>）なんかも単独で使用されます。
こういう終了タグのないタグは空要素と呼ばれ、開始タグのみ（終了タグなし）で成立します。
なのでやはり、HTML要素とは何か？となったら、
意味上の最小単位
こういう覚え方がいいのではないかと思います。
HTMLの属性とは
HTML要素について理解していただいたところで、次に出てくるのがHTML属性です。
要素よりも詳細な設定を出来るものが属性です。
要素の時と同じく例をみてみましょう。
<h2 id=”H2-1″ lang=”ja”>HTMLの属性とは</h2>
属性は開始タグに『半角スペースで区切って』記述します。
基本的な形としては
属性名=”値”
になります。
例に挙げているHTMLにある属性は２つです。
| 属性 | 値 | 説明 |
|---|---|---|
| id | H2-1 | H2-1自体は私が付けたものなので特に意味はなし |
| lang | ja | 言語を日本語に設定 |
冒頭でもお話しましたが、より詳細な設定を行うために属性を使用します。
開始タグは無数にありますが、それぞれに使用できる属性があるので必要になった都度調べてみてください。
とはいえ、共通して設定可能な属性であるグローバル属性というものも存在します。
今回の例で挙げている『id』『lang』はいずれもグローバル属性に類するものです。
idは固有の名前を設定します。
例えばリンクとして飛ばすときにURLに加えてidまで指定すれば、URLページ内のidの箇所に飛ばすことが可能です。
langは文字から想像できる通り言語の指定ですね。
まとめ – HTMLの要素と属性
HTMLは基本的にタグで囲む（開始タグ～終了タグ）ことを覚えておけば、だいたい読み取ることが可能です。
ただ、中には長くて複雑なHTML文も存在します。
その時はここで紹介した”要素“と”属性“をみるようにしてみてください。
きっとHTML文を読み解くことができるはずです。
