使用できる要素の種類 ブロック要素 インライン要素 属性について
使用できる要素の種類
要素の種類にはブロック要素とインライン要素があり、その使用する事ができる種類はDTDで決まるという事は既に述べた通りですが、ここではDTDの隔たりを意識せずに、使用頻繁の高いと思われる要素を筆者が独断と偏見で抜粋し解説して行きます。その内容は極簡易的な物になります。
ブロック要素
HTML文書を構成する基本的な要素で、これを用いる事により文書の構造 (意味) を表現します。多くの文書の内容は下記に挙げる要素のいずれかの意味を持っており、必ずマークアップされます。
HTMLタグ自体に意味はありません。文章が元々持っている意味をコンピュータが識別できるようにするのです。
見出し - h1 h2 h3 h4 h5 h6
その文書の見出しを表します。マークアップでは Heading の頭文字を取って <h1>〜</h1> などを用います。数字が大きくなるに連れて見出しのレベルが下がり、一番小さい見出しは <h6>〜</h6> になります。
段落 - p
主にその文書の内容部分 (文章部分) に用いられます。段落と言うと節や章の分かれ目などを想像しますが、そうではなく文章の固まりそのものを一つの段落と捉える様にしましょう。マークアップでは Paragraph の頭文字を取って <p>〜</p> を用います。DTDによっては終了タグ ( </p> ) を省略する事も出来ますが、必ず記述するようにしましょう。
順不同リスト (箇条書き) - ul
一覧を表示します。その順番に意味がなく、箇条書きとして表現するものに用います。マークアップには Unordered List の頭文字を取って <ul>〜</ul> を用います。当要素には必ず一つ以上の li要素 が内包されます。
順序付きリスト - ol
順序付きの一覧を表示します。その並びに意味がある場合に用います。マークアップには Ordered List の頭文字を取って <ol>〜</ol> を用います。当要素には必ず一つ以上の li要素 が内包されます。
定義型リスト - dl dt dd
定義される語句とその説明を表示する為の一覧で、Definition List の頭文字を取った <dl>〜</dl> を用いてマークアップが行われます。定義される語句は Definition Term の頭文字を取った <dt>〜</dt> を用いて表現され、その説明は Definition Description の頭文字を取った <dd>〜</dd> が用いられます。
水平線 - hr
章の変わり目や節などにおいて水平線を用いる事により、それを際立たせる事などが期待できます。マークアップでは Horizontal Rule の頭文字を取って <hr> を用います。空要素ですので終了タグは存在しません。
ブロック型引用 - blockquote
自己の物ではない著作物を文書に組み込む場合に用います。マークアップには <blockquote>〜</blockquote> を用います。block はブロックレベルという意味で、quote は引用という意味です。つまりはブロックレベルの引用を意味し、段落ごと引用する場合などに用います。短文などの (インライン要素の) 引用には q要素 が用いられます。また出典元がWWW上のリソースだった場合は、その出典を示す為に cite属性 を用いて引用元のURIを明示します。
整形済みテキスト - pre
HTMLファイルに記述した通りに改行や空白を反映させたい場合に用います。使用用途としては主にプログラムや HTML のソースコードを記述したり、整形された詩歌を載せたりします。他にも文字絵 (アスキーアート) を描く時にも使用されるようです。マークアップには preformatted text の頭文字を取った <pre>〜</pre> を用います。
著作者情報 - address
そのリソースの著作者の情報を表します。主にメールアドレスなどの問い合わせ先などの情報を提示して置くのに用います。マークアップには <address>〜</address> を用います。
表 - table
<table>〜</table> を用いて表を作成できます。Table Row の頭文字を取った <tr>〜</tr> 、Table Header の頭文字を取った <th>〜</th> 、Table Data の頭文字を取った <td>〜</td> などを用いて表を構成します。
意味的ブロックコンテナ - div
仕様書には 『Generic Language/Style Container』 と書かれています。好きに訳して下さい。マークアップには division の意味を持つ <div>〜</div> を用います。これ自体に意味はなく、ブロック要素という事だけが定義されています。
インライン要素
主にブロック要素の内容として用いられます。それ自体が文書を構成するための構造の一部となる事はなく、ブロック要素内で、筆者が意図した何らかの意味を与える為の要素です。既に登場した a要素 や img要素 などが例です。そしてインライン要素の内容にはテキスト (文字データ) や、他のインライン要素を含むことができます。繰り返しますがブロックレベル要素を含むことはできません。
リンク - a
ハイパーリンクを設定し、各リソースを結びつける事が出来ます。マークアップには Anchor の頭文字を用いて <a>〜</a> を用います。
画像の挿入 - img
画像を表示することができます。マークアップには Embedded Image の略である <img> を用います。空要素なので終了タグを持ちません。必須属性に src属性 と alt属性 を持つため、使用する時は必ず <img src="URI" alt="代替テキスト"> という記述になります。
改行 - br
任意の位置で改行を行うことができます。マークアップには Forced Line Break の略である <br> を用います。空要素なので終了タグを持ちません。
強調 - em
強調部分を示す事が出来ます。マークアップには Emphasis の頭文字を取って <em>〜<em> を用います。
さらに強い強調 - strong
<em>〜<em> よりもさらに強調部分を示す事が出来ます。マークアップには Strong Emphasis の略である <strong>〜<strong> を用います。
引用 - q
<blockquote>〜</blockquote> のインライン要素版です。主に短文の引用に用いられます。マークアップには quote の頭文字を取って <q>〜<q> を用います。
出典 - cite
引用元 (出典) を示す事が出来ます。マークアップには Citation の略である <cite>〜<cite> を用います。
上付き・下付き文字 - sup・sub
上付き・下付き文字です。ルビとは違います。マークアップには Subscript と Superscript の略である <sub>〜<sub> と <sup>〜<sup> を用います。
意味付けインラインコンテナ
<div>〜</div> と同じです。マークアップには <span>〜</span> を用います。違うのは <div> がブロック要素なのに対して <span> はインライン要素です。
属性について
本来なら各要素に付属する属性についても説明するべきなのですが、量が多かったり、適用要素が入り乱れていたり、使用頻度が少なかったりと、説明の優先順位が低いと執筆者が判断しましたので割愛させて頂きます。いずれはきちんと個別要素の説明内に加えて行くつもりです。
[ トップページ ]
[ 目次 ]
[ ページの先頭 ]
[ 前項目 ]
[ 次項目 ]
独断と偏見？
全部を詳しくとなると大変なので。いずれは完成させたいと思いますが。
これだけしかないのですか？
本当はもう少しありますが、文書の構造を示す基本的な要素はこれくらいです。殆どの文書が上で示した意味に分ける事ができるでしょう。