不使用 CSS 重新排列 HTML 元素顺序的原因答案

【问题标题】：Reasons for not using CSS to visually rearrange order of HTML elements不使用 CSS 重新排列 HTML 元素顺序的原因
【发布时间】：2011-12-07 13:40:45
【问题描述】：

我们目前正在办公室讨论如何使用 CSS 以视觉方式重新排列页面上的元素。

在一个非常基本的层面上，我们团队的一名成员希望像这样构造 HTML（此请求仅基于设计视角）

<div class="secondary-content">
    <h2>Secondary content heading</h2>
    <p>This is the secondary content</p>
</div>
<div class="main-content">
    <h1>Main heading</h1>
    <p>This is the main content</p>
</div>

然后使用 CSS 直观地将 main-content div 放在 secondary-content 之前。

现在，我并不是就我们如何在技术上实现这一点寻求帮助，但我更多的是寻找证据来支持我们不应该这样做的论点。

作为前端开发人员，我最初关心的是可访问性

屏幕阅读器/辅助技术将首先访问secondary-content。对我来说，这类似于打开一本书，从第 4 章开始，然后返回阅读第 1、2、3、5、6 章等
页面的标题结构将脱节（H2 在 H1 之前等）
如果 secondary-content 中的任何内容需要来自 main-content 的信息才能被理解，那么使用 CSS 关闭/辅助技术等的用户会感到困惑

但是，对于业内人士来说，真正的热门按钮是 Google/SEO。因此，有没有人知道关于为什么以结构不良的方式编写 HTML 会对我们的 SEO 产生负面影响的任何好的论点/文章？

【问题讨论】：

一个div没有语义，我宁愿用section和aside标签（可惜这些是HTML5标签）
html5 对 ies 的支持可以通过 code.google.com/p/html5shiv 完成
这与 div 的语义意义无关，更多的是与在 HTML 中将次要内容（和相关的 H2）放在主要内容（和 H1）之前有关。也许我应该更清楚，抱歉。

标签： html css seo accessibility

【解决方案1】：

[会] 以结构不良的方式编写 HTML 会对我们的 SEO 产生负面影响吗？

几乎可以肯定。虽然搜索排名算法的精确性质是一个严格保密的行业机密，而且每家公司都不同，但每个人都对呈现给搜索引擎的内容与呈现给用户的内容之间的差异持不利态度。

Here's what Google's Webmaster Guidelines say:

创建一个有用、信息丰富的网站，并编写清晰准确地描述您的内容的页面。 [内容混淆实际视觉顺序的页面无法清晰准确地描述其内容。]

创建一个具有层次结构清晰和文本链接的网站。 [将<h2> 放在<h1> 之前违反了层次结构。]

使用文本浏览器（例如 Lynx）来检查您的网站，因为大多数搜索引擎蜘蛛查看您的网站的方式与 Lynx 一样。 [使用文本浏览器的人肯定会对奇怪的内容重新排序方案感到困惑。]

因此，简而言之，您正在干预搜索引擎试图索引的“清晰层次结构”。这显然是不可取的。

回答您更一般的问题：

我正在寻找证据来支持我们根本不应该这样做的论点。

从根本上说，HTML 文档就是：文档，用于通过其结构传达语义信息。

尝试颠覆这种自然顺序并不是严格禁止的，但它通常表明您没有正确编写标记，并且总是会导致意外的流程。例如，

在一本书中，您是否希望第 7 章出现在第 6 章之前？
在报纸文章中，您是否希望正文出现在标题之前？
在电影中，您是否希望片尾字幕出现在片名之前？

您可以看到为什么以这种方式重新排列元素在结构上是不明智的。文件具有自然的形状； 歪曲它会让人更难理解。

可能有令人信服的美学或艺术理由来改变语义载体的形式，如文档（例如，像 Memento 这样的电影利用这一点来故意产生效果），但这些通常是经过深思熟虑的-out，而不是简单地完成。

而且您很难在旨在娱乐的电影和旨在提供信息的 HTML 文档之间做出等价。

【讨论】：

【解决方案2】：

这似乎是个糟糕的主意。主要是因为可读性。从逻辑上讲，将次要放在主要之前是没有任何意义的。如果我是一名 Web 开发人员，正在查看页面代码并看到了这一点，那么我当时唯一想到的就是“什么”。

如果您使用 CSS 移动视觉效果，这似乎也完全没有意义。就代码而言，您不需要将次要放在主要之前。

【讨论】：

我认为你从来没有float元素？在这种情况下，您的陈述“就代码而言，并不要求您将辅助节点放在主节点之前”，这是不正确的。请参阅我的答案中的示例。
我实际上并不是一个 Web 开发人员，所以像这样的细节往往会从我身边溜走。

【解决方案3】：

这不是一个有明确答案的问题。原因是，某些布局形式需要重新排序源。如果secondary-content 需要浮动，main-content 在它周围流动（到它的侧面和下面），那么它必须放在源顺序的第一位。在这件事上别无选择。

如果可能，最好将内容按源顺序排列，是的。总是有可能吗，不。

查看示例：http://jsfiddle.net/ceHGX/3/

【讨论】：

【解决方案4】：

John Feminella 的第二个回答，WCAG 2.0 有一些关于（反对）重新排序内容的技术。
以下是一些与可访问性相关的链接：

从 CSS 的角度来看，你的意思是什么

在视觉上将主要内容 div 放在次要内容之前

它们是浮动列（或显示：inline-block 或 table-cell，等等）还是一个在另一个之上？在后一种情况下，任何文本缩放（IE7、IE6、ZoomText users，所有禁用图形缩放以避免水平滚动并需要大量缩放的用户）都会严重损坏。如果企业只对 Google/SEO 感兴趣，请告诉他们您所在国家/地区有多少视力不佳的用户。我相信盲人用户数量的十倍。不是说像我们（祖）父母这样的老年人。
他们是否希望他们成为客户，或者您的公司可能足够富有并且不需要/关心他们和他们的钱？ ;)

【讨论】：

“从 CSS 的角度来看，你的意思是……”我的意思是我们会浮动元素，以便在用户阅读 L-R 时以视觉方式重新排序它们。正如我所说，我的担忧不是来自技术 POV，而是语义问题（主要内容之前的次要内容等）