HTMLソースコードについて

HTMLはネスト構造なのだからインデントを付けないと見難い

このコメントがやはり多かったと思います。
まず、私のHTMLソースコードに対する考えとして、インデントを付けることに対し、否定している立ち位置ではありません。
インデントを付けなくても見やすいHTMLソースコードは書けます、私個人的にはそのほうが見やすいと考えます。
という立ち位置です。
本来は、見やすいだけではなく、さらにその方が美しいと主張したいですが、誤解が生まれそうですので「見やすい」という表現だけにします。

おそらく、最近HTMLのマークアップを習った方は、インデントを付けるのが当たり前で教育されるかと思います。
もしその教育がベースにあり「インデント無しはそもそも有り得ない」と強い気持ちがある方、この方には私がどう解説しようが、拒否反応を起こすと思いますので、ここから先は読まないほうが良いです。
興味のある方にだけ、読んでいただきたい。


HTMLはネスト構造なのだからインデントをつけないと見難い

と主張する方に、私は聞きたいです。
具体的にどのようなHTMLのソースコードだと、見難いのでしょうか。

<div class="block">
<div class="block-inner">
<p class="block-txt>テキストテキスト</p>
</div>
</div>

上の例は、div要素が2つ入れ子になっていて、インデントが付いていません。
もし、このHTMLのソースコードでは、ネスト構造がわからず「作業が大変だ」と思われる方は、インデントを付けてください。
私は、div要素が2つ入れ子程度では、見難くありません。

次のソースコードは、あるWebサイトのヘッダー箇所のソースコードです。

<div id="headerInner">
  <h1><a href="#"><img src="xxx.gif"></a></h1>
  <div class="spMenu sp-only">
    <div id="spmenuBox">
      <p class="btn_menu close_btn"><img src="xxx.gif"></p>
      <ul class="gmenu">
        <li class="border_none"><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
      <ul class="sub_menu02">
        <li class="clear"><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li class="clear"><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li class="clear"><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </div>
  </div>
</div>

このソースコードをみて、インデントがあって見やすい・構造がわかりやすい、と思う方、多いかもしれません。
私は、このソースコードを次のようにインデントを付けない、と解説しているわけではありません。

<div id="headerInner">
<h1><a href="#"><img src="xxx.gif"></a></h1>
<div class="spMenu sp-only">
<div id="spmenuBox">
<p class="btn_menu close_btn"><img src="xxx.gif"></p>
<ul class="gmenu">
<li class="border_none"><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
<ul class="sub_menu02">
<li class="clear"><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li class="clear"><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li class="clear"><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</div>
</div>
</div>

当然ですが、上のソースコードはインデントが無く、見難いです。
私がもし上のようなソースコードがあれば、次のようにします。

<!-- header -->
<header class="header">
<p class="header-logo"><a href="#"><img src="xxx.gif"></a></p>

<!-- menu -->
<div class="menu">
<div class="menu-inner">
<p class="menu-btn _close"><img src="xxx.gif"></p>

<!-- gnav -->
<nav class="gnav _main">
<ul class="gnav-list">
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
</ul>
</nav><!-- /gnav -->

<!-- gnav -->
<nav class="gnav _sub">
<ul class="gnav-list">
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
<li class="gnav-item"><a href="#">メニュー</a></li>
</ul>
</nav><!-- /gnav -->

</div>
</div><!-- /menu -->

</header><!-- /header -->

上のソースコードを見て、やはり最初のソースコードの方が見やすい、と思う方もいるでしょう。
私のマークアップは基本的にBEM設計をベースにしています。
私は反響についての記事の中で、HTML言語に関しては、BEM設計で実装していますが、インデントを付けなくても見やすいソースコードにできるのは、このBEM設計で実装しているということが大きいです。
と書きました。
おそらく、これに対してだと思うのですが、酷評の中にあったコメントで「BEMってそんな便利だったか？」というようなコメントがありました。
上のソースコードを見ていただければわかるように、私はネスト構造をインデントで見やすくするよりも、Blockとなるアウトライン要素の開始終了タグにコメントを付け、さらに1行空けることで、Blockのアウトライン要素を見やすくすることを優先しています。
その理由として、次のことが挙げられます。

