ブロック要素とインライン要素の違いは非常に重要にも関わらず、気にも留めずにHTMLを記述している人が多く見受けられます。ここできちんと理解してしまいましょう。
ブロック要素とは、文書の骨組みです。例えば見出しを表す<h1>や、段落を表す<p>などがブロック要素です。これらは視覚表現をするUA(例えばMSIEやMozillaなど)で、特にスタイルを指定しない場合、幅を画面いっぱいに取り、前後が改行されます。簡単に言ってしまうならば、ブロックを作り出します。これらの中には大抵他のブロック要素や、インライン要素を含む事が出来ます。ブロック要素の一覧はインライン要素を知ってから説明することにしたいと思います。
inlineを直訳すると「行内」であるとおり、インライン要素は行の中の文字に論理的な意味を持たせたりします。例えば強調を表す<em>や、フォームの部品となる<input>、リンクに用いる<a>などがインライン要素です。インライン要素の中にインライン要素を含むことはありますが、インライン要素の中にブロック要素を含むことはごく稀な例外を除き殆どありません。
ポイントは2つです。1つめはタグを意味から理解する事。この助けとなるように元となった英単語を分かる範囲で記載しました。2つめは包括する要素は何かを知る事。これを知らずに誤って記述すると、予期しないところに終了タグが補われてしまうかもしれません。
これらを知ってもらう為の一覧ですので、基本的な使い方は省略している場合があります。他の優秀なサイトを参照してください。また、あまり使われない要素についての解説は簡略化されている場合があります。尚、この一覧はHTML4を基本に記載し、アルファベット順に並べてあります。
非推奨要素とは本来のHTMLの趣旨から外れているとしてHTML4.01 Strictから定義されていない、ある意味お先真っ暗な要素です。使わないよう心がけましょう。このサイトでの改善の最終目的の一つはこれらをなくす事にあります。(とはいえUAはサポートを続ける事が推奨されていますが。)
では、ブロック要素についてもっと詳しく知ってゆきましょう。早くもブロック要素が何のことだか忘れてしまった方はブロック要素って何だ?にお戻り下さい。
addressp要素も含める事が可能でした。)blockquoteq要素を用いた方が適切です。また、多くのUAは左右にインデントをつけて表示しますが、それをデザイン目的に使うのはやめましょう。cite属性は可能な限りつけるようにしましょう。cite属性にはURIを記述しますから、httpで始まるURLの他にも例えばISBNなどを記述する事が可能です(ISBNは「urn:isbn:**********」の様に記述します)。引用元がcite属性で表せない場合はtitle属性を用いてもよいでしょう。script要素を含める事が出来ます。center<div align="center">の略記として正式に取り入れられたものです。この要素は非推奨要素です。div要素と同じく中にはブロック要素、インライン要素の両方を含める事が出来ます。dirul要素と同じように表示します。この要素は非推奨要素です。li要素のみを含める事が出来ます。また、必ず1つ以上含める必要があります。当然ながら直接文字を書くことは出来ません。divclass,id属性で意味を持たせましょう。スタイルシートを用いて凝ったスタイルを実現する際にお世話になる事でしょう。dldt要素とdd要素のみを含みます。また、各々1つ以上含める必要があり、dtとddの数を等しくする必要はありません。(要するに1つの用語に複数の解説をしたり、複数の用語に1つの解説をつけても良いということです。)fieldsetlegend要素は必ず含めるようにしましょう。formscript要素を含める事が出来ます。が、中にform要素を含めてはなりません。h1, h2, h3, h4, h5, h6hrborderプロパティを用いて同等の表示を行う事が可能ですし、そうすれば論理的に意味を持たせる事が可能です。なるべくスタイルシートを用いた方が良いでしょう。この考え方により、HTML4 Strictからhr要素に関する全ての属性は非推奨とされました。(要素自体は残っています。)一応hr要素は生き残っていますが、前述の方法を取る方が良いでしょう。なお、hr要素を利用する場合はtitle属性を指定する事が推奨されています。これは何の区切りかをはっきりさせる為です。また、いかなる環境をも考慮しているXHTML Basicでは視覚的効果以外を持たないhr要素は定義されません。isindexinput要素を用いましょう。ul要素と同じように表示してしまいます。この要素は非推奨要素です。li要素のみを1つ以上含みます。(ul要素と異なりブロック要素を含む事が出来ない為階層を表現することはできません。)また、当然ながら直接文字を書くことは出来ません。noframesnoframes要素を解説します。決してnoframeではありません、複数形です。これはフレームが無効だった場合に表示される代替文書です。この中身はフレームに非対応のUAがフレーム内部に使われているページを直接表示した際に表示されます。Framesetで定義されるnoframes要素も参照してください。(一般によく使われるのはFramesetに定義されるnoframes要素です。)body要素の直下にのみ含まれます。フレームに記載した他コンテンツへのリンクを記述するのが良いでしょう。noscriptscript要素が複数存在する場合、noscriptは最も近くにあるscript要素に対応する……ハズです(が、実際はそこまで丁寧に対応してくれるUAは無さそうです)。何か情報(特に文字情報)を出力するスクリプトを設置する際には忘れずに記載しましょう。olli要素のみを必ず1つ以上含みます。当然ながら直接文字を書くことは出来ません。ppreimg, object, applet, big, small, sub, sup, font, basefontです。例えsize属性を持っていなくてもfont要素を含める事は出来ません。また、pre要素にbasefontの効果が及んでいる分には(途中で文字の大きさが変わるわけではないので)問題がありません。tabletable要素でレイアウトを行うのは当然ながら好ましくありません。(但し、線形化して(タグを全て消し去って)も意味が通る場合は問題は起こりません。)caption要素、colgroup要素、col要素、thead要素、tfoot要素、tbody要素が含まれます。また、thead要素、tfoot要素、tbody要素はこの順番に含み、caption要素、colgroup要素、col要素はthead要素より前に記述します。tbody要素より先にtfoot要素を記述する点は十分に注意してください。caption要素を2つ以上含むことは出来ません。colgroup要素、col要素は順不同でいくつでも含める事が出来ます。含めなくても構いません。thead要素、tfoot要素を2つ以上含むことは出来ません。tbody要素はいくつ含んでも構いません。詳しくはtbody要素も参照してください。また、XHTML Basicではtableタグの中にtableタグを記述する事(ネスト)を禁止しています。これはXHTML Basicがあらゆる環境を考慮していることに起因します。ulli要素のみを必ず1つ以上含みます。但しli要素の中にブロック要素を含む分には問題ありません。また、当然ながら直接文字を書くことは出来ません。続いて、インライン要素についてもっと詳しく知ってゆきましょう。もうインライン要素が何のことだか忘れてしまった方はインライン要素って何だ?にお戻り下さい。
aid属性で指定する事も可能です。最も新しい仕様であるXHTML 1.1ではname属性は廃止されています。)a要素を除くインライン要素のみを含める事が出来ます。abbrtitle属性に略していない正式名称を記述します。多くのUAはマウスでポイントすると正式名称をポップアップ表示します。しかしMSIEはacronym要素にのみ対応しており、abbr要素には対応していません。acronym要素としてマークアップします。最も頭字語は略語の一種ですが。acronymtitle属性に略していない正式名称を記述します。多くのUAはマウスでポイントすると正式名称をポップアップ表示します。abbr要素としてマークアップします。……といいつつも、このサイトでは頭字語は略語の一部であるという考えの下、abbr要素に統一しています。appletobject要素を使うべきとされ、非推奨要素です。param要素を含める事が出来ます。bbasefontbdobigem要素やstrong要素を使い、スタイルシートで文字サイズを指定した方が良いことが多いでしょう。big要素の中にbig要素を含めると更に大きな字にすることが可能です。brp要素としてマークアップするべきです。また、テキスト系サイトで先を見せたくないのならばスタイルシートを用いてmargin(マージン)を大きく設定した方が効果的です。brタグが続いた場合ひとまとめにして改行1つにするUAもありますし、そのように表示させている人もいます。brを沢山書いておけば……という過信は禁物です。iframe要素、input要素、select要素、textarea要素、label要素、button要素、isindex要素、a要素を除くインライン要素のみを含める事が出来ます。また、button要素内でイメージマップを使ってはいけません。citecodedfnemfontiiframeimgalt属性を記述しましょう。alt属性は必須です。意味のない画像の場合にはalt=""と記述します。時折alt="画像"と記述しているサイトを見かけますが好ましくありません。inputtype属性によって指定できます。このあたりの詳しい事は他のサイトを参照して下さい。kbdlabelfor属性を使う方法label要素内に置く方法label要素を除いたインライン要素のみを含める事が出来ます。maparea要素かa要素のどちらかで指定します。area要素を含みます。objectparam要素を含める事が出来ます。但しhead要素内のobject要素に関しては、head要素に含む事が出来るものに限ります。qblockquote要素を用いる方が適切です。cite属性は可能な限りつけるようにしましょう。cite属性にはURIを記述しますから、httpで始まるURLの他にも例えばISBNなどを記述する事が可能です(ISBNは「urn:isbn:**********」の様に記述します)。引用元がcite属性で表せない場合はtitle属性を用いてもよいでしょう。ssampcode要素を用いた方が適切です。多くのUAは等幅フォントで表示します。scriptsrc属性を指定して外部のファイルから読み込むことになります。また、type属性は必須です。忘れずに記述しましょう。</を含むのは不正です。正しい実装をしているUAはそれをscriptの終了とみなします。selectoption要素、optgroup要素を含める事が出来ます。smallsmall要素の中にsmall要素を含めると更に小さな字にすることが可能です。spandiv要素と同様に、特に意味はありません。class,id属性で意味を持たせましょう。スタイルシートを用いる際以外にも、lang属性(XHTMLではxml:lang属性)を用いて言語を示す事もあります。strikes要素よりちょっぴり歴史が長いです。この要素は非推奨要素です。意味を持った要素を使い、スタイルシートで打ち消し線を指定した方が良いでしょう。strongem要素を避けるのはやめましょう。スタイルシートで指定すればよいだけです。subsuptextarea&や<などをそのまま書くことは出来ません。文字参照を用いてそれぞれ&、<と書いておきましょう。ttuvarcode要素と共に用いることになるでしょう。多くのUAは内容を斜体で表示します。ついでにその他の要素についても知っておきましょう。
areaalt属性は必須です。basebodybodyタグは複数存在しません。script要素を含める事が出来ます。(かつてHTML4.01 Transitional迄はインライン要素を直接含める事が可能でした。)captiontable要素の開始タグ(即ち<table>)の直後に記述します。colspan属性で指定可能です。この要素自体は特に意味を持っていません。なお、グループ化しないという点でcolgroup要素とは大きく異なります。table要素かcolgroup要素の子要素として存在します。colgroupspan属性で指定します。但しcol要素を含む場合span属性は指定しません。table要素の子要素として存在します。グループ化しない場合はcol要素を用いるのが適切です。col要素を含みます。dddl要素の子要素で、対応するdt要素が存在します。deldelタグを取り去ってもマークアップに問題が出ないように使いましょう。この要素はins要素と同様に特殊です。中にブロック要素を含む場合はブロック要素として振る舞い、含まない場合はインライン要素として振る舞います。dtdl要素の子要素であり、対応するdd要素が存在します。frameframeset要素の子要素として存在します。また、必須ではありませんがtitle属性は記述しておくべきです。また、name属性にも理解を助ける名前をつけるようにしましょう。サイズを固定したり、スクロールバーの表示・非表示を指定できたりしますが、環境によって表示されない空間が出来る可能性があります。よほどの理由がない限り避けた方が良いでしょう。HTML4 FramesetとXHTML1.0 Framesetでのみ定義されています。framesethtml要素かframeset要素の子要素として存在します。HTML4 FramesetとXHTML 1.0 Framesetでのみ定義されています。frameset要素かframe要素を必ず1つ以上含みます。また、フレームを使う際にはnoframes要素を含めるようにしましょう。headtitle要素を必ず1つ含みます。他にbase要素、link要素、meta要素、style要素、script要素、object要素、isindex要素を含める事が出来ます。htmlHTML文書はhtmlタグで始まるとおっしゃる人がいますが、誤りです。DTD宣言から始まります。(XHTMLならXML宣言ですが。)head要素、body要素を必ず1つづつ含みます。insinsタグを取り去ってもマークアップに問題が出ないように使いましょう。この要素はdel要素と同様に特殊です。中にブロック要素を含む場合はブロック要素として振る舞い、含まない場合はインライン要素として振る舞います。legendfieldset要素の表題を表します。lidir要素、menu要素、ol要素、ul要素の子要素として用い、項目を表します。linkmetanoframes (Frameset)frameset要素の直下に含みます。html要素の直下に書いている人を見かけますが、間違いです。また、Transitionalで定義されているnoframes要素とは根本的に異なるものです。適宜そちらも参照してください。noframes要素を含むことは出来ませんが。)しばしば「フレーム対応ブラウザでご覧下さい」などと書かれますが、好ましくありません。まして「フレーム対応ブラウザはこちらから入手してください」なんて書いてあったら最悪です。(そんなことは知っていて使っている可能性が高いですから。)面倒かもしれませんが、きちんと代替文書となりうるテキストを含めましょう。もしメニューフレームが存在するならとりあえずメニューとなりうるリンクを羅列しておくのがいいと思います。そして各ページにもTransitionalで定義されているnoframes要素を用いてメニューを書いておけば完璧です。optgroupoption要素をグループ化する際に用います。option要素を必ず1つ以上含みます。optionselect要素、optgroup要素の子要素として存在します。option要素を必ず1つ以上含みます。paramapplet要素、object要素の子要素として用い、それらにパラメータを設定します。param要素は親要素の開始タグ(即ち<applet>か<object>)の直後に記述します。stylelink要素を用いて、外部読み込みを行った方が良いでしょう。また、XHTML Basicでは定義されません。style要素に対応していないUAを考慮してコメントアウト(<!-- ここに記述する -->)すると良いでしょう。しかし、これをXHTML文書で行ってはいけません。本当にコメントアウトされてしまいます。また、XHTML文書の場合、内容として<や&などの文字を記述する事が出来ません。どうしても記述したい場合は外部から読み込む行う必要があります。tbodytable要素の子要素として存在します。本体を更にいくつかのグループに分けたい場合はtbody要素を複数用います。table要素直下にtr要素を記述した場合、tbody要素が省略されているとみなされるハズです。それに対しXHTMLでは任意で記述するタグとして定義されています。その為table要素直下にtr要素を含んでも不正とはなりません。尚、CSSでtbody要素を用いる場合はtbodyタグを省略しない方が無難です。tr要素を必ず1つ以上含みます。tdtr要素の子要素として存在します。中にtable要素を含めることも可能ですが、多くのUAはテーブルを全て読み込んでから表示する為入れ子になったテーブルを表示するのには時間がかかります。なるべく避ける方が良いでしょう。(なお、テーブルの入れ子はいかなる環境をも考慮しているXHTML Basicでは禁止されています。)tfoottable要素の子要素として存在します。この要素はtbody要素より前に記述することに注意が必要です。tr要素を必ず1つ以上含みます。thtr要素の子要素として存在します。多くのUAは文字を太字にしてセンタリングするようですが、その為にtdタグでは無くthタグを用いるのはやめましょう。そう表示されるとは限りません。また、中にtable要素を含めることも可能ですが、多くのUAはテーブルを全て読み込んでから表示する為入れ子になったテーブルを表示するのには時間がかかります。なるべく避ける方が良いでしょう。(なお、テーブルの入れ子はいかなる環境をも考慮しているXHTML Basicでは禁止されています。)theadtable要素の子要素として存在します。tr要素を必ず1つ以上含みます。titletitle要素を記述しましょう。&や<は&、<の様に記述しましょう。trtbody要素、tfoot要素、thead要素の子要素として存在します。XHTML文書の場合はtable要素の子要素として存在する場合もあります。)td要素を必ず1つ以上含みます。