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>というように（●を空白とする）

是非とも御教示お願い致します。

回答No.4

dell_OK · ベストアンサー

私は、ＨＴＭＬエディタとして「へてむるクリエイタ～」と言うのを使っています。
おすすめの理由はありませんが、こちらからダウンロードできますのでお試しください。
http://hosiken.jp/software/windows/hetecre/

人間が見やすいために改行やインデントがあるのだと思いますが、そもそも改行もインデントもコンピュータの処理（ブラウザやサーバー）にとっては無用の長物です。
仮にＨＴＭＬのソースが１０００行ほどあったとして、改行１つにつき１バイトか２バイトを必要とし、インデントがあればあるほどに数バイトを必要とするとしたら、単純に考えても１キロバイト以上（改行が２バイトなら２キロバイト＋インデントがさらにかさむ）も無駄なデータがあるわけです。
これは、ブラウザに表示するために、サーバーからダウンロードされる際に１キロバイトもデータが送受信されるわけですから、それが一瞬かも知れないけれども、とても無駄なものなのです。
携帯電話用のサイトでは、パケット単位で課金されると思いますが、利用者の通信料を考えると、１パケットを超えるか超えないかを考慮して１バイトも無駄にしたくないものです。
パソコン用のサイトなのに、改行もインデントもまったくないソースを見たことがあります。アップロード時に削除しているのかも知れません。

回答No.3

noname#119957

■コーディング・・
TABやスペースの空白文字で字下げして前後のつながりを解りやすくするのは、コーディングの基礎なんです。（空白文字を調べてください。）

(1)処理の流れが人目でわかるようにする。
if(a==1){
　　print($page);}
else{
　　print($page2);}

(2)意味が解りにくい書き方
if(a==1){
print($page);}
else{
print($page2);}

ソースを解りやすく書くことでプログラマは生産性を上げることになります。HTMLにこの考え方を導入する人とそうでない人がいるのでいろいろな書き方が存在するのです。

３）上記で言うと、<div・・・・＞の前のようなスペースや空白を入れるときは、TABキーでよいのでしょうか？それとも半角キーですか？全角キーは確かスペースとして読んでしまうと聞いたのですが。
>>タグの中はスペース、外はどちらでもいいです。TAB場合はTAB設定で表示する際に長さが異なります。

回答No.2

noname#105334

1：ホームページ作成ソフトやHTMLエディタソフトを使うと勝手にそうなるのもありますね。
直打ちの人ならば1の方が仰るとおり、分かりやすいというのが一番の理由でしょう。

2：規則性は特に決められていません。
昔のサイトでは容量を小さくするために空白も改行も無くしたり、必要最低限にすることもありました。
ただそれだとかなり見づらいですね。

3：半角空白でもいいのですがTABキーの方が楽ですね。

4：そのタグにも寄るのでは？
普通のHTMLタグならば大丈夫なはずですが、JavaScriptなどでしたらもしかしたら・・・(そちらの方は詳しくないんでごめんなさい)

回答No.1

JavaJavax2

１）これはなぜこのように書くのですか？
インデントと呼ばれます。人間がみて対応するタグがどこにあるのか一目で見つけるためのものです。要するに読みやすくするという事です。開始タグ終了タグが以下のようであればtableタグが二つ三つ入れ子になっている状態でも編集すべきところが分かります。　

<table> *1に対応
　<tr>
　　　<td>
　　　</td>
　</tr>
　<tr>
　　<td>
　　　<table><tr><td></td></tr></table>
　　</td>
　</tr>
</table> *1に対応

同じ構成でももししたのようになっていたらどのテーブルタグが対応しているのか非常に分かりズ楽なります

table>*1に対応
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table><tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>　*ここでTableタグ終了なの？って思いませんか？
</td>
</tr>
</table>*1に対応

普通はもっと複雑な構成をしているのでインデントの必要性がご理解いただけるかと思います。

２）規則性はあるのですか？（自分がHTMLを書くときはどのようにしたら良いのでしょうか・・・規則性があればそのように気をつけて書くのですが・・・法則がわからないのでどうしても困っております）

規則性はありません。自由につける事ができます。ただ、対応するタグは同じ段にした方が分かりやすくなるのでそのようにした方がよいでしょう。

３）上記で言うと、<div・・・・＞の前のようなスペースや空白を入れるときは、TABキーでよいのでしょうか？それとも半角キーですか？全角キーは確かスペースとして読んでしまうと聞いたのですが。
ご質問の意味が分かりませんが、普通インデントする時は半角スペースかTABを用います。タブの方が何個も挿入する必要がなくてスマートでしょう。

４）＜＞と＜＞の間は空白を空けるとエラーで読んでくれないことがあったのですが、あけるべきときもあるのですか？例えば、
</a>●<ul>というように

そんな事はありません。改行は一つの半角スペースとして認識される場合もありますが、普通、連続したスペースはブラウザの解釈時に無視されますのでエラーにはなりません。あけた方が読みやすいのであればあけてもかまいません。

質問消しました？前回の質問に対する回答です。この質問は読んでません。