質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.82%

  • HTML

    7819questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3506questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 201

imamura

score 128

奇策であるのですが、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ですね。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+6

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

 文法違反 (HTML Living Standard)

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

</div role="name">

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

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

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

 そもそもの目的とは

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

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

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

 余談

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

Re: imamura さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    7819questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    3506questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。