終了タグ内に属性を書く（対応する開始タグを見つけやすく）

Question

奇策であるのですが、htmlの構造が複雑になるにつれて、divタグが深くネストしていきます。
その際に「このdiv終了タグに対する開始タグはどれだ？」となりやすいです。

終了タグの後にコメントタグを追加するという方法が一般的な方法だとは思います。
ふと、終了タグ内に属性で書いちゃえば良いんじゃない？と思った次第です。

<div class="profile" role="profile">
  <div class="name" role="name">
    ...
  </div role="name">
</div role="profile">

エディターを使えば、すぐに分かることですが、ブラウザでソースをチェックしたいときなど判別しやすいかなと思っています。

終了タグ内に属性を書いて開始タグを判別しやすくすることについてのご意見お聞かせください。
「常識はずれ、やるべきではない」
「規約で禁止されているからダメ」
「もっと良い方法がある」
「それ最高！」
などなど…。

よろしくお願いします。

※規約を読むと「タグ名の後に、1つ以上の空白文字があってもよい」なのでダメかも
https://momdo.github.io/html5/syntax.html#end-tags

【お礼】
個人的なふとした思いつきに回答をいただきありがとうございます。
やはり仕様が従うのが大原則ですので、このような書き方はNGですね。

Answer 1

以前にも同様な質問がありましたので、それを流用する形で回答します。

文法上、終了タグには閉じるべきタグ名以外、空白しか入れられません。

終了タグは、次の形式を持たなければならない：

終了タグの最初の文字は、"<"文字（U+003C）でなければならない。

終了タグの2番目の文字は、"/"（U+002F）文字でなければならない。
終了タグの次の数文字は、要素のタグ名でなければならない。
タグ名の後に、1つ以上の空白文字があってもよい。
最後に、終了タグは">"文字（U+003E）で閉じなければならない。
（HTML5 日本語訳より）

つまり、余計なことを書くのは文法上アウト、ということになります。処理系によってはうまく動くかもしれませんし、何かおかしなことになるかもしれません。

そして、開始タグに勝手な属性を追加することで何かしらの表現に使うようなケースはありますが、終了タグに書いたものは読み取れないので、そういった方向性からの利用価値もありません。

閲覧者に文法違反による読み取り失敗のリスクだけ押し付けて、対価となるようなメリットはほぼない、というのが、自分としての判断です。

Answer 2

文法違反 (HTML Living Standard)

ふと、終了タグ内に属性で書いちゃえば良いんじゃない？と思った次第です。
(中略)

</div role="name">

• CSS - エンドタグにclassを記述して大丈夫ですか？(85759)｜teratail

基本的には、上記スレッドと同じ回答になります。

• HTMLはそれを終了タグと見なさない(文法違反)ので、使うべきではありません
• どうしても使いたいのなら、複数のブラウザで動作確認をし、将来的にそのHTMLが動作しなくなった時に修正する、という覚悟で使って下さい

ただ、私自身が </div role="name"> の書き方に納得していませんので、もし、納品先のクライアントから「この書き方は大丈夫でしょうか」という質問を受けたなら、「複数のブラウザで試しましたので、おそらく大丈夫かと思います(本当はブラウザが更新されたら使えなく可能性があるが、正直に伝えれば難色を示される事が分かっているので黙っておこう)」という苦しい言い訳をすることになります。

そもそもの目的とは

エディターを使えば、すぐに分かることですが、ブラウザでソースをチェックしたいときなど判別しやすいかなと思っています。

「ブラウザでソースをチェックしたいとき」というのが私の中にはないので、この辺りを詳しく書くと別の解が出てくるかもしれません。
基本的にWeb制作後のチェックは開発者ツールでDOMツリーを確認する為、生のソースを見る機会はそう多くありません。
生のソースを見るときにはローカルにサーバにUPされる前のオリジナルファイルがある為、そのソースをエディタで編集します。
ですので、ブラウザから [ソースの表示] で生のソースを見る機会というのはあまりありません。
実際、そういう状況になったとしても、コピペでテキストエディタに移して読んだり、[ソースを表示] で閲覧するエディタを拡張機能を使って変更する事を考えるでしょう。
わざわざ、終了タグに開始タグと同じ属性値を入れるというのは、開始タグを編集する度に終了タグにも同様の属性値を入れなければならないという事ですが、その手間をかけるだけのメリットがなければなりません。
しかし、「終了タグに開始タグと同じ属性値を入れる手間」と「コピペでテキストエディタにソースを移す手間」を天秤にかけたとき、後者の方が手間が少ないと私は判断します。
そして、[ソースを表示] でソースを見る機会はほとんどない、となれば積極的にそれを使う理由が私にはありません。

開始タグと終了タグの対応関係のような機械的に判定できる処理は、可能な限り機械的な処理に任せるべきだと私は考えます。
そこに人間の手間を介在させるべきではありません。

余談

他所様のサイトを解析する場合限定で [ソースを表示] を使う事はありました。
基本的には開発者ツールを使うので不要ですが、Proxomitron で他所様のサイトのHTMLを書き換える場合には生のソースを読む必要があります。
最も、生のHTMLを強調表示や整形もなしに読むのはつらいので、結局はテキストエディタで閲覧する事になるのですが。

Re: imamura さん

Answer 3

チャレンジしなくてもコメントでかいておけばよいのでは？
コメントなのでヒットし易いキーワードを自分なりにつければいいでしょう

<div class="profile" role="profile">
  <div class="name" role="name">
    ...
  </div><!-- endof role="name" -->
</div><!-- endof role="profile" -->

逆にマークアップ方式としdiv自体があまりすすめられていないので、
別の手段を検討する必要があるかもしれません