なぜdivを使用する必要があるのですか？
今朝、いくつかのhtmlとhamlを書いているときに、divの使用方法がばかげていることに気付きました。 divが含まれていないのはなぜですか？これを想像してみてください：
<div class="hero-img">
<img src="http://whatever.com/this.jpg">
</div>
これは：
<hero-img>
<img src="http://whatever.com/this.jpg">
</hero-img>
要素の「divクラス」の部分を想定すると、HTMLはよりセマンティックになり、対応する終了タグにより無限に読みやすくなります。
これはHAMLに似ています。
.content Hello, World!
これは次のようになります。
<div class='content'>Hello, World!</div>
これがブラウザーで機能するために必要な唯一のことは、ブラウザーが既存のhtml要素の定義なしにすべての要素を<div class="<element name>">を意味するものとして解釈し始める可能性があることです。
これは完全に下位互換性があります。 CSSおよびjQueryセレクターなどの場合、「div.hero-img」は引き続き機能し、要素を選択するために必要な構文である可能性があります。
新しいWebコンポーネントの仕様については知っていますが、ここで提案するものよりもはるかに複雑です。 Webサイトのソースを見て、そのようなhtmlを見るのがどれほど楽しいか想像できますか？！
では、なぜdivを使用する必要があるのでしょうか。
Mozillaのhtml5要素リスト を見ると、すべての要素に意味的な意味があり、<div>に到達すると次のように表示されます。
「特別な意味のない一般的なコンテナを表します。」
..そして<details>のようにhtml5に追加する任意の要素をリストします。
もちろん、暗黙のdivのこの概念がhtml仕様に追加された場合、標準になるまでに10年かかります。これは、Web時間で100万年です。
だから、これがまだ起こっていない正当な理由があるに違いない。説明してください！
問題1：空白
これは一般的には起きていないと思います。ただし、これが発生しない、または発生する可能性のない理由の1つは、CSS classesのwhite-spacesが要素に対して複数のクラスを定義し、HTMLの場合はattributesを定義するためです。
次のコードを説明（またはブラウザに解析を依頼）します。
<pet family style=" ... ">
<img src="my-pets-family.jpg"/>
</pet family>
familyは2番目のクラスの定義ですか、それともHTML要素の属性ですか？おそらくこのサイトのパーサーからわかるように、それは属性であると考えています。
したがって、<div class="pet family">が必要な場合、実際に2つのクラスを定義する方法はありません。これは、とにかく、IDではなくクラスを使用する2つの主な理由の1つです。
問題2：上位互換性！
現時点で<div>sを使用すると、私たち（少なくとも私たちの一部）がコードを適切にインデントしてコメントするように強制します。これは、すべてのプログラミング言語に適した方法です。
代わりに、HTMLブロックを変数に変換すると、新しいプログラマーにHTMLで特定のことを行っていることと行わないことに関して大きな混乱が生じます。
また、おかしな副作用が発生します古いコードと新しいHTML5タグを比較して、divのクラスに対して行ったのと同じ名前が付けられていないことを確認してください = ...
一部の言語では、同じ問題がvariablesでのreserved wordsの使用にも当てはまります。 PHPドル記号で解決したので、HTMLでの同様のアプローチは、現在の<div class="something">の使用法よりもはるかに優れたものになるでしょう。
ブラウザでの処理とレンダリングを簡単に実現できるので、気になるものの代わりに<div>を使用します。
反例として、XMLでは必要なタグ名を作成できます。任意のタグ名を作成する機能には処理コストが伴います。 XMLパーサーは、ドキュメントの解析中に/の一部としてドキュメント内で使用されるタグの辞書を作成する必要があります。
<div>を使用することで、ブラウザーはコンテナーがそこにあることを認識し、コンテナーを無視するか、チェーンでコンテナーで何かを実行する可能性のある他のツールにそれを渡すことができます。
Web作成者がプライベート（標準化されていない）目的でHTMLに任意の要素名を追加できるようにすることを提案しています。これには大きな問題があります。新しい要素をHTML標準に追加するのは危険です。なぜなら、さまざまな作成者が同じ要素名を私的な目的ですでに使用している可能性があるため、ページのセマンティクスを遡及的に変更するからです。ブラウザーの新しいバージョンが既存のWebページを壊すと、人々は幸せにならないので、これは大丈夫です。
同じ問題が、プライベートな目的で任意の属性名を使用する場合にも発生します。これが、HTML5が私的使用属性の接頭辞「data-」を義務付けているので、標準の新しい属性と衝突しません。
DivとSpanは、意味的に中立な要素として定義されています。つまり、将来のブラウザーでセマンティクスが変更されることを恐れずに、それらをプライベートな目的で使用できます。確かに、クラス名を追加するにはさらに数文字が必要ですが、上位互換性があるため価値があります。
あなた自身の例は、divがそれほどばかげていない理由を示しています。
<div class="hero-img">
<img src="http://whatever.com/this.jpg">
</div>
正しく、imgタグを閉じていません。 img、br、hrなどの一部のタグにはコンテンツがないため、閉じないでください。パーサーはこれを知っています。
一方、divタグはコンテンツを含んでいるため、閉じられているはずです。自分のタグを作成しただけの場合、パーサーはタグが閉じられることを期待するべきかどうかわかりません。
一部の要素が閉じられ、他の要素が閉じられない理由は、このブログの投稿がうまく説明しているSGML遺産に由来します： http://www.colorglare.com/2014/02/03/to-close- or-not-to-close.html
それは明確さの問題です。純粋なXMLであり、したがって完全に定義されているXHTMLを使用する場合は、独自の名前空間を使用できます。ここでは、たとえばq:を使用します。
<q:hero-img>
<img src="http://whatever.com/this.jpg">
</q:hero-img>
XMLを使用して（X）HTMLに変換する場合、<div class="hero-img">を使用して、無料のタグ「HTML」から実際のHTMLを完全に自由に生成できます。
一部のタグで、独自の（ダミー）URLを持つ名前空間属性：
xmlns:q="http://..."
一般的に、divタグは、Webページに部門またはセクションを適用するのに役立ちます。他の要素を適用できるコンテナとしてdivタグを使用できます。また、特定の要素にCSSといくつかのスクリプトを適用するのにも役立ちます。
Div要素の目的は、構造のみです。これにより、1つの共通要素の下に要素をグループ化できます。空白、速度、レンダリング、セマンティクスなどには関係ありません。 CSSのスタイル設定とJavaScriptのセレクターに役立ちます。それを他の要素に変更すると、目的が変更されます。
あなたが示すように、あなた自身の名前付き要素を作成することは、検索エンジンと他のツールがあなたの要素の意味が何であるかを知らないという点で問題があります。 「hero-img」とは何ですか。また、「hero-image」とはどのように異なりますか。また、ページにアクセスしたときに、APIでどのように処理する必要がありますか？ブラウザはその要素をどのように処理する必要がありますか？ブロックレベルですか、インラインですか？質問が多すぎます。
HTMLの重要な要素の1つは、実際には事前定義されたタグ要素を持っていることです。それが理由です。
Div class =は、この「制限」を回避する方法です。
そして、そのため、これらの「暗黙の」構造が表示されません。