なぜ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>なります。

「特別な意味のない汎用コンテナを表します。」

..そしてhtml5に追加する任意の要素をリストし<details>ます。

もちろん、暗黙のdivのこの概念がhtml仕様に追加された場合、標準になるには10年かかります。これはWeb時間で100万年です。

だから、私はこれがまだ起こっていない正当な理由があるに違いないと思う。教えてください！

問題1：空白

私はこれが一般的に出てこなかったと信じています。ただし、これが発生しない、おそらく発生しないはずの理由の1つはwhite-spaces、CSS classesでは要素に複数のクラスを定義し、HTMLではを定義するためattributesです。

次のコードを説明する（またはブラウザーに解析を依頼する）：

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

であるfamily第二のクラスの定義または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がそれほどばかげていない理由を1つ示しています。

<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に変換する場合、を使用して、フリータグ「HTML」から実際のHTMLを完全に生成できます<div class="hero-img">。

いくつかのタグで、独自の（ダミーの）URLを持つ名前空間属性：

xmlns:q="http://..."

HTMLの重要な要素の1つは、実際には事前定義されたタグ要素を持っていることです。それが理由です。

div class =は、この「制限」を回避する方法です。

そのため、これらの「暗黙の」構造は表示されません。

div要素の目的は、構造のみです。これにより、1つの共通要素の下に要素をグループ化できます。空白、速度、レンダリング、セマンティクスなどとは関係ありません。スタイル設定の面でCSSを使用し、セレクターの面でJavaScriptを使用します。他の要素に変更すると、目的が変わります。

示されているように、独自の名前付き要素を作成するには、検索エンジンや他のツールが要素の意味を知らないという問題があります。「hero-img」とは何ですか。また、私の「hero-image」とどのように違いますか。また、あなたのページにアクセスしたときに、APIはそれをどのように処理する必要がありますか。ブラウザはその要素をどのように処理する必要がありますか？ブロックレベルですか、インラインですか？質問が多すぎます。

一般に、divタグは、Webページの部門またはセクションを適用するのに役立ちます。divタグは、他の要素を適用できるコンテナとして使用できます。また、特定の要素にCSSといくつかのスクリプトを適用するのにも役立ちます。