ブロック要素とインライン要素の違い
ブロック要素とインライン要素の違いは非常に重要にも関わらず、気にも留めずにHTMLを記述している人が多く見受けられます。 ここできちんと理解してしまいましょう。
基本事項
ブロック要素って何だ?
ブロック要素とは、 文書の骨組み です。
例えば見出しを表す <h1>
や、段落を表す <p>
などがブロック要素です。
これらは視覚表現をするUA(例えばMSIEやMozillaなど)で、特にスタイルを指定しない場合、幅を画面いっぱいに取り、前後が改行されます。
簡単に言ってしまうならば、ブロックを作り出します。
これらの中には大抵他のブロック要素や、インライン要素を含む事が出来ます。
ブロック要素の一覧はインライン要素を知ってから説明することにしたいと思います。
インライン要素って何だ?
inlineを直訳すると「行内」であるとおり、インライン要素は 行の中の文字に論理的な意味を持たせたりします 。
例えば強調を表す *
や、フォームの部品となる <input>
、リンクに用いる <a>
などがインライン要素です。
インライン要素の中にインライン要素を含むことはありますが、インライン要素の中に ブロック要素を含むことはごく稀な例外を除き殆どありません 。
タグの一覧
ポイントは2つです。 1つめは タグを意味から理解する事 。 この助けとなるように元となった英単語を分かる範囲で記載しました。 2つめは 包括する要素は何かを知る事 。 これを知らずに誤って記述すると、予期しないところに終了タグが補われてしまうかもしれません。
これらを知ってもらう為の一覧ですので、基本的な使い方は省略している場合があります。 他の優秀なサイトを参照してください。 また、あまり使われない要素についての解説は簡略化されている場合があります。 尚、この一覧はHTML4を基本に記載し、アルファベット順に並べてあります。
非推奨要素 とは本来のHTMLの趣旨から外れているとしてHTML4.01 Strictから定義されていない、ある意味お先真っ暗な要素です。 使わないよう心がけましょう。 このサイトでの 改善 の最終目的の一つはこれらをなくす事にあります。 (とはいえUAはサポートを続ける事が推奨されていますが。)
ブロック要素の一覧
では、ブロック要素についてもっと詳しく知ってゆきましょう。 早くもブロック要素が何のことだか忘れてしまった方はブロック要素って何だ?にお戻り下さい。
要素名 | 説明 | 内容 |
---|---|---|
address |
addressはそのまま 連絡先 を意味します。著者のメールアドレスなどの連絡先を記述します。 | 中には インライン要素のみ を含める事が出来ます。(かつてHTML4.01 Transitional迄はp 要素も含める事が可能でした。) |
blockquote |
BlockのQuotationという事で、そのまま ブロックレベルの引用 を表します。何行にもわたる段落を引用した場合などに用います。一言程度の短い引用にはq 要素を用いた方が適切です。また、多くのUAは左右にインデントをつけて表示しますが、それをデザイン目的に使うのはやめましょう。引用元を指定する cite 属性は可能な限りつけるようにしましょう。 cite 属性にはURIを記述しますから、httpで始まるURLの他にも例えばISBNなどを記述する事が可能です(ISBNは「 urn:isbn:********** 」の様に記述します)。引用元が cite 属性で表せない場合は title 属性を用いてもよいでしょう。 |
中には ブロック要素とscript 要素 を含める事が出来ます。 |
center |
Netscapeの独自拡張が、<div align="center"> の略記として正式に取り入れられたものです。この要素は 非推奨要素 です。 |
div 要素と同じく中にはブロック要素、インライン要素の両方 を含める事が出来ます。 |
dir |
Directory Listの頭3字を取って 複数の段から成るディレクトリリスト を表します。……が、ほぼ全てのUAはul 要素と同じように表示します。この要素は 非推奨要素 です。 |
中には li 要素のみ を含める事が出来ます。また、必ず1つ以上含める必要があります。当然ながら直接文字を書くことは出来ません。 |
div |
Divisionの頭3字から、区切りを表します。このタグでマークアップを行っても特に意味を持つ事はありません。class ,id 属性で意味を持たせましょう。スタイルシートを用いて凝ったスタイルを実現する際にお世話になる事でしょう。 |
中には ブロック要素、インライン要素の両方 を含める事が出来ます。 |
dl |
Definition Listの頭文字をとって 定義リスト を表します。用語とその解説を示すリストの作成に用います。 | 中には dt 要素とdd 要素のみ を含みます。また、各々1つ以上含める必要があり、dt とdd の数を等しくする必要はありません。(要するに1つの用語に複数の解説をしたり、複数の用語に1つの解説をつけても良いということです。) |
fieldset |
フォームの項目をグループ化 する時に用います。 | 中には ブロック要素、インライン要素の両方 を含める事が出来ます。また、legend 要素は必ず含めるようにしましょう。 |
form |
ボタンやテキスト入力欄などの フォームを規定 します。 | 中には ブロック要素とscript 要素 を含める事が出来ます。が、中に form 要素を含めてはなりません 。 |
h1 , h2 , h3 , h4 , h5 , h6 |
hはHeadingの頭文字です。断じて「ヘッダ」ではありません。Heading Level ?と考えると1が最も強調される事が分かりやすいでしょう。以上より 見出し を表すのであって、 文字のサイズを変えるだけのタグではありません 。 | 中には インライン要素のみ を含める事が出来ます。 |
hr |
Horizontal Ruleの頭文字をとって水平方向の罫線……すなわち 水平線 を表します。文書の区切りなどに利用します。ただ、現在はスタイルシートのborder プロパティを用いて同等の表示を行う事が可能ですし、そうすれば論理的に意味を持たせる事が可能です。なるべくスタイルシートを用いた方が良いでしょう。この考え方により、HTML4 Strictからhr 要素に関する全ての属性は非推奨とされました。(要素自体は残っています。)一応hr 要素は生き残っていますが、前述の方法を取る方が良いでしょう。なお、hr 要素を利用する場合は *title 属性を指定する事が推奨されています* 。これは何の区切りかをはっきりさせる為です。また、いかなる環境をも考慮しているXHTML Basicでは視覚的効果以外を持たないhr 要素は定義されません。 |
空要素タグ です。 |
isindex |
1行のテキスト入力項目を定義します。 非推奨要素 ですのでinput 要素を用いましょう。 |
空要素タグ です。 |
menu |
Menu Listは見て分かるまま、 メニューリスト (単一の段からなるメニューリスト)を表します。…が、ほぼ全てのUAはul 要素と同じように表示してしまいます。この要素は 非推奨要素 です。 |
中には li 要素のみ を1つ以上含みます。(ul 要素と異なりブロック要素を含む事が出来ない為階層を表現することはできません。)また、当然ながら直接文字を書くことは出来ません。 |
noframes |
ここではTransitionalで定義されているnoframes 要素を解説します。決してnoframe ではありません、 複数形 です。これはフレームが無効だった場合に表示される 代替文書 です。この中身はフレームに非対応のUAがフレーム内部に使われているページを直接表示した際に表示されます。Framesetで定義されるnoframes 要素も参照してください。(一般によく使われるのはFramesetに定義されるnoframes 要素です。) この要素はbody 要素の直下にのみ含まれます。フレームに記載した他コンテンツへのリンクを記述するのが良いでしょう。 |
ブロック要素、インライン要素の両方 を含める事が出来ます。 |
noscript |
スクリプトが実行できなかった際に表示される 代替文書 です。この要素の内容はスクリプトが実行された場合には表示されません。ページの製作者は閲覧者が必ずスクリプトを有効にしていると考えてはいけません。少なからず自らスクリプトを無効にしている人もいます。script 要素が複数存在する場合、noscript は最も近くにあるscript 要素に対応する……ハズです(が、実際はそこまで丁寧に対応してくれるUAは無さそうです)。何か情報(特に文字情報)を出力するスクリプトを設置する際には忘れずに記載しましょう。 |
中には ブロック要素のみ を含める事が出来ます。勿論ブロック要素の中にインライン要素を含める事が出来る場合、それは可能です。 |
ol |
Ordered Listの頭文字をとって 順序つきリスト を表します。 | 中には li 要素のみ を必ず1つ以上含みます。当然ながら直接文字を書くことは出来ません。 |
p |
Paragraphの頭文字pから 段落 を表します。多くのUAはただ前後に1行分の空白作りだしますが、 必ずその効果が得られるとは限りません 。 | 中には インライン要素のみ を含める事が出来ます。 |
pre |
Preformatted Textの頭3字から 整形済みテキスト を表します。多くのUAは空白文字や改行文字をそのまま表示し、等幅フォントで、文字サイズを小さめに表示します。但し、タブ文字は空白何字分になるか環境によって異なりますので含めないようにしましょう。 | 中には インライン要素のみ を含める事が出来ます。が、整形を崩すような……つまり 文字の幅を変えてしまうような要素を含むことは出来ません 。含めることの出来ないインライン要素は、img , object , applet , big , small , sub , sup , font , basefont です。例えsize 属性を持っていなくてもfont 要素を含める事は出来ません。また、pre 要素にbasefont の効果が及んでいる分には(途中で文字の大きさが変わるわけではないので)問題がありません。 |
table |
Tableはそのまま 表 を表します。使いこなすのが非常に難しい要素です。表を示すtable 要素でレイアウトを行うのは当然ながら好ましくありません。(但し、線形化して(タグを全て消し去って)も意味が通る場合は問題は起こりません。) |
中には caption 要素、colgroup 要素、col 要素、thead 要素、tfoot 要素、tbody 要素が含まれます 。また、thead 要素、tfoot 要素、tbody 要素はこの順番に含み、caption 要素、colgroup 要素、col 要素はthead 要素より前に記述します。tbody 要素より先にtfoot 要素を記述する点は十分に注意してください。 |
ul |
Unordered Listの頭文字をとって 順不同リスト を表します。箇条書き等に利用することとなるでしょう。 | 中には li 要素のみ を必ず1つ以上含みます。但しli 要素の中にブロック要素を含む分には問題ありません。また、当然ながら直接文字を書くことは出来ません。 |
インライン要素の一覧
続いて、インライン要素についてもっと詳しく知ってゆきましょう。 もうインライン要素が何のことだか忘れてしまった方はインライン要素って何だ?にお戻り下さい。
要素名 | 説明 | 内容 |
---|---|---|
a |
Anchorはそのまま、 アンカー を表します。リンク元とリンク先の両方を指定する事が可能です。(リンク元を基本属性であるid 属性で指定する事も可能です。最も新しい仕様であるXHTML 1.1ではname 属性は廃止されています。) |
中には a 要素を除くインライン要素のみ を含める事が出来ます。 |
abbr |
Abbreviationの略で、 略語 を表します。title 属性に略していない正式名称を記述します。多くのUAはマウスでポイントすると正式名称をポップアップ表示します。しかしMSIEはacronym 要素にのみ対応しており、abbr 要素には対応していません。 |
なお、「アセアン」と読むASEANなどは一つの単語となっているので、頭字語と判断するのが良いでしょう。頭字語はacronym 要素としてマークアップします。最も頭字語は略語の一種ですが。 |
acronym |
Acronymはそのまま、 頭字語 を表します。title 属性に略していない正式名称を記述します。多くのUAはマウスでポイントすると正式名称をポップアップ表示します。なお、「エイチティーエムエル」と読むHTMLは、一つの単語とまではなっていないので、頭字語でなく略語と判断するのが良いでしょう。略語はabbr 要素としてマークアップします。……といいつつも、このサイトでは頭字語は略語の一部であるという考えの下、abbr 要素に統一しています。 |
中には インライン要素のみ を含める事が出来ます。 |
applet |
Java Appletは、 Javaアプレットを埋め込む 際に用います。現在はobject 要素を使うべきとされ、 非推奨要素 です。 |
中には ブロック要素、インライン要素、param 要素 を含める事が出来ます。 |
b |
Boldの略で、 太字(ボールド) を表します。内容を太字で表示します。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートで太字を指定した方が良いでしょう。 | 中には インライン要素のみ を含める事が出来ます。 |
basefont |
Base Fontはそのまま、それ以降 ベースとなるフォント を表します。サイズや色を設定可能です。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートでフォントの指定をした方が良いでしょう。 | 空要素タグ です。 |
bdo |
BiDirection-Overrideの略で、 書字方向を強制的に指定 します。 | 中には インライン要素のみ を含める事が出来ます。 |
big |
Bigはそのまま 大きな字 を表します。内容を一回り大きな字で表示します。強調の意味を持ったem 要素やstrong 要素を使い、スタイルシートで文字サイズを指定した方が良いことが多いでしょう。 |
中には インライン要素のみ を含める事が出来ます。つまりbig 要素の中にbig 要素を含めると更に大きな字にすることが可能です。 |
br |
Breakの略で、 強制的に改行 させます。使うのはどうしても改行させたい時に限りましょう。例えば段落の変わり目ならば各々をp 要素としてマークアップするべきです。また、テキスト系サイトで先を見せたくないのならばスタイルシートを用いてmargin (マージン)を大きく設定した方が効果的です。また、極少数ながら複数のbr タグが続いた場合ひとまとめにして改行1つにするUAもありますし、そのように表示させている人もいます。br を沢山書いておけば……という過信は禁物です。 |
空要素タグ です。 |
button |
Push Buttonの略で、 押しボタン を表します。 | 中には iframe 要素、input 要素、select 要素、textarea 要素、label 要素、button 要素、isindex 要素、a 要素を除くインライン要素のみ を含める事が出来ます。また、button 要素内でイメージマップを使ってはいけません。 |
cite |
Citationの略で、 書籍や雑誌、新聞等の引用元のタイトル を表します。参考文献をマークアップするのもいいでしょう。多くのUAは斜体で表示します。 | 中には インライン要素のみ を含める事が出来ます。 |
code |
Codeはそのまま、 ソースコード を表します。コンピュータプログラムのソースコード、サンプルプログラムを記述する際に用います。多くのUAは等幅フォントで表示します。 | 中には インライン要素のみ を含める事が出来ます。 |
dfn |
Defining Termの略で、 技術的な用語や語句の定義 を表します。文章中で初めてある用語が出現した、その用語は後で説明・定義する…といった場合に用います。 | 中には インライン要素のみ を含める事が出来ます。 |
em |
Emphasisの略で、 強調 を表します。多くのUAは斜体で表示します。 | 中には インライン要素のみ を含める事が出来ます。 |
font |
Fontはそのまま、 フォント に関する指定を行います。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートでフォントの指定をした方が良いでしょう。 | 中には インライン要素のみ を含める事が出来ます。 |
i |
Italicの略で、 斜体(イタリック) を表します。内容を斜体で表示します。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートで斜体を指定した方が良いでしょう。 | 中には インライン要素のみ を含める事が出来ます。 |
iframe |
Inline Frameの略で、 インラインフレーム を作る際に用います。 | 中には ブロック要素、インライン要素の両方 を含める事が出来ます。記述した内容はインラインフレームを利用できない場合に表示されます。中に「インラインフレーム対応ブラウザでお越し下さい」などと書いても意味が無い事は言うまでもありません。きちんと代替となる文書を記述するようにしましょう。 |
img |
Imageの略で、 画像 を表します。 必ずalt 属性を記述 しましょう。alt 属性は必須です。意味のない画像の場合にはalt="" と記述します。時折alt="画像" と記述しているサイトを見かけますが好ましくありません。 |
空要素タグ です。 |
input |
様々な種類の フォームの入力項目 を表します。種類はtype 属性によって指定できます。このあたりの詳しい事は他のサイトを参照して下さい。 |
空要素タグ です。 |
kbd |
Keyboardの略で、 キーボードなどから入力された(される)テキスト を表します。 | 中には インライン要素のみ を含める事が出来ます。 |
label |
Labelはそのまま、 入力項目のラベル を表します。ラベルをクリックすると結びつけた入力項目をクリックした事になります。入力項目とラベルを結び付けるには2通りの方法があります。for 属性を使う方法と、ラベルのテキストと入力項目をlabel 要素内に置く方法です。 |
中には label 要素を除いたインライン要素のみ を含める事が出来ます。 |
map |
Client Side Image Map、そのまま クライアントサイドイメージマップ を表します。個々のリンクは、area 要素かa 要素のどちらかで指定します。 |
中には ブロック要素 か、もしくは 一つ以上のarea 要素 を含みます。 |
object |
オブジェクトを文書中に埋め込む 際に用います。動画、画像、なんでも可能です。UAがサポートしていないオブジェクトが指定された場合、その下に入れ子にされたオブジェクトが埋め込まれます(文字かもしれませんが)。 | 中には ブロック要素、インライン要素、param 要素 を含める事が出来ます。但しhead 要素内のobject 要素に関しては、head 要素に含む事が出来るものに限ります。 |
q |
Quotationの頭文字で、 引用句 を表します。長い引用にはblockquote 要素を用いる方が適切です。引用元を指定するcite 属性は可能な限りつけるようにしましょう。cite 属性にはURIを記述しますから、httpで始まるURLの他にも例えばISBNなどを記述する事が可能です(ISBNは「urn:isbn:**********」の様に記述します)。引用元がcite 属性で表せない場合はtitle 属性を用いてもよいでしょう。 |
中には インライン要素のみ を含める事が出来ます。 |
s |
Strike Throughの略で、 打ち消し線 を表します。内容を打ち消し線付きで表示します。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートで打ち消し線を指定した方が良いと思います。 | 中には インライン要素のみ を含める事が出来ます。 |
samp |
Sampleの略で、そのまま 出力サンプル を表します。ソースコードそのものはcode 要素を用いた方が適切です。多くのUAは等幅フォントで表示します。 |
中には インライン要素のみ を含める事が出来ます。 |
script |
Scriptはそのまま スクリプト言語を記述する際 に用います。スクリプトは要素内に直接記述するか、src 属性を指定して外部のファイルから読み込むことになります。また、 type 属性は必須 です。忘れずに記述しましょう。 |
中には スクリプトのみ を含める事が出来ます。但しスクリプトの途中に </ を含むのは不正です。正しい実装をしているUAはそれをscriptの終了とみなします。 |
select |
Select Listの略で、 選択リスト を表します。 | 中には option 要素、optgroup 要素 を含める事が出来ます。 |
small |
smallはそのままで、 小さな字 を表します。内容を一回り小さな字で表示します。意味を持った要素を使い、スタイルシートで文字サイズを指定した方が良いでしょう。 | 中には インライン要素のみ を含める事が出来ます。つまりsmall 要素の中にsmall 要素を含めると更に小さな字にすることが可能です。 |
span |
spanはそのまま範囲を表します。div 要素と同様に、特に意味はありません。class ,id 属性で意味を持たせましょう。スタイルシートを用いる際以外にも、lang 属性(XHTMLではxml:lang 属性)を用いて言語を示す事もあります。 |
中には インライン要素のみ を含める事が出来ます。 |
strike |
Strike Throughの1語をそのままで、 打ち消し線 を表します。内容を打ち消し線付きで表示します。s 要素よりちょっぴり歴史が長いです。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートで打ち消し線を指定した方が良いでしょう。 |
中には インライン要素のみ を含める事が出来ます。 |
strong |
Strong Emphasisの略で、 より強い強調 を表します。多くのUAは太字で表示します。ただ斜体表示が嫌だからという理由でem 要素を避けるのはやめましょう。スタイルシートで指定すればよいだけです。 |
中には インライン要素のみ を含める事が出来ます。 |
sub |
Subscriptの略で、 下付文字 を表します。内容を下付文字で表示します。数学や化学、物理等に関する文章を書く際に用いると便利ですが、意味を持った要素を使い、スタイルシートで指定したり、場合によってはHTMLでは無くMathMLで記述した方が良い事もあります。 | 中には インライン要素のみ を含める事が出来ます。 |
sup |
Superscriptの略で、 上付文字 を表します。内容を上付文字で表示します。数学や化学、物理等に関する文章を書く際に用いると便利ですが、意味を持った要素を使い、スタイルシートで指定したり、場合によってはHTMLでは無くMathMLで記述した方が良い事もあります。 | 中には インライン要素のみ を含める事が出来ます。 |
textarea |
複数行のテキストを入力させる入力項目 を表します。 | 中には テキストのみ を含める事が出来ます。含まれる改行や空白文字はそのまま扱われます。また、初期状態において& や< などをそのまま書くことは出来ません。文字参照を用いてそれぞれ& 、< と書いておきましょう。 |
tt |
Teletyped Textの頭文字をとって 等幅フォント を表します。内容を等幅のフォントで表示します。意味を持った要素を使い、スタイルシートで等幅フォントを指定した方が良いと思います。 | 中には インライン要素のみ を含める事が出来ます。 |
u |
Underlineの略で、 下線 を表します。内容を下線付きで表示します。この要素は 非推奨要素 です。意味を持った要素を使い、スタイルシートで下線を指定した方が良いと思います。 | 中には インライン要素のみ を含める事が出来ます。 |
var |
Variableの略で、 変数・引数 を表します。基本的にcode 要素と共に用いることになるでしょう。多くのUAは内容を斜体で表示します。 |
中には インライン要素のみ を含める事が出来ます。 |
その他の要素の一覧
ついでにその他の要素についても知っておきましょう。
要素名 | 説明 | 内容 |
---|---|---|
area |
クライアントサイドイメージマップに個々のリンクを設定する 際に用います。忘れる人も多く見受けられますが、 alt 属性は必須 です。 |
空要素タグ です。 |
base |
相対URIを解釈する際に利用する基準を指定します。 | 空要素タグ です。 |
body |
HTML文書の 本文を記述 します。1つのHTML文書にbody タグは複数存在しません。 |
中には ブロック要素、script 要素 を含める事が出来ます。(かつてHTML4.01 Transitional迄はインライン要素を直接含める事が可能でした。) |
caption |
Captionはそのまま、 表題 を表します。table 要素の開始タグ(即ち<table> )の直後に記述します。 |
中には インライン要素のみ を含みます。 |
col |
Table Columnの略で、テーブルの 列にスタイルを指定する 際に用います。適応させる列数をspan 属性で指定可能です。この要素自体は特に意味を持っていません。なお、グループ化しないという点でcolgroup 要素とは大きく異なります。table 要素かcolgroup 要素の子要素として存在します。 |
空要素タグ です。 |
colgroup |
Table Column Groupの略で、テーブルにおける 列のグループ構造 を表します。何行をグループ化するのかをspan 属性で指定します。但しcol 要素を含む場合span 属性は指定しません。table 要素の子要素として存在します。グループ化しない場合はcol 要素を用いるのが適切です。 |
中には必要に応じて col 要素 を含みます。 |
dd |
Definition Descriptionの略で 用語の解説 を表します。dl 要素の子要素で、対応するdt 要素が存在します。 |
中には ブロック要素、インライン要素の両方 を含める事が出来ます。 |
del |
Deleted Textの略で 削除部 を表します。del タグを取り去ってもマークアップに問題が出ないように使いましょう。この要素はins 要素と同様に特殊です。中にブロック要素を含む場合は ブロック要素 として振る舞い、含まない場合は インライン要素 として振る舞います。 |
中には インライン要素 を含める事が出来ます。ブロック要素として振舞っている場合は ブロック要素 も含める事が出来ます。中に含むものによって振舞い方が変わります。 |
dt |
Definition Termの略で 定義する用語 を表します。dl 要素の子要素であり、対応するdd 要素が存在します。 |
中には インライン要素のみ を含める事が出来ます。 |
frame |
Frameはそのまま、 フレームについて を指定します。frameset 要素の子要素として存在します。また、必須ではありませんがtitle 属性は記述しておくべきです。また、name 属性にも理解を助ける名前をつけるようにしましょう。サイズを固定したり、スクロールバーの表示・非表示を指定できたりしますが、環境によって表示されない空間が出来る可能性があります。よほどの理由がない限り避けた方が良いでしょう。HTML4 FramesetとXHTML1.0 Framesetでのみ定義されています。 |
空要素タグ です。 |
frameset |
Frame Setはそのまま、 フレームを定義 する際に用います。html 要素かframeset 要素の子要素として存在します。HTML4 FramesetとXHTML 1.0 Framesetでのみ定義されています。 |
中には frameset 要素かframe 要素* を必ず1つ以上含みます。また、フレームを使う際には *noframes 要素 を含めるようにしましょう。 |
head |
タイトルなどの ヘッダ情報を記述 します。 | 中には title 要素 を 必ず1つ含みます 。他に base 要素、link 要素、meta 要素、style 要素、script 要素、object 要素、isindex 要素 を含める事が出来ます。 |
html |
HTML文書の ルート要素 です。時折HTML文書は とおっしゃる人がいますが、誤りです。DTD宣言から始まります。(XHTMLならXML宣言ですが。) |
中には head 要素、body 要素 を必ず1つづつ含みます。 |
ins |
Inserted Textの略で 挿入部 を表します。ins タグを取り去ってもマークアップに問題が出ないように使いましょう。この要素はdel 要素と同様に特殊です。中にブロック要素を含む場合は ブロック要素 として振る舞い、含まない場合は インライン要素 として振る舞います。 |
中には インライン要素 を含める事が出来ます。ブロック要素として振舞っている場合は ブロック要素 も含める事が出来ます。中に含むものによって振舞い方が変わります。 |
legend |
Fieldset Legendの略で、 fieldset 要素の表題 を表します。 |
中には インライン要素のみ を含める事が出来ます。 |
li |
List Itemの略で、 リストの項目 を表します。dir 要素、menu 要素、ol 要素、ul 要素の子要素として用い、項目を表します。 |
中には ブロック要素、インライン要素の両方 を含める事が出来ます。 |
link |
Linkはそのまま、 別の文書との関係 を表します。便利な要素なのですが、スタイルシートの読み込み以外にはあまり使われていないのが現状です。非常に有意義ですので是非導入してください。詳細は「linkのススメ」を参照して下さい。 | 空要素タグ です。 |
meta |
Meta Dataは、 その他の情報 を表します。詳しい説明は割愛します。是非とも他サイトを参照してください。 | 空要素タグ です。 |
noframes (Frameset) |
frameに非対応のUAに対して表示するテキストです。HTML4 FramesetとXHTML 1.0 Framesetでのみ定義されています。この要素は frameset 要素の直下 に含みます。html要素の直下に書いている人を見かけますが、間違いです。また、Transitionalで定義されているnoframes 要素とは根本的に異なるものです。適宜そちらも参照してください。この要素の中には丸ごと 一つの文書が記述されます 。(勿論noframes 要素を含むことは出来ませんが。)しばしば「フレーム対応ブラウザでご覧下さい」などと書かれますが、好ましくありません。まして「フレーム対応ブラウザはこちらから入手してください」なんて書いてあったら最悪です。(そんなことは知っていて使っている可能性が高いですから。)面倒かもしれませんが、きちんと代替文書となりうるテキストを含めましょう。もしメニューフレームが存在するならとりあえずメニューとなりうるリンクを羅列しておくのがいいと思います。そして各ページにもTransitionalで定義されているnoframes 要素を用いてメニューを書いておけば完璧です。 |
|
optgroup |
Option Groupの略で、 option 要素をグループ化 する際に用います。 |
中には option 要素 を必ず1つ以上含みます。 |
option |
Optionはそのまま、 選択肢 を表します。select 要素、optgroup 要素の子要素として存在します。 |
中には option 要素 を必ず1つ以上含みます。 |
param |
Parameterの略で、 パラメーター を表します。applet 要素、object 要素の子要素として用い、それらにパラメータを設定します。param 要素は親要素の開始タグ(即ち<applet> か<object> )の直後に記述します。 |
空要素タグ です。 |
style |
スタイルを直接HTML文書に記述する場合に用います。利便性を考えるなら、なるべくlink 要素を用いて、外部読み込みを行った方が良いでしょう。また、XHTML Basicでは定義されません。 |
中には スタイルシート を記述します。HTML文書の場合はstyle 要素に対応していないUAを考慮してコメントアウト(<!-- ここに記述する --> )すると良いでしょう。しかし、これをXHTML文書で行ってはいけません。本当にコメントアウトされてしまいます。また、XHTML文書の場合、内容として< や& などの文字を記述する事が出来ません。どうしても記述したい場合は外部から読み込む行う必要があります。 |
tbody |
Table Bodyの略で、 テーブル本体 を表します。table 要素の子要素として存在します。本体を更にいくつかのグループに分けたい場合はtbody 要素を複数用います。HTMLでは 省略可能 なタグとして定義されています。その為table 要素直下にtr 要素を記述した場合、tbody 要素が省略されているとみなされるハズです。それに対しXHTMLでは 任意 で記述するタグとして定義されています。その為table 要素直下にtr 要素を含んでも不正とはなりません。尚、CSSでtbody 要素を用いる場合はtbody タグを省略しない方が無難です。 |
中には tr 要素 を必ず1つ以上含みます。 |
td |
Table Data Cellの略で、 テーブルのデータセル を表します。tr 要素の子要素として存在します。中にtable 要素を含めることも可能ですが、多くのUAはテーブルを全て読み込んでから表示する為入れ子になったテーブルを表示するのには時間がかかります。なるべく避ける方が良いでしょう。(なお、テーブルの入れ子はいかなる環境をも考慮しているXHTML Basicでは禁止されています。) |
中には ブロック要素、インライン要素の両方 を含める事が出来ます。 |
tfoot |
Table Footerの略で、 テーブルのフッタ を表します。table 要素の子要素として存在します。この要素はtbody 要素より前に記述することに注意が必要です。 |
中には tr 要素 を必ず1つ以上含みます。 |
th |
Table Header Cellの略で、 テーブルの見出しセル を表します。tr 要素の子要素として存在します。多くのUAは文字を太字にしてセンタリングするようですが、その為にtd タグでは無くth タグを用いるのはやめましょう。そう表示されるとは限りません。また、中にtable 要素を含めることも可能ですが、多くのUAはテーブルを全て読み込んでから表示する為入れ子になったテーブルを表示するのには時間がかかります。なるべく避ける方が良いでしょう。(なお、テーブルの入れ子はいかなる環境をも考慮しているXHTML Basicでは禁止されています。) |
中には ブロック要素、インライン要素の両方 を含める事が出来ます。 |
thead |
Table Headerの略で、 テーブルのヘッダ を表します。table 要素の子要素として存在します。 |
中には tr 要素 を必ず1つ以上含みます。 |
title |
Titleはそのまま、 文書のタイトル を表します。これは 必ず記述する 必要があります。英語以外の言語を用いる時は文字コードを指定してからtitle 要素を記述しましょう。 |
中には 文字列のみ を含みます。また、文字実態参照も有効になることが期待されます。(わざわざこの様な表現をすると云うことは一部ブラウザの実装に問題がある事を暗示しています。)& や< は& 、< の様に記述しましょう。 |
tr |
Table Rowの略で、 テーブルの中の1行 を表します。tbody 要素、tfoot 要素、thead 要素の子要素として存在します。XHTML文書の場合はtable 要素の子要素として存在する場合もあります。) |
中には td 要素 を必ず1つ以上含みます。 |