CSS 会影响 HTML 语义吗？

Question

CSS 会影响 HTML 语义吗？

例如，隐藏有序列表 (<ol><li>) 的项目符号并使用图像代替。应用 CSS 后是否会被视为无序列表？

Answer 1

不，无论CSS

如何，搜索引擎机器人都会读取html代码

Answer 2

不，CSS 不影响 HTML 语义。 <ul> 和 <ol> 之间可能存在一些历史语义差异，除了每种类型的列表项的默认编号（有人声称 <ul> 应该代表无序设置而 <ol> 应该表示有序列表），但实际上两者之间唯一真正的区别是您获得的默认编号没有任何自定义样式格式。

项目的顺序仍然与两个标签相关，因为它代表浏览器显示项目的顺序。浏览器不能随意以随机顺序显示 <ul> 项目。

如果您自己自定义了编号，则两者之间没有实际显示差异。如果搜索引擎正在浏览您的页面，它将看到您在页面中放置的实际 HTML 标签，并且如果您通过 [=34 使用项目符号而不是数字，它不会改变它的行为=]设置。

有些人会争辩说这两个标签（set 与 list）之间存在语义差异，HTML5 规范指的是语义差异，但我很难知道这种情况的任何情况语义差异实际上是相关的或使用的。在任何情况下，就您的问题而言，任何语义差异都不会仅仅因为 CSS 样式更改列表以显示自定义图像而不是数字，反之亦然。

HTML5 specification 有话要说：

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

和this：

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

规范中没有任何内容表明如果您使用 CSS 更改编号的可见格式，那么 HTML 语义将会改变。

Answer 3

不，CSS 只会使 HTML 看起来更好，但不会改变 HTML 本身。另外如果你有类似的东西

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS:

#navlist { list-style-image: url(images/arrow.gif); }

这基本上仍然是一个列表 UL LI

Answer 4

理想情况下，CSS 不应影响元素的语义。例如，CSS 显示级别 3 规范 has the following note:

The display property has no effect on an element’s semantics: these are defined by the document language and are not affected by CSS. Aside from the none value, which also affects the aural/speech output [CSS-SPEECH-1] and interactivity of an element and its descendants, the display property only affects visual layout: its purpose is to allow designers freedom to change the layout behavior of an element without affecting the underlying document semantics.

然而，在实践中，目前一些 CSS 技术可以影响浏览器传递给其他软件的语义（首先，屏幕读者）。例如，一些浏览器有一个错误，即设置 table 元素的 display 值不是 table（例如 display: grid）会使浏览器不传递 table屏幕阅读器的语义。新的 display: contents 值也会导致类似的问题（很好解释 in this article）。

我不认为浏览器会因为 CSS 中的 list-style-type: none 而丢失列表语义，但您应该知道此类问题可能存在。因此，请始终测试您的网页的可访问性。

CSS 会影响 HTML 语义吗？

Does CSS affects HTML semantics?

css

html

semantics