HTMLタグの閉じ忘れ、配置に注意！

さっき元同僚とスカイプでワカラナイと言うところをチェック・レクチャーしたので、
役に立つかなと思い、久しぶりのWEB制作記事。どちらかというとHTML初級者向です。

HTMLタグの閉じ忘れ、配置に注意！というタイトルのとおり、
HTMLタグの閉じ忘れや配置の間違いがあると、
ウェブサイトのレイアウトが崩れてしまったり、
表示がおかしくなっているなどの現象が起こります。

HTML（xHTML）というのは、タグのほとんどが対の関係になっています。

例えば、

<div>〜〜〜〜</div>

<a href="http://www.webbyrock.com">WebbyRock</a>

と言ったようにです。

以下、閉じ忘れと配置の間違いについて説明します。

さっきの例で考えます。

本来、<a href="http://www.webbyrock.com">WebbyRock</a>
というHTMLソースがあるとします。

HTMLタグの閉じ忘れは2つパターンがあります。

その1：開始タグの閉じ忘れ

開始タグの閉じ忘れというのは<a href="http://www.webbyrock.com">の部分の
最後の>とか">を記述し忘れていることです。
 

その2：終了タグの閉じ忘れ

終了タグの閉じ忘れというのは、</a>を記述し忘れていることです。
さきほども説明したとおり、HTMLタグのほとんどは対の関係にあります。
始まりがあって、終わりがあるのです。

HTMLタグの配置の間違い

最後にHTMLの配置の間違いですが、HTMLのタグは対の関係というのが
やはり関係していまして、この配置の順番が間違えば、表示は崩れます。

〈正しいHTMLソース〉

<div id="contents1">
<div id="contents2">
<p>

<a href="http://www.webbyrock.com">WebbyRock</a>

<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>

</p>
</div>
</div>

〈間違っているHTMLソース〉

<div id="contents1">
<div id="contents2">
<p>

<a href="http://www.webbyrock.com">WebbyRock</a>

<ul>

<li>リスト1</li>
<li>リスト2</li>

</div>
</ul>
</p>
</div>

正しいソースが、箱にモノをキレイに詰めているように、
コンテンツを外側から内側に向かって囲むイメージです。

間違っているソースは、タグの入れ子具合がクロスしていて、
どのタグがどのタグと対になっているのかがわかりにくくなっています。
これはレイアウトの崩れ、ソースの破損に繋がります。

どれも難しいことではないのですが、初心者が意外に陥りやすく、
配置やレイアウトの不具合（バグ）調整で、時間を無駄にするポイントです。
基本的な知識ですので、注意してみてください。