基本要素編で扱わなかった要素をちょっとご紹介。なお、まー別に使わんでもええやろと思われるものや、使いこなしの難しいものは避けてあります。その辺はまぁ、自分で逃げ腰になっておいて言うのもなんですが、やる気が出たら調べるように。
Last Update 2002.02.
HTML の要素には２種類あります。一つはブロックレベル要素、もう一つはインライン要素です。この二つははっきりと性格の違う要素です。
ブロックレベル要素は文書構造を記述するための HTML の中でも、特にその骨格に関するものです。「基本要素編」で取り上げたものの中では段落（p）、見出し（Hn）、横罫線（hr）、表（table）、箇条書き（ol, ul）がブロックレベル要素に属します。
このブロックレベル要素は、ブロックレベル要素かインライン要素をその内容に持つことができます。
これはブロックレベル要素の作り出した構造の中での意味やハイパーリンク、装飾を扱う要素です。インライン要素の中にはブロックレベル要素を含めることはできません。
主なものに a, img, br、文字スタイルや form の中の個々のフィールドやボタンなどがあります。
例えばこんなのは間違いです。
<a name="top"><h1>ここがタイトルです</h1></a>
インライン要素である a の中にブロックレベル要素である h1 を入れることはできません。
ちゃんとした HTML リファレンスであれば、各要素がブロックレベルかインラインかという情報は書いてありますので、実際に使うときに確認してください。（「基本要素編」には書いてありませんので、あれはもちろんリファレンスとしては失格です :-）
メタデータを書くための要素です。はい、何のことか分かりませんね。
メタデータってのはデータのデータ、データに関するデータのことです。はい、ますます分かりませんね。
例を見ましょう。
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="keywords" content="PC,脱初心者,説教,講座">
<meta name="description" content="脱初心者を目指す人のための説教くさいPC講座。内容は筆者にとって緊急性の高いものから書いているのでまだまだ穴だらけですが、徐々に拡充していきます。">
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW">まず、この要素は
http-equiv属性 | content属性 |
name属性 |
このように、http-equiv属性 + content属性か、name属性 + content属性の、どちらかの組み合わせを持ちます。（scheme 属性もありますが、head 要素とか絡むし、どうせ普通は使わないので無視します。）
で、空要素なので終了タグはありません。
この書き方の場合は Web サーバとブラウザ（含むロボット）の間での情報のやりとりに利用されることが期待されます。http-equiv で指定した項目に、content で指定した内容の情報をセットして、サーバがブラウザ（含むロボット）に渡してくれると、こういうわけです。が、実際にはほとんどのサーバはそういうことをしてくれないので、実際にはブラウザがこの内容を解釈しています。
例えば最初の例では今から流すデータは text/html という MIME タイプ（要するに HTML 文書のこと）で、文字コードは iso-2022-jp だよー、という、データに関するデータを書いています。
同じように今から流すスクリプトのデータは、text/javascript だよー、スタイルシートの言語は text/css だよー、てな具合ですな。こうした情報を受け取って、ブラウザはがってん承知と、HTML の文法を解釈したり、JavaScript でぐりぐりオブジェクトを動かしたりするわけです。
というわけなので、この辺の情報に詳しくなりたければ、サーバ関係の情報を漁るといいんじゃないかと思いますが、実際にはいろんなところにこうすればページが自動的に切り変わるとか、こうすればブラウザのキャッシュを制御できるかも、なんて情報があります。
name の値が content の値についての名前になります。
上の例で言うと keywords は「PC」、「脱初心者」、「説教」、「講座」だよ、以下同文。ということです。
特に決まりはないのですが、現状では主にロボット（検索サービスを行っているところなどが放つ、HTML文書を回収して回るプログラムのこと）向けの情報のように扱われています。
また、ホームページ作成ソフトが <meta name="GENERATOR" content="作成ソフトの名前"> なんて形で情報を埋め込み、作成ソフトの存在を主張するのが割と流行っているみたいです。が、これは恥ずかしいのでソッコー削りましょう。
link 要素は現在のページ（ファイル）と他のリソースとの関係を示すために使います。
<link rel="この文書からみたリソースとの関係" | rev="rel とは逆方向での関係"
href="URL"
type="リンク先リソースのMIMEタイプ"
media="指定した URL のスタイルシートを適用するメディア"
hreflang="リンク先の言語コード"
charset="リンク先の文字コード">
実は type, hreflang, charset は a 要素にも使える属性です。あんまり使わないかもしれませんけど、念のため。（「基礎要素編」では触れてませんけど。）
W3C のサイトには以下のリンクタイプ（リンク先との関係）が書かれています。なお、大文字小文字は区別されません。
| ALTERNATE | 別バージョン（例えば翻訳版とか） |
| START | 開始ページ |
| NEXT | 次のページ |
| PREV | 前のページ |
| CONTENTS | 目次 |
| INDEX | 索引 |
| GLOSSARY | 用語集 |
| CHAPTER | 章トビラ？ |
| SECTION | 節トビラ？ |
| SUBSECTION | 小節トビラ？ |
| APPENDIX | 付録 |
| HELP | ヘルプ |
| BOOKMARK | ブックマーク（title属性も使うとなおよし。） |
| STYLESHEET | スタイルシート |
また、この他にも parent（上位文書）、copyright（著作権情報）、made（作者）などのリンクタイプが使われることがあります。なお、stylesheet、alternate stylesheet 以外はグラフィカルブラウザではほとんど解釈されないようです。
stylesheet 関係の詳細は「スタイルシートに移行しよう」の「外部スタイルシート」を参照してください。
body 要素の中にも書けるのでここで説明するのも少し変なのですが、よく head の中に書かれているので紹介だけ。
この要素の内容は HTML の文法解釈のルールから外れ、スタイルシートとして解釈されます。詳しくは「スタイルシートに移行しよう」をご覧ください。
これも body の中に書けるのですが、一応。なお、JavaScript そのものについては本講座のどこにも書かれていません。悪しからず。
縦方向、横方向ともにセルの結合ができます。こんな風に複雑な形を作ることも可能です。
| セルを結合した表 | 基本となる表 | |||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ← |
| ||||||||||||||||||||||||||||||||||||||||||||
こうした結合には colspan, rowspan という属性を使います。上の例は以下のようなソースになります。
<table>
<tr>
<th></th><th>A</th><th>B</th><th>C</th><th>D</th>
</tr>
<tr>
<th>1</th><td>普通のセル</td><td colspan="2">横方向に２つくっついたセル</td><td rowspan="2">縦<br>に<br>２<br>つ<br></td>
</tr>
<tr>
<th>2</th><td colspan="2" rowspan="3">横に２つ、縦に３つ</td><td rowspan="2">縦に２つ</td>
</tr>
<tr>
<th>3</th><td>普</td>
</tr>
<tr>
<th>4</th><td colspan="2">横に２つ</td>
</tr>
</table>
注意しなければいけないのは、「結合したらセルの数が減る」ということです。
例えば1行目は本来４つセルがあるはずですが、colspan によって B列と C列がくっついたので、セルの数は３つになります。2行目には横に２つくっついたセルと縦に２つくっついたセルが２つありますが、最後のセルは実は1行目のセルなので、「正しく2行目に所属するセル」の数は２つになってしまいます。同じ要領で3行目、4行目に属するセルはたった１つずつにまで減ってしまいます。
それぞれどこに書いてある td がどのセルに対応しているのか、よーく見比べてみてください。
table 内の要素をグループ化することができます。この辺までくるとさすがに応用編て感じで、あんまりそこまでする必要もあんまりないでしょう。チョー難しいってほどではないですが、面倒で、そこまでする必要あるかなぁという気がしてくじけます。
ま、まずは行から。
<table>
<thead align="left|center|right|justify|char">
<tr><td>ここがヘッダ</td></tr>
</thead>
<tfoot char="桁揃えに使う一文字" charoff="桁揃えする位置">
<tr><td>ここがフッタ</td></tr>
</tfoot>
<tbody valign="top|middle|bottom|baseline">
<tr><td>ここがボディ</td></tr>
</tbody>
</table>
行をグループ化するには table の下、tr の上の階層で thead, tfoot, tbody の要素を使います。これは縦に長い表なんかの場合を想定しているもので、ヘッダ、フッタを固定しておいて中の tbody の部分だけをスクロールさせる、印刷が複数のページに渡る場合にヘッダとフッタを毎ページ印刷する、などの機能を想定しています。それぞれの要素で属性は共通です。またグループごとにスタイルシートを適用することもできます。順番は thead, tfoot, tbody の順でなければいけません。tbody が全部読み込み終わる前に表示されるなどの効果があるでしょう。ただし、対応していないブラウザの場合は書いた順に表示されるので注意が必要です。（JavaScript なんかを噛ませて判別するんでしょうか。）
旧来の方法で書いた場合はそのコンテンツは省略した tbody の内容として解釈されます。tbody は複数書くことができますが、複数書ける意味ってなんでしょう？(^^;
列もグループ化できます。こっちの方がさらに複雑です。
<table>
<colgroup span="グループ化する列数" align="left|center|right|justify|char">
<col span="グループ化する列数" align="left|center|right|justify|char">
valign="top|middle|bottom|baseline">
</colgroup>
valign="top|middle|bottom|baseline">
<col char="桁揃えに使う一文字" charoff="桁揃えする位置">
</colgroup>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
基本的には colgroup の列数でグループ化していきます。その中でより細かな設定を col 要素で行います。でも、Netscape 4.x では対応していないみたいです。
また、こんだけ書いておいてなんですが、table の機能はこれだけではありません(^^; でも、ここまでにしておきます。
普通の文章でもそうですが、何がしかの文章を書く場合は、たいてい参考になる文献なりサイトがあります。そのとき、もともとの表現をそのまま自分の著作の中で使うことを引用と言いますね。
手書きや印刷の時代には「見た目に意味を持たせ」、例えば地の文との間に一行空けて、インデント（字下げ）をしてあったら引用とか、イタリック（斜体）で書かれていたら引用とか、「」で囲むとか、そういうルール（比較的暗黙ですが）を作って運用していました。
が。
すでにもういやになるくらいに分かっていると思いますが、WWW というのは印刷とは違い、見た目を前提にすることはできないのです。そこで逆転ホームラン。見た目を人間が引用として解釈するのではなく、引用を構造的に明示します。それが引用に関する要素です。
ブロックレベルの引用要素です。（細かい話をすると、この中に素のテキストをそのまま書くことはできません。）
数行からページ単位に渡るような長い引用を行うときに利用します。
<blockquote cite="引用元のURL">サンプルを下に。
狐は可笑(ｵｶ)しそうに口を曲げて、キックキックトントンキックキックトントンと 足ぶみをはじめて、しっぽと頭を振ってしばらく考えていましたが、やっと思いつい たらしく、両手を振って調子をとりながら歌いはじめました。 「凍み雪しんこ、堅雪かんこ、 野原のまんじゅうはポッポッポッ。 酔ってひょろひょろ太右衛門が、 去年、三十八、たべた。 凍み雪しんこ、堅雪かんこ、 野原のおそばはホッホッホッ。 酔ってひょろひょろ清作が、 去年十三ばいたべた。」
「雪渡り」宮沢賢治より
私立PDD図書館さんのデータを利用させていただきました。
こちらはインラインの引用要素です。使い方は blockquote と同じ。こちらは素のテキストをそのまま書けるってぐらいです。
<q cite="引用元のURL">
例えば賢い者たちに過ちがなかったとすれば、愚かな者たちは全く絶望するよりほかない。
と、かのゲーテが申されていますように、私なんぞは朝起きるたびに絶望するくらいに、何かあるたびに絶望し倒しています。とか、こんな具合に使うわけです。ほんとか？これが間違いだったらまた絶望…
いかん、例文に引きずられるところでした。
上の例で言うとアンダーラインが引かれている部分が q 要素で引用を明示している部分です。しかし困ったことに q 要素はNetscape 4 ではかち無視されますし、q 要素を認識する IE でも、見た目上は何の変化もありません。（だから上の例では強引にアンダーラインを表示させています。）
Netscape 6 になると引用符で囲んでくれますし、この引用符の表示や引用符に使う記号のコントロールもある程度できるようになるのですが、2002.01.現在ではいかんせんまだこの恩恵を受けられるのは少数派である感じがします。
q を使った引用は blockquote みたいに間違った使い方をされにくくていいかな、とか思うのですが、なかなかねぇ…。
blockquoute 要素や q 要素には cite 属性があり、これで出典を明示できるのですが、ここで指定できるのは URL だけであって、例えば本から引用した場合にはこの属性は全然使えません。
そんなときはこの cite “要素”を使って出典を明示することができます。実は、こっそり先ほどの雪渡りの例のところで使っています。
<p><cite>「雪渡り」宮沢賢治</cite>より</p>
てな具合です。IE や Netscape などではイタリック（斜体）で示されることが多いようです。
実は HTML にはコレといって意味のない要素があります。意味はないんですけど、何かの要素であることには違いがないので、例えばその中に含まれる要素はすべてこれらの要素の影響を受けます。
例えば1ページを「これはヘッダ」「これは本文」「これはフッタ」のように分けたり、全体は日本語のページだけど、「ここだけドイツ語」などのように意味を与えることができます。
「意味がないのに意味を与える？」わけが分かりませんね。実は、HTML 的に意味がなくても、他の言語を使えば意味は大アリなのです。そうです。JavaScript やスタイルシートなどです。そのために、これらの要素を使うときは、よく「属性編」で扱った「識別属性」を一緒に指定します。
ブロックレベルの意味なし要素です。
<div align="left|center|right"
class="クラス名"
id="ID"
style="スタイルシート"
title="説明">想像通り、独自の属性ってのはありません。全部ほかの要素と共通で使える属性ばかりです。ま、そりゃそうですね。
こちらはインラインの意味なし要素です。
<span class="クラス名"
id="ID"
style="スタイルシート"
title="説明">
「スタイルシートに移行しよう」の「div, span の利用」を参照してください。
文章っちゅーのは、本当に万人向けのものはほとんどありません。そりゃ無理ってもんです。なんで万人向けにならないかというと、その一つの言葉の意味や使い方が読み手と書き手でどうしても食い違ってしまう、というところにあります。
論文なんかになるとその辺は顕著で、言葉の使い方を先にしっかり定義しておかないとそこからまともな議論を展開するのはほとんど不可能です。で、その言葉の説明を担当する要素が HTML には3つあります。
なお、以下の要素はすべてインライン要素です。
省略語を構造的に明示します。その語句の説明は title 属性に書きましょう。
<abbr title="携帯電話">携帯</abbr>
<abbr title="エンターテイメント">エンタメ</abbr>
省略語というと、すぐに思いつくのは英語の頭文字を並べたやつ、FBI とかそんなんを思い浮かべるが日本語にだって省略語はたくさんある。産廃とか革マル派とか。なんでこんな例なんだ。
残念ながら何らかの見た目の変化があるのは Netscape 6 くらいなので、どれくらい使われるのかなという気もします。
省略語の中で特に頭字語、頭文字を構造的に明示します。使い方は abbr と同じです。
省略語と何が違うんだ、ということをよく思っていたのですが、自分で上のようにサンプルを書いているうちにけっこう納得がいってしまいました。ま、とりあえず日本語にはこの acronym でマークアップする言葉はねーな、と。
acronym タグでマークアップするのは例えば UNSECO とか、FIFA とか JICA などの、読み方まで定着していて、あたかもそれが一つの単語であるかのように思える言葉なんかが有力です。PC関係だと JPEG とかね。
ま、自信がなければ abbr にしておけばよいでしょう。
この要素はあまり一般的でないから説明するとか、あるいは様々な意味があるのでそれを限定するなどの意味で用います。
例えばこの Web page を作る、という一連のページ群の中では要素という言葉を多用していますが、これは HTML の解説に限ったページの中だからそのまま使えるのであり、他のページでは今ここで使っているような意味での要素だとは、普通の人は思わないでしょう。
あるいはメディアという言葉のようにいろんな意味を持ち得る場合は、どのような意味で使っているのかを明らかにしておかないと誤解からトラブルに発展しかねません。そういう場合にこの要素を使います。
IE や Netscape などはイタリック（斜体）で表示されることが多いようです。
属性編でも書きましたが、HTML は拡張路線を反省し、その機能を整理・統合し、HTML で実現する機能とそうでない機能をはっきりと分ける方向に変化してきています。
そんな中で反省の対象となっちゃってる要素をいくつか紹介します。
いろんな要素のセンタリングをします。
なんでオススメされないかっていうと、センタリングというのは論理的な構造じゃないからです。以上。
字面を変えます。
フォントには種類、大きさ、太さ、色の指定があります。ただし、フォントの種類は相手がそのフォントを持っている（使っているシステムにインストールされている）必要がありますし、持っていても正しく反映されないことも多いです。（特に Netscape 4.x までは絶望的にダメです。）どうせフォントに凝るなら、グラデーションや影、白抜きなどの技も使い放題なので、画像にしてしまうのがいいでしょう。（IE依存の CSS プロパティなんかもありますが。）
この要素で確実に指定できるのは色と大きさくらいです。
<font face="フォント名"
size="フォントの大きさ"
color="フォントの色">
タグでは <font face="フォント名" size="フォントの大きさ" color="フォントの色">この部分のフォントが変わる</font> のように書きます。
この文章はフォント用のサンプルです。途中で文字がころころ変わるので読みにくいと思いますが、我慢してください。The quick brown fox jumps over the lazy dog.
HTML 4 以降では <font> タグは使わずにスタイルシートでフォントを変更するように、ということです。font は [deprecated = 反対される、非難される] 要素です。ブラウザは後方互換性のためにサポートするでしょうけど、将来の HTML ではなくなるでしょう。実際、Strict には含まれていません。（だからこのページはエラー出まくり。）スタイルシートにまともに対応しているブラウザが増えれば、（そしてスタイルシートで記述できるようになれば）このタグは必要なくなります。
実際このページはスタイルシートでフォントを設定してあって、対応しているブラウザを使うと、画面上ではゴシック体の本文の文字が、印刷すると明朝になるように細工してあります。こんなことは FONT 要素には絶対にできません。
そして本当にこだわる場合は HTML ではなく PDF や Flash、SVG などの方法を使った方がはるかにきれいで意図通りのフォントを見せることができます。