为什么我们必须使用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 class”部分，则HTML会更加语义化，并且使用匹配的结束标记将具有无限的可读性！

这类似于HAML，其中我们具有：

.content Hello, World!

变成：

<div class='content'>Hello, World!</div>

在我看来，要在浏览器中运行此功能，唯一要做的就是浏览器可以开始解释每个元素，而没有现有的html元素定义暗示<div class="<element name>">。

这可能是完全向后兼容的；对于CSS和jQuery选择器等，“ div.hero-img”仍然可以使用，并且是选择元素所需的语法。

我知道新的Web组件规范，但是比这里建议的要复杂得多。您能想象看到一个网站的源代码并看到类似HTML的代码会多么令人愉快吗？

那么，为什么我们必须使用div？

如果您查看Mozilla的html5元素列表，则每个元素都有语义，然后我们进入<div>并显示：

“表示没有特殊含义的通用容器。”

..然后，他们列出要添加到html5中的任意元素，例如<details>。

当然，如果将隐含divs的概念添加到html规范中，则将需要十年时间成为标准，这是Web时间中的一百万年。

因此，我认为一定有一个很好的理由尚未发生。请给我解释一下！

问题1：空格

我相信这通常不会出现。虽然，这没有发生并且可能不应该发生的一个好理由是，因为white-spaces在CSS中classes为元素定义了多个类，而在HTML中则定义了attributes。

解释（或要求浏览器解析）以下代码：

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

是family第二个类的定义还是HTML元素的属性？正如您可能从该站点的解析器中看到的那样，它认为这是一个属性。

因此，如果需要的话<div class="pet family">，就没有办法实际定义两个类，这是无论如何我都会使用一个类而不是id的两个主要原因之一。

问题2：向前兼容！

目前使用<div>s，迫使我们（至少我们中的一些人）对我们的代码进行缩进和注释，这对所有编程语言都是一个好习惯。

取而代之的是，将HTML块转换为变量会给新程序员带来很大的困惑，那就是在HTML中做什么和不做什么。

同样，这将引起有趣的副作用，您应该开始将旧代码与新的HTML5标签进行比较，以确保它们与您的div类没有相同的名称 ...

同样的问题适用于variables使用reserved words某些语言。PHP用一个美元符号解决了它，因此HTML中的类似方法所产生的效果不会比当前使用更好<div class="something">。

我们使用<div>您喜欢的方法来解决问题，因为它使浏览器的处理和渲染更容易完成。

作为反例，XML允许创建所需的任何标记名。创建任意标记名的能力会带来处理成本。在解析文档时，XML解析器必须构建文档中使用的标签的字典，作为/的一部分。

通过使用<div>浏览器，知道那里有一个容器，它可以忽略该容器或将其传递给链中可能对容器起作用的其他工具。

您建议允许Web作者为私有（非标准化）目的向HTML添加任意元素名称。这有一个很大的问题：将新元素添加到HTML标准中将很危险，因为各种作者可能已经出于私有目的使用了相同的元素名称-从而追溯了页面的语义。当新版本的浏览器破坏现有网页时，人们不会感到高兴，因此这是不可行的。

同样的问题是将任意属性名称用于私有目的。这就是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

这是定义的问题。如果使用XHTML（纯XML，因此已完全定义），则可以使用自己的名称空间，例如通过前缀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的关键元素之一实际上是具有预定义的标签元素。这就是为什么。

div class =是解决该“限制”的一种方法。

这就是为什么您看不到那些“隐式”构造的原因。

div元素的目的仅是结构。它使您可以将一个元素组合在一起。它与空白，速度，渲染，语义或其他无关。它在样式方面帮助您使用CSS，在选择器方面帮助您使用javascript。如果将其更改为任何其他元素，则将更改目的。

如所示，创建自己的命名元素存在一个问题，即搜索引擎和其他工具将不知道元素含义是什么。什么是“ hero-img”，它与我的“ hero-image”有什么不同？当我访问您的页面时，API应该如何处理？浏览器应如何处理该元素？是块级还是内联？太多问题。

通常，div标签对于在网页中应用分区或区域很有用。您可以将div标签用作可以在其中应用其他元素的容器。它还将有助于在特定元素上应用CSS和一些脚本。