HTMｌのソースのかきかたについて
HTMLの書き方について（初心者）お願いします。色々とWEBを調べたのですが、どうしてもうまく書いてあるものがみつからず、納得ができない状態のため、コチラに書き込みをしております。初心者で技術者向けのページに投稿するのは大変申し訳ないと思います。とっても初歩的なことをお伺いしてしまいますが、是非ともよろしくお願い致します。
最近、ホームページの勉強を初め、仕事でもほんの少しですがHTMLを使うようになりました。まだリンクを貼ったり、文章を修正する程度ですが。。。
ずっと疑問がございます。なぜ、HTMLは左はじに合わせて書かないのでしょうか？
どのソースを見ても決して
＜。。。。。。＞
＜。。。。＞
＜。。。＞
といったように左端にぴたりとそろっているものはありません。
大体が下記のように
<div id="header">
<p><a href="/"><img src="/common/images/logo.gif" width="313" ></p>
<div class="guidance"><a href="#contentsStart">ページの本文に移動する</a></div>
なんかずれています。たまに一行あいているときもあります。
質問ですが、
１）これはなぜこのように書くのですか？
２）規則性はあるのですか？（自分がHTMLを書くときはどのようにしたら良いのでしょうか・・・規則性があればそのように気をつけて書くのですが・・・法則がわからないのでどうしても困っております）また、このような書き方の支援をしてくれるフリーソフト（HTMLエディタと言うのでしょうか）でお勧めがあれば合わせてお願いします。
３）上記で言うと、<div・・・・＞の前のようなスペースや空白を入れるときは、TABキーでよいのでしょうか？それとも半角キーですか？全角キーは確かスペースとして読んでしまうと聞いたのですが。
４）＜＞と＜＞の間は空白を空けるとエラーで読んでくれないことがあったのですが、あけるべきときもあるのですか？例えば、
</a>●<ul>というように（●を空白とする）
是非とも御教示お願い致します。
