WEB拍手へのお返事:HTMLのタグの前のスペースは何なのか

ガタガタです。いつもありがとうございます。

WEB拍手へのお返事です。

こちらのテンプレートを編集していて思ったことですが、<の前にスペースがたくさん開けてあるのは何か意味があるのでしょうか。windowsのメモ帳で開いて編集していると、<の前にスペースがたくさんあるせいでタグが宙に浮いたようになっていて、左揃えの方が編集しやすいし見やすいのにな…と思ってしまいます。

コードにおいて行頭にスペースを空けることを「インデント」と呼びます。インデントには、開始タグと終了タグの対応や、タグの入れ子構造を、視覚的に分かりやすくする意図があります。

下のふたつの画像は、コードの内容は同じですが、インデントのあるものとないものを比較しています。

HTMLではタグの中にタグが入っている構造が当たり前です。「タグの中に書かれているもの」を、インデントを使って行頭を一段下げることで、タグがどこからどこまで続いているのか、タグの親子関係がどうなっているのかを、ぱっと見て分かりやすくすることができます。

ご質問者さんはWindowsのメモ帳で編集されているとのことですが、Bracketsなどのプログラミング用テキストエディタでは、タグを打つと自動でインデントが入れられます。それくらい、コードを書くにあたってインデントは重要なものです。

とはいえ、インデントは必ず入れなければいけない、というわけではありません。あくまでコードを見やすくする目的のものです。もし、インデントがない方が自分には分かりやすいな、と感じたら、削除しても構いません。