エンドタグにclassを記述して大丈夫ですか？

例

<div class="footer-social">
Twitter
</div class="footer-social">

</div></p></span>などの「閉じるタグ」にclass名を記述して構いませんか？

前提として、正規表現ではないことは、分かっています。

実は、「記述したところで、装飾効果は無い。」という回答を期待しています。
そのほうが、都合がいいからです。
なぜなら、<div>が、いくつも重なると、どれとどれが、呼応しているかわかりにくいため、です。

を使えば、という指摘も、当然、想定していますが、 が、ある場合もあるためです。

-->

なるほど、その手があったか！
という裏技になるのでは？

エンドタグにclassや、idを記述して大丈夫ですか？

m.ts10806

2017/07/26 05:11 編集

>「記述したところで、装飾効果は無い。」実際に試してみましたか？そこで答えが出ると思うのでこの質問には問題や課題は存在しないと考えます。幾つも重なってわかりにくくなるのが気になるのであればきちんとインデントつけて対応させれば良いだけで、途中から整形したければHTMLフォーマットしてくれるツールを利用すれば良いので。

HiroakiMatsuda

2017/07/26 05:19

投稿の様式があって、そこにこだわるのは、それぞれの自由だと思います。当方としては、自己プルーフした上で、万が一にも、他の経験者の回答（経験）をお聞きしたいという趣旨です。

m.ts10806

2017/07/26 05:23

回答出てますけど、エンドタグに提示のように記述したとして、その方がわかりにくくなるのではと思います。classだと1ソースに何回も出てくるわけですし。

行動規範の内容に同意します

回答5件

ベストアンサー

ブラウザはそれを終了タグと見なすのか

CSSが働かない事を期待しての質問のようですが、考えるべきはCSSというよりも「それが終了タグとして認識されるか」ではないでしょうか。

下記HTMLを The W3C Markup Validation Service でチェックすると、「Error: End tag had attributes.」が返ってきます。
「終了タグが属性を持っています」とありますが、問題があるからエラーになったわけで、ブラウザがそれを終了タグと見なすかは不明です。

The W3C Markup Validation Service

HTML
1<!DOCTYPE html>
2  <head>
3    <title>sample</title>
4  </head>
5  <body>
6    <div><div>foo</div class="foo">bar</div class="bar">
7  </body>
8</html>

終了タグ (HTML Standard)

maisumakun さんが紹介して下さった HTML Standard 仕様ですが、原文には must とあり、遵守しなければならない強制力のある規定です。
つまり、HTML Standard は </div class="foo"> を終了タグと見なしません。

XHTML

XHTMLで次のHTMLタグを読み込ませたところ、エラーになり、描画する事が出来ませんでした。

HTML
1<div class="foo"></div class="foo">

まとめ

お世辞にもお勧めできるものではありません。
が、どうしても抜け穴を探したいようなので、下記を念頭に置いた上で検討する事をお勧めします。

複数のブラウザで期待通りのDOMツリーが構成されている事を確認する (正常に描画される事ではなく、DOMツリーを確認する必要があります。足りない終了タグは補完される為、補完の利かない終了タグでテストして下さい。)
ブラウザがそれを終了タグと見なさなくなった時に修正しなければならない

私としては他の対策を取る方が無難だと思いますが、答えが初めから決まっている(安全でなくとも使いたい)のなら致し方ありません。

Re: HiroakiMatsuda さん

投稿2017/07/26 09:42

編集2017/07/26 09:49

think49

総合スコア18194

HiroakiMatsuda

2017/07/27 14:33

回答をお寄せいただいた皆様には、お礼を申し上げます。当方だけでは、限られた一面でしか見ることができない事象を多面で知識を得ることができました。期待していた回答を得られたと同時に、逆の回答を得られたことで、リテラシーの向上につながりました。この質問は、一旦終了とさせていただきます。また、他の質問に答えられる範囲で回答することで、貢献できるように思っています。

行動規範の内容に同意します

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

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

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

（HTML5 日本語訳より）

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

投稿2017/07/26 05:15

編集2017/07/26 05:29

maisumakun

総合スコア146544

m.ts10806

2017/07/26 05:18

> タグ名の後に、1つ以上の空白文字があってもよい。そうなんですね。何も入らないものだと思ってました。とはいっても空白入ってる例ほとんど見ないですね＾＾；

