令人惊讶的是，没有人(包括我过去的自己)提到可访问性。使用有效标记而不是自定义标记的另一个原因是为了与最大数量的软件兼容，包括屏幕阅读器和人们出于可访问性目的所需的其他工具。此外，像WAI这样的可访问性法律要求建立可访问的网站，这通常意味着要求他们使用有效的标记。

显然没人提过，所以我来。

这是浏览器大战的副产品。

回到20世纪90年代，当互联网刚开始成为主流时，浏览器市场的竞争加剧了。为了保持竞争力和吸引用户，一些浏览器(最著名的Internet Explorer)试图通过试图弄清楚页面设计者的意思来提供帮助和“用户友好”，从而允许不正确的标记(例如，<b><i>foobar</b></i>将正确地呈现为粗体-斜体)。

这在某种程度上是有道理的，因为如果一个浏览器不断抱怨语法错误，而另一个浏览器接受你扔给它的任何东西，并吐出一个(或多或少)正确的结果，那么人们自然会涌向后者。

While many thought the browser wars were over, a new war between browser vendors has reignited in the past few years since Chrome was released, Apple started growing again and pushing Safari, and IE lost its dominance. (You could call it a “cold war” due to the perceived cooperation and support of standards by browser vendors.) Therefore, it is not a surprise that even contemporary browsers which supposedly conform strictly to web standards actually try to be “clever” and allow standard-breaking behavior such as this in order to try to gain an advantage as before.

不幸的是，这种放任行为导致了大量(有些人甚至认为是恶性的)标记不良的网页的增长。因为IE是最宽容、最受欢迎的浏览器，而且由于微软对标准的持续蔑视，IE因鼓励和推广糟糕的设计、传播和延续坏页面而臭名昭著。

现在你可能可以在一些浏览器上使用这样的怪癖和漏洞，但除了偶尔的谜题或游戏或其他东西，在创建网页和网站时，你应该始终坚持网页标准，以确保它们正确显示，并避免它们在浏览器更新时被破坏(可能完全被忽略)。

其他人提出了很好的观点，但值得注意的是，如果你看看像AngularJS这样的框架，自定义元素和属性是非常有效的。它们不仅向xml传递更好的语义含义，而且还可以为web页面提供行为、外观和感觉。

YADA(又一个(不同的)答案)

编辑:请参阅下面BoltClock关于类型、标签和元素的评论。我通常不担心语义学，但他的评论非常合适，信息量很大。

Although there are already a bunch of good replies, you indicated that your professor prompted you to post this question so it appears you are (formally) in school. I thought I would expound a little bit more in depth about not only CSS but also the mechanics of web browsers. According to Wikipedia, "CSS is a style sheet language used for describing ... a document written in a markup language." (I added the emphasis on "a") Notice that it doesn't say "written in HTML" much less a specific version of HTML. CSS can be used on HTML, XHTML, XML, SGML, XAML, etc. Of course, you need something that will render each of these document types that will also apply styling. By definition, CSS does not know / understand / care about specific markup language tags. So, the tags may be "invalid" as far as HTML is concerned, but there is no concept of a "valid" tag/element/type in CSS.

现代的可视化浏览器不是单一的程序。它们是不同“引擎”的混合体，各自承担着特定的任务。至少我能想到3个引擎，渲染引擎，CSS引擎和javascript引擎/VM。不确定解析器是否是呈现引擎的一部分(反之亦然)，或者它是否是一个单独的引擎，但您可以理解。

Whether or not a visual browser (others have already addressed the fact that screen readers might have other challenges dealing with invalid tags) applies the formatting depends on whether the parser leaves the "invalid" tag in the document and then whether the rendering engine applies styles to that tag. Since it would make it more difficult to develop/maintain, CSS engines are not written to understand that "This is an HTML document so here are the list of valid tags / elements / types." CSS engines simply find tags / elements / types and then tell the rendering engine, "Here are the styles you should apply." Whether or not the rendering engine decides to actually apply the styles is up it.

这里有一个简单的方法来考虑从引擎到引擎的基本流程:解析器-> CSS ->渲染。实际上，它要复杂得多，但这对于初学者来说已经足够好了。

这个答案已经太长了，所以我就到此为止。

为什么CSS使用假元素?

(大多数)浏览器被设计成(在某种程度上)向前兼容未来添加的HTML。未识别的元素被解析到DOM中，但没有与它们相关的语义或专门的默认呈现。

当一个新元素被添加到规范中时，有时CSS、JavaScript和ARIA可以用来在旧的浏览器中提供相同的功能(元素必须出现在DOM中，以便这些语言能够操作它们来添加该功能)。

(有一个自定义元素的规范，但是它们有特定的命名要求，并且需要使用JavaScript进行注册。)

为什么我的教授不让我使用合成元素?

它们不被HTML规范所允许 它们可能与将来同名的标准元素冲突 可能有一个现有的HTML元素更适合这个任务

也;为什么他不知道构成元素的存在并与CSS一起工作。它们不常见吗?

是的。人们不使用它们是因为它们有上述问题。

.．.我只是简单地将我所有的自制标签更改为带有ID的段落。

我实际上不同意他关于如何正确做这件事的建议。

<p>标记用于段落。我看到人们一直在使用它而不是div——仅仅是为了空格的目的，或者因为它看起来更温和。如果不是一个段落，就不要用。 你不需要或想要把ID贴在所有东西上，除非你需要专门针对它(例如用Javascript)。使用类或直接使用div。

虽然浏览器通常会将CSS与HTML标记关联起来，不管它们是否有效，但你绝对不应该这样做。

从CSS的角度来看，这在技术上没有什么问题。然而，在HTML中绝对不应该使用编造的标签。

HTML是一种标记语言，这意味着每个标记对应于特定类型的信息。

您创建的标记不对应于任何类型的信息。这将产生来自网络爬虫的问题，如谷歌。

阅读有关正确标记重要性的更多信息。

Edit

div指的是多个相关元素的组，意味着以块形式显示，并可以这样操作。

span指的是与它们当前所在的上下文样式不同的元素，它们应该内联显示，而不是作为块显示。一个例子是句子中的几个单词需要全部大写。

自定义标记与任何标准都不相关，因此span/div应该与class/ID属性一起使用。

有一些非常特殊的例外情况，比如Angular JS