1. HTML5になり、div要素の入れ子が深くなることがなくなった。（div要素の入れ子が多いと、やはりネスト構造は見難い）
2. BEM設計により、Blockのアウトライン要素を優先する方が見やすい。

もし、HTML5でのマークアップで、div要素の入れ子が4つ、5つ、6つになってしまっている場合、それはマークアップを見直すべきです。
div要素の入れ子が多い場合、私の方法では逆に見難くなります。
これまでの経験上、div要素の入れ子が4つ以上になることは、ありません。

また、「Blockのアウトライン要素を優先する方が見やすい。」ということに、抵抗がある、見慣れていない、そもそもBEM設計がわからない、という方にとって、最初のソースコード（インデントあり）の方が、見やすいという意見も多々あるでしょう。

私はここ数年、BEM設計でマークアップすることに慣れてしまっており、ネスト構造の見やすさよりもBlockのアウトライン要素の見やすさを優先する方が全体的に見やすいという結論になっています。ただし、前提として、ネスト構造が深くないマークアップができているということは大きく影響します。

実際にBEM設計で実装していないマークアップエンジニアの方から見れば、全然理解のできない内容かもしれません。
ただ、私が聞いてみたいのは、ネスト構造が深くないマークアップにおいて、ネスト構造の見やすさは、大事でしょうか。（ネスト構造のいくつから深い・・・と考えるのは個人差がありますが、、、）

また、次のソースコードは、私がBEM設計でマークアップしたソースコードに対し、次のようにインデントを付けたソースコードです。

<!-- header -->
<header class="header">
  <p class="header-logo"><a href="#"><img src="xxx.gif"></a></p>

  <!-- menu -->
  <div class="menu">
    <div class="menu-inner">
      <p class="menu-btn _close"><img src="xxx.gif"></p>

      <!-- gnav -->
      <nav class="gnav _main">
        <ul class="gnav-list">
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
        </ul>
      </nav><!-- /gnav -->

      <!-- gnav -->
      <nav class="gnav _sub">
        <ul class="gnav-list">
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
          <li class="gnav-item"><a href="#">メニュー</a></li>
        </ul>
      </nav><!-- /gnav -->

    </div>
  </div><!-- /menu -->

</header><!-- /header -->

インデントを付けていないソースコードと、インデントを付けたソースコードを比較して、どうでしょうか。
ネスト構造が深くありませんので、見易さは対して変わらないように思えます。
というのが、私個人の見解で、それであれば「インデントいらないよね」という結論になりました。
もしそれでもインデントがないと見難いということであれば、付けるという判断で良いかと思います。

その他、気になったコメント

整形ツールで、いい。
こういうコメントもありました。
ネスト構造の見やすくするのであれば、整形ツールでインデントを付けるということで、良いと思います。
このコメントについては、少々的が外れています。

労力の無駄。
このコメントは、少々意味がわかりませんでした。
インデントを付けないということに特に労力は使いません。

以上となりますが、最後に一言。
ネスト構造を見やすくすることを目的としてインデントを付けることが当たり前、という環境の中、私はインデントを付けなくても見やすくできます、という主張をしています。
マイノリティな主張で、この記事を読んでも、ただただ罵倒してくる人は多いでしょう。
その中でも、私はこの主張をします。
「10年以上、この業界にいて、出た結果がこれか・・・」というコメントもありました。
何度も言いますが、インデントを付けて、ネスト構造が見やすくなるということは十分理解していますし、私も最初からインデントを付けずにマークアップをしてきたわけではありません。
もし、私のこの主張が罵倒されるに値する主張であれば、淘汰されるでしょう。
私は実装者として、これまで多くの制作会社様と多くの案件をこなしてきている実績があります。
その中で、ソースコードについても評価を受けています。
その実績と、自分の主張に自信があるので、本日、改めてこの件について、解説しました。

と、ここまで主張して、補足ですが、
これも何度も言いますが、私は何が何でもインデントを付けない！！！っていうスタンスではありません。
インデントを付けなくても見やすくソースコードを書けますよ、という主張です。
私 = インデントを付けない！
というイメージが付いたようなので・・・。
基本は付けませんが、案件・プロジェクトに合わせます・・・。