入れ子の話をするときには要素の親子関係というものが重要になります。おおざっぱにいえば、あるマーク付けがネスト（入れ子）された時、マーク付けされた方（内側の方）が子になり、マーク付けした方（外側の方）が親と便宜上呼んでいるのです。例えば、
<p>HTML文書を書く際、重要なのは、作ったHTML文書が<em>どのような形で利用されるか</em>を考えないことだ。</p>
といった場合、p要素はem要素の『親』であり、em要素はp要素の『子』であると言えます。ちなみに、子の子は孫、親の親は祖、同じ親の子供は兄弟と呼びます。ともあれ、入れ子の関係をそのまま家族関係に当てはめれば良いだけの話です。
<p>山田さんは<q><em>今日</em>、港で花火大会があるらしいよ</q>と私に教えてくれた。
でも、花火大会の公式サイトには<em>明日</em>と書いてある。いったいどっちが正しいんだろう？</p>
この場合、「今日」とマーク付けしたem要素はq要素の子であり、p要素の孫になります。反対にem要素からみればq要素は親でp要素は祖になります。また、「明日」とマーク付けしたem要素はq要素と兄弟になります。
さて、いきなり少し厄介な話をしますが、HTML（というより、マーク付け言語には）には規則として、ある要素にはそれぞれ子に持って良い要素といけない要素が定義されています。
たとえばの話、見出し語の中に段落だの箇条書きだのが入るというのは文章の作法として不自然ですよね。このように、本来存在するとおかしい子要素はあらかじめHTML上でも排除されているのです。同じ引用文を表すblockquote要素とq要素の区別も、その延長線上にあるものだと最初のうちは理解して下さい。
HTMLでは話をわかりやすくするために、要素をh1-h6要素・p要素・blockquote要素・ul/ol要素・li要素のように行を構成する（もしくは行を抱括する）ブロック要素、q要素・a要素・em要素のように行内に収まるインライン要素としておおざっぱに区別しています。
まあ、blockquote要素などはともかく、他は常識的に考えれば分るような規則ですので、書き続けていくうちにおいおい理解出来てくると思います。とりあえず、ざっと並べてみましょう。
これによって、次のような文章は文法違反であることが分ります。
<em><p>HTMLは難しくない。難しく捉えることは簡単だが。</p></em> ※em要素はp要素を子に持ってはいけない
もっとも、文章の構成とマーク付けの考え方と手順さえしっかり覚えていれば、このような文法違反をすることはまずないでしょう。
<p><em>HTMLは難しくない。難しく捉えることは簡単だが。</em></p> ※em要素は段落ではなく段落内の語句を強調するもの
但し、ブロック要素・インライン要素という観念は、おおざっぱすぎるがゆえに奇妙な点もいくつかあります。他所の解説サイトでは色々と独自の解釈を展開させていますが、そもそも子要素についてはHTML独特の『癖』という毛色が強いと私は思います。
ある意味、分りにくければ「そういうものだ」と割り切ってしまう必要もあるかも知れません。
例えば箇条書きの入れ子であれば、
<ul>
<li>第一章：HTMLとは
<ul>
<li>第一節：HTMLの概略</li>
<li>第二節：HTMLの考え方</li>
<li>第三節：HTMLの基本的な文法</li>
</ul>
</li>
<li>第二章：具体的な事例</li>
<ul>
<li>...</li>
</ul>
</li>
</ul>
といった具合です。しかしながら、あまりごちゃごちゃと深い入れ子を必要とする文章を書くと、後々読み返すときに大変になりますから、出来るだけ簡素なマーク付けを心がけるようにしましょう。
入れ子をマーク付ける際に注意しておかなければならないのは、開始タグと終了タグは常に対称の関係になっていなければならないという点です。例えば、次のような文章は文法違反です。
<p>夏目漱石の代表作「吾輩は猫である」の冒頭は<q>吾輩は猫である。名前はまだない</p>です。</q>
この文章では、p要素とq要素の開始タグと終了タグが互い違いになっています。これでは最後の「です。」の部分が文章節でなくて引用文という不思議な状態になってしまいますし、親子関係も不明瞭です。そういったことを避けるためにも、親要素は子要素を完全に抱括していなければなりません。
この「『入れ子」という関係』こそ重要なのである
X={3＋2(4−1}×3
という書き方をせず、
この「『入れ子』という関係」こそ重要なのである
X={3＋2（4−1）}×3
と書くのと同じ話です。特に入れ子が深くなればなるほどうっかり終了タグを書き忘れていたりすることがあるので、十分注意する必要があります。
HTML文書は、言うまでもなくPCが読み込んで上手く処理してもらうために作成します。なので、この処理をさらに手助けするためのヒントのような情報をいくつか附与しておくと、文書の再利用性がぐっと高まりますので、是非覚えておいてください
html要素・head要素・body要素はそれぞれ、HTML文書内の骨格を表します。html要素はHTML文書全体を抱括し、head要素はファイルのヘッダ部分を、body要素は本文の部分を抱括します。ヘッダとは文書全体についての情報を記述する部分のことで、今までの要素の中で言えば、title要素がヘッダ情報になります。分りにくければ、実際に表示される部分は全てbody要素内にあり、それ以外がhead要素に入ると覚えて下さい。
<html>
<head>
<title>HTMLについての小言</title>
</head>
<body>
<h1>HTMLについて</h1>
<h2>HTMLを書くときの心得</h2>
（省略）
<h2>HTMLを書く際の注意点</h2>
（省略）
</body>
</html>
このように骨格をマーク付けることによって、コンピュータはHTML文書を以下のように理解します。
仮に書かなかった場合も、アプリケーションソフトは省略されたものと解釈する仕様になっています。ですが、最近はそのような曖昧な部分は極力排除していこうという考え方が主流となっていますので、今後のことを考えて極力記述するようにしましょう。
文字実体参照や数値文字参照は、何らかの要因で直接記述することが出来ない文字を代替的に記述するための手段です。例えば普通に書くと文字化けを起こす文字や、文字コード内に存在しない文字を入力したい時に使ったりします（例えば、日本向けの多くのPCはラテン語やロシア語を正確に表示出来ません。逆に、欧米のPCで漢字を表示することは非常に困難でしょう）
また、HTMLにおいて、<や>はタグ始まりや終わりを表す特別な文字です。例えば、
<p>X<3 で、かつ X>2 を満たすのは2から3の間の数値である</p>
と言った文章を書いたとき、アプリケーションは<3 で、かつ X>という文字列を開始タグと勘違いして、エラーを引き起こす虞があります。人間でそんな勘違いをすることはまずありえませんが、コンピュータというものはなかなか融通が利きません。
そういった問題を回避するためにも、文字参照を利用する方法があります。文字実体参照や数値文字参照で参照された文字は特別な記号ではなく、あくまでもただの文字として扱われるためです。
&lt;&#60;&gt;&#62;文字実体参照:&amp;
数値文字参照:&#38;
&quot;&#34;基本的に、文字実体参照でも数値文字参照でも好きな方を使ってもらって構いません。ただ、文字実体参照の方が覚えやすい分有名ではあります。
<p>X&lt;3 で、かつ X&gt;2 を満たすのは2から3の間の数値である</p>
ところで、何故&や"も併せて載せたのかという理由はおわかりでしょうか。そうです。&は参照の開始を宣言する重要な文字だからです。
文字実体参照や数値文字参照は基本的に&で始まり、;で終わります。;の方は終わりなので特に意識する必要はないのですが、&の方はそのまま直接記述してしまうと、<の時と同じ勘違いを引き起こす可能性があるからです。特に&は、CGIなどのURLにしばしば混入していることがありますので、URLをコピー＆ペーストする時はくれぐれも注意して下さい。
なお、"は属性値の中で"を使用したい時にのみ利用します。属性値は"でくくりますからね。属性値の中でなければ直接書いてしまっても構いません。まあ、前の三つに比べればあまり使用することはないでしょう。
ちなみに、これらを使う以外の手として、文字を全角にしてしまうというものもあります。HTMLは全て半角文字で定義されていますので、全角はそのまま無視されるのです。筆者は面倒くさがりなので全角で＆や＜などと書くことの方が多いです。
但しプログラムコードなどを全角で書いてしまうとコピー＆ペーストした時に不具合が生じる虞もありますので、そういった場合は極力文字参照を利用するようにしましょう。
文書型宣言（Document Type Definition：DTD）とは、その文章がHTML文書であり、どのバージョンのHTMLに対応しているのかを宣言するものです。古いHTMLと新しいHTMLでは、記法や要素に少なからぬ差異がありますから、出来上がったHTML文書をもう一度確認して、適合する文書型を宣言します。別に書かなかったからといって必ずしも問題が生じる、と言うほどのものではありませんが、無用な不具合やトラブルを避ける意味でも、やはり文書型は宣言しておくべきです。
基本的に、今まで紹介した要素を紹介したとおりにマーク付けしていけば、「HTML4.01 Strict」という規格に適合するはずです。HTML4.01 Strictの文書型は、文章の冒頭に、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">のどちらかを記述します。強調しておきますが、文書型宣言は文中のいかなる要素よりも手前に宣言しなければなりません。また一字一句間違えてもならないので、基本的にコピー＆ペーストを利用します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
（省略）
</head>
<body>
（省略）
</body>
</html>
他のバージョンのHTMLについては、もっとHTMLに慣れてから選択肢に入れるようにした方がよいと思います。ちなみに、HTML4.01は現段階でHTMLの最新の規格です。
また、文書型宣言をした以上は、本当にその規格に適合しているか、記述ミスや漏れはないかどうかを定期的に確認しておいた方が、トラブルを避ける上で有効です。やっぱり嘘をついているというのも気持ち良いものではありませんしね。
文書型にきちんと適合しているかどうかは、Web上で無償公開されている検証サービスで簡単に行えますので、是非利用するようにしましょう。
This Page Is Valid HTML 4.01 Strict!と出力され、合格を証するバナーがもらえます。例文の検証結果
宗教的なチェックをすべて無効にしますと
WAI Content Accessibility Guidelines に示されている軽度のチェックを無効にします。のチェックはオンにしておいて良いでしょう。例文の検証結果
定義リストとは用語とそれを説明する文章を交互に羅列したリストのことです。一番簡単な例は「辞書」ですね。
【高天原】
（1）日本神話における八百万の神々が住まう天上界
（2）天上、大空
（3）久樹 アマテルの作成する得体の知れないWebサイト
このように何か項目を説明する際には、説明されるもの（definition term）をdt要素、そしてその説明（definition description）をdd要素でマーク付けし、最後にそれらのリスト（definition list）をdl要素で抱括します。
<dl>
<dt>高天原</dt>
<dd>（1）日本神話における八百万の神々が住まう天上界</dd>
<dd>（2）天上、大空</dd>
<dd>（3）久樹 アマテルの作成する得体の知れないWebサイト</dd>
</dl>
要は説明するものとその説明があればよいのですから、この定義リストは辞書に限らず幅広い範囲で応用が利くものと解釈されています。例えば、以下は当サイトの目次（Site map）をマーク付けした例です。
<dl>
<dt><a href="fft/">天照白書</a></dt>
<dd>FinalFantasyTacticsに関する考察、雑文、小説などなど。</dd>
<dt><a href="www/">より良い情報化社会を目指す為の覚書</a></dt>
<dd>数多くの技術や規格が矢継ぎ早に誕生するWebにおいて、自分に必要な技術は何かを追求。</dd>
<dt><a href="essay">高天原横町</a></dt>
<dd>日常生活におけるささやかなメモ書き。</dd>
<dt><a href="link/">月夜同舟</a></dt>
<dd>更新確認機能付き総合リンク集。</dd>
<dt><a href="notebook/">雑念雑記</a></dt>
<dd>更新履歴兼ネタ帳。簡単な近況報告なんかも。</dd>
</dl>
dt要素はインライン要素かテキストのみを子に持てます。dd要素も基本的にはdt要素と同じくインライン要素かテキストに留めておくべきです。
但しul/ol要素のように、dd要素の中にdl要素を加えてネストすることはあります。というと、あらかた想像はついてくるかも知れませんが、dl要素はdt要素とdd要素以外の要素を子に持てません。ul/ol要素と同じです。
たとえテキストを中心としたサイトであっても、何かの説明をする際に画像を使うことはありえます。あるいはサイトのロゴマークに、あるいは自分の絵や写真を公開するためなど、画像を表示させたい状況はしばしばあります。その際に使用するのがimg要素です。
なお、HTMLにおいて画像は「テキストの代わりの表現」と解釈されているため、img要素はインライン要素として定義されています。従って、必ず親にブロック要素を持たなければならず、body要素の子にimg要素があってはいけません。比較的よく見かけられる文法違反なのでよく覚えておいてください。
<p>当サイトのバナーは<img src="xxx.png" alt="弓状列島「高天原」">です。</p>
<dl>
<dt><img src="xxx.jpg" alt="近所の猫の写真"></dt>
<dd>この前近くを散歩しているときに公園で見かけた猫さん。可愛いです。</dd>
</dl>
画像へのURLはsrc属性で指定します。URLを指定するという点で言えば、a要素のhref属性と基本的には同じものだと思っていただいて結構ですが、久樹は以下のように理解しています。
この違いは、時として非常に重要な意味を持ってくる場合があります。例えば、src属性で取り込んだデータは、著作権法でいう引用や転載に当たる可能性があります。一方、href属性で明示したデータというのは、あくまでも参照に過ぎません。「○○という本の××ページにこんな記述があるよ」と言っているのと同義です。なので、他所のサイトの画像などを紹介する時にimg要素を使うと、そう意図していなくても著作権侵害になるかもしれないのです。
また、低速回線である、テキストブラウザを使っているなど、あえて画像を表示させていない人は結構います。そういった環境に配慮し、画像の代わりの情報（alternate text）をalt属性で必ず指定して下さい。もし画像を表示出来なければ無視しても構わない場合（例えば装飾のための画像など）でも、alt=""というように空のalt属性を明示しておかなければなりません。「画像が表示出来ないなら無視してもいいよ」という事を明示しなければならないからです。
なお、Internet Explorerではalt属性のテキストをホップアップで表示しますが、あくまでもalt属性は代替のテキストですので、基本的に画像の表示に成功したらalt属性は無視されるものと考えてください。「画像の説明はホップアップで見てください」といったやり方は、あるアプリケーションソフトを使用している人間にとっては非常に不便なものであるかも知れないのです。
さてところで、上の例文に何か違和感をもたれなかったでしょうか。もし、「これって文法違反じゃないの？」と思った方は、HTMLについて確かな知識が身に付いてきている証拠です。そうです。今まで、私はHTMLの要素は開始タグと終了タグでくくることによって明示すると散々繰り返してきました。しかし、このimg要素は奇妙なことに終了タグを持ちません。
というのも、マーク付けの内容は既にsrc属性によって表されていますし、代替のテキストもalt属性で明示されているから、わざわざ中に書くべき事が存在しないのです。このように、中身のない要素を空要素と言います。マーク付け言語の中ではかなりの異端児だと思ってくださって結構です。
マーク付け言語では、文中に、筆者のコメント（表示しなくても良いメモ書き）を残すことが出来ます（プログラム言語では常識ですね）
具体的には、<--でコメントの始まりを表し、-->でコメントの終わりを表します。そしてこれにくくられた部分は、アプリケーションソフトは一切無視するように定められています（従って、コメント内に「--」と書いてはいけません。コメントの終了と勘違いされる虞があるからです）
<p>HTMLは、文書の構造をマーク付けするための言語です。</p>
<!-- 後で具体的な根拠を明示しよう -->
但し、注意しておかなければならないのは、HTMLソース（元データ）にはコメント部分も残っている点です。つまり、多少HTMLの知識のある人がコメントされた部分を見ようと思えば、簡単に見ることが出来ると言うことです。なので、間違ってもコメントだからと言って公開に差し支えるような情報を書いてはいけません。
さて、これでHTMLを公開する上で必要な知識はほぼ全て出そろいました。あとは、予備的な知識として知っておきたいものがいくつかありますが、今急に必要！ というわけでもありません。色々なHTML文書を書いて、もっとHTMLに慣れてからゆっくり覚えていく事も出来ます（あとからまとめて編集するソフトはいくらでもあります）
そこで、ここで一旦HTMLに関する学習を中断して、今度はスタイルシートについて勉強しはじめてみてはいかがでしょうか。いや、なんといっても、早く色を付けてみたり字の大きさを変えてみたいという欲求が生じるであろう事は、筆者自身にも経験があるからです。
もし「いや、自分はもっと徹底してHTMLをマスターしてから、スタイルシートを勉強する」と仰る剛な方は、どうぞこれからの解説を読み進めて下さい。要は、自分のやりたいこととその課程について、ここで選択肢があるものだと思っていただければ結構です。
や、まだ出来てませんけど…。そうなる予定です。