maisumakun

2017/07/26 05:20

「空白がOK」というのは、この回答のために調べて、自分もはじめて知りました。

HiroakiMatsuda

2017/07/26 05:29

正規文法にはない、いわば「ギャル語」みたいなもので、「あんたが自分で使う分には、自由だよ」という解釈でよろしいでしょうか。

maisumakun

2017/07/26 05:31

普通の言語と違って、HTMLは「ソースのまま配信する」ものなので、「自分のブラウザで動いたからOK」と単純には行かないものです。

m.ts10806

2017/07/26 05:35

私は「文法違反をしてまで得られるメリットはない」と解釈しました。

HiroakiMatsuda

2017/07/26 05:43

クライアントから「こんな文法無いだろ」と指摘されて、「いやいや便利ですよ」と、先方を納得させられれば、いいのかなと。

think49

2017/07/26 08:52 編集

仕様に存在しないという事は「全ての実装で同じように動作する保証がない」という事です。特定の実装にしか存在しない独自拡張機能は将来的に削除される可能性があります。「文法には存在しませんが、～では動くみたいだし便利ですよ。ただし、他のブラウザで動く保証はありませんし、動いているブラウザでも将来的に機能が削除されるかもしれませんので、保守しませんよ。」とクライアントに言い切れるならいいですが、どう考えても角が立ちますよね。逆に、ブラウザの実装状況を完璧に把握し、該当機能が削除された場合のコード保守まで完璧に行えるなら止めはしませんが、コストに見合わないと私は思います。

m.ts10806

2017/07/26 06:28 編集

そもそもですが「こんな文法無いだろ」って指摘できる知識を持ってるクライアントを納得させるのは無理なのではと。その労力と時間を開閉が分かりやすく読みやすいコードを書く方に注力すべきですね。もちろん指摘されなければやって良いというわけではありませんが。

JAVA_SHINE

2017/07/26 15:50 編集

横から失礼します。「文法無視してもとりあえず動くからいいや」ということをしていて動かなくなったらどうするつもりなんでしょうか。そんないつ動かなくなるかもわからないものにある程度知識のある方が納得するはずがありません。後々他の人が読むことも考えて、文法は守っておいたほうがいいと思います。せめて、終了タグ直後にコメントで書いておく位が限界かと...

HiroakiMatsuda

2017/07/27 14:33

行動規範の内容に同意します

</div>等が重なりすぎて見にくいのであれば、スペースやtabで階層を区分けすれば良いのではないのでしょうか？それでも数が多く見にくいのであれば、記述範囲のブロックをもっと小さく区切ればどうでしょうか？

不要な空白やコメントは後で圧縮で消せるし、質問者さんの方法が仮に使えても、圧縮で残ると思いますので、無駄に量を消費するだけではないでしょうか？

投稿2017/07/26 05:36

yoshinavi

総合スコア3525

yoshinavi

2017/07/26 08:48

投稿者の方の意図がイマイチわかって無いかもですが、該当の閉じタグを、他の閉じタグと区別したいだけなのかどうかってことですよね？

HiroakiMatsuda

2017/07/27 14:33

行動規範の内容に同意します

私はhtmlが分からない完全な素人です。

「<div>が、いくつも重なると、どれとどれが、呼応しているかわかりにくいため」

ということですが、私が使っているVS Codeというエディタでは
インデントをしていれば、<div>の下に線が伸びてどれと対応するか
表示されます。（書いていることは適当。）

個人的には、インデントさえしていれば
エディタの機能で分かりやすくできそうな気がします。

投稿2017/07/26 17:02

編集2017/07/26 17:06

退会済みユーザー

総合スコア0

HiroakiMatsuda

2017/07/27 14:33

行動規範の内容に同意します

こんなこと試したことはなかったが
https://jsfiddle.net/jsdxun8t/
スタイルは反映されませんでした。このような書き方をする意味はないです

<!DOCTYPE html>
<html>
<head>
<style>
.font {
	color: red;
}

#size1 {
	font-size: 30px;
}

#size2 {
	font-size: 30px;
}
</style>
</head>
<body>
	<span class="font" id="size1">赤フォント</span>
	<br />
	<span>赤フォント</span class="font" id="size2">
</body>
</html>

投稿2017/07/26 05:52