Question

CSS会影响HTML语义吗？

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

Answer 1

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

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

如果您自己定制了编号，那么两者之间没有实际的显示差异。如果搜索引擎正在浏览您的网页，它会看到您在网页中放置的实际HTML标记，并且如果您使用子弹代替数字，它将不会改变它的行为CSS设置。

有些人认为两个标签之间存在语义差异（集合与列表），HTML5规范指的是语义差异，但我很难知道这种语义差异实际相关或使用的任何情况。无论如何，就你的问题而言，无论语义差异如何都不会因为CSS样式改变列表而显示自定义图像而不是数字，反之亦然。

HTML5 specification有这样说：

ul元素表示项目列表，其中的顺序为项目并不重要 - 也就是说，更改订单不会实质上改变了文件的含义。

和this：

ol元素表示项目列表，其中项目已经过故意订购，这样改变订单会改变文件的含义。

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

Answer 2

没有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 3

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

display属性对元素的语义没有影响：由文档语言定义，不受CSS 的影响。除了none值之外，该值还会影响听觉/语音输出 [CSS-SPEECH-1]和元素及其后代的交互性， display属性仅影响视觉布局：其目的是允许设计人员自由更改元素的布局行为 不影响的基本文档语义。

但是，实际上，当前某些CSS技术会影响浏览器传递给其他软件的语义（首先是 screen 阅读器）。例如，某些浏览器存在一个错误，该错误设置为table以外的display元素之外的table元素（例如display: grid）使浏览器不将表语义传递给屏幕阅读器。新的display: contents值也会引起类似的问题（解释清楚的in this article）。

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

Answer 4

不，搜索引擎机器人将读取html代码而不管CSS

CSS会影响HTML语义吗？

4 个答案: