HTML の用語 - タグ、要素など
先に要点
◎ HTML 要素 (element) の構成 <tag attribute="value">content</tag> <タグ名 属性名="値">コンテント</タグ名> 用語名 ------------------------------------ 要素, エレメント : element タグ : tag 属性, アトリビュート : attribute 値, バリュー : value コンテント : content
タグ、要素などの用語
<meta...> や <title> など括弧 <...> の文字で囲まれた文字列を タグ (tag) と言います。 タグの書き方には下の2種類があります。
1) 開始タグ、終了タグがある要素
<タグ名>コンテント</タグ名> 例: <h1>見出し</h1> 例: <p>文章</p> <タグ名> を 開始タグ、</タグ名> を 終了タグ と言います。 開始タグと終了タグにはさまれた部分を コンテント(Content) と言います。 開始タグと終了タグで括られた1つのまとまりを 要素(Element) と言います。
2) 空要素 (1つのタグだけで使用する要素)
コンテントや終了タグを持たず、1つのタグだけで完結する要素です。 子ノード (子要素や子のテキスト) を持つことができません。 br や img などがよく見かける空要素です。
<タグ名/> 例: <br/> 例: <meta charset="utf-8"/> HTML5 では / を省略して書くこともできます。 例: <br/> は <br> でも構わない。 HTML5 のファイルを XMLツールなどで処理する場合には / が 必要になります。
◎よく使用される主な空要素 ・head内 meta link ・body内 br img input hr など
input タグも空要素です。子のテキストを持つことができません。
1) 誤り <input ...>テキスト</input> 2) 正しい <input .../>テキスト 1) のように書いてもエラーは出ないけど、期待通りの動作になりません。
いろいろ
- タグ名は !DOCTYPE 以外は小文字で書きます。
- タグによっては、タグ内に多くの属性(属性名="値"
のような記述)を列挙しているものもあります。
1-1) <タグ名 属性名1="値1" 属性名2="値2" ...>コンテント</タグ名> 例: <p class="classname1">文章</p> 2-1) <タグ名 属性名1="値1" 属性名2="値2" .../> 例: <meta charset="utf-8"/> 例: <img src="image.png" alt="画像の説明"/>
インライン要素、インラインブロック要素、ブロック要素
HTML の表示に使われるタグは表示の仕方によって
「a タグや span タグはインライン要素、img タグはインラインブロック要素、
p タグや div タグはブロック要素」
といった説明が出てくることがあります。
HTML をはじめて眺めたときに混乱しやすい話です。
CSS display:inline,blockなど
セマンティック HTML
セマンティック (Semantic) = 「意味、意味づける」という意味です。
例えば div タグと他のブロック要素のタグ
( h1, h2,...などの見出しタグ、
p 段落タグ、li リストタグ、
main, header, footer など) は、
CSS の設定の仕方などの扱い方はほぼ共通です。
CSS display: block; ブロック要素
HTML と CSS を単なる見た目のデザイン言語と捉えると main タグや
p タグや h1 タグなどは不要で、すべて div タグで書くこともできます。
でも、これでは HTML を見たときに
どれが見出しでどれが本文かを区別することができなくなります。
固有の意味や特定の目的を持たせたタグは HTML の中身を解釈をしやすくするために存在しています。
区画ごとに違う意味を持たせる話は 文書をプログラム (検索エンジンなど) で処理するときに重要になります。 プログラムでも 1) 文書の見出しや本文に関係する区画か、 2) 広告など本文と関係ない区画か、などを区別しやすくなります。
- セマンティック HTML - セマンティック, semantic＝意味付け
タグの組み合わせで使用できないもの
HTML5 は XHTML に比べるとルーズですが、 使用してはいけない組み合わせもあります。
・誤りの組み合わせの例 p の中に div, ul, figure, pre などのブロック要素を 入れてはいけない。 ・(参考) 子要素にブロック要素を入れても良い組み合わせの例 div の中に div, ul, figure, pre など li の中に div, ul, figure, pre など
- MDN: p 段落要素
p タグ内で使用できるタグは、 「許可されている内容:記述コンテンツ」のタグです。 - MDN : li 要素
li タグ内で使用できるタグは、 「許可されている内容:フローコンテンツ」のタグです。
p 要素内にブロック要素を入れてはいけない
p タグ内に div や ul や figure
などのブロック要素を入れることができません。
p の子要素にはならず、p タグの外側に並びます。
p タグ