HTMLのインデントと行間について

まずはこちらをご覧ください。
タグのインデント対応していないHTMLのソースコードととなります。

<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="UTF-8"><title>HTMLサンプル</title>
<style>
    p { color: red; }</style></head>
<body><p>HTMLのサンプルです</p><span>みてね！</span>
</body><script>console.log('test');</script>
</html>

そして上記のコードに対してインデント対応をとったコードが以下になります。
更に行間も開けることによってコードがブロックごとに確認できるかと思います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLサンプル</title>
        <style>
            p {
                color: red;
            }
        </style>
    </head>

    <body>
        <p>HTMLのサンプルです</p>
        <span>みてね！</span>
    </body>

    <script>
        console.log('test');
    </script>
</html>

上記は少量のコードとなるのでイメージが沸かないかもしれませんが、これが100とか200とか1000ラインになったりstyleやjavascriptも含んでくるとコードを読む作業自体がかなりしんどくなり、自分で作ったコードであっても読み返す際には絶対に苦労します。

このあたりは口を酸っぱくして色々言われるところかと思います。

インデントを整えるメリット

  • 可読性の向上
    • ソースコードの見通しが良くなり読むスピードが向上するため作業の効率があがります。
  • 保守性の向上
    • 可読性が向上するため、ソースコードの問題点の発見や修正するスピードが向上するため作業の効率があがります。

上記のメリットがベースとなり再利用性や性能にも少なからず関わってくることになると思います。
また、コードの可読性が低いとコードレビューなどでも重要な指摘が見逃され後工程に流れることがあり、バグの原因となります。

今は開発ツールによって自動で簡単にインデントを整えてられるかと思います。
インデントについては「車は必ず左側を通行する。や一時停止の標識があれば一旦止まる。」のような
交通ルールみたいなものと私は考えていますので、自分で整えられない！という方は必ず導入するようにしてください。

ちなみに
VSCodeであれば、ドキュメントフォーマット（Shift+Alt+F）や他のプラグイン
Eclipseであれば、コードの整形（Ctrl+Alt+L）や他のプラグイン
…などです。