Question

我们现在正在办公室讨论如何使用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章等。
页面的标题结构将脱节（H1之前的H2等）
如果secondary-content中的任何内容需要main-content中的信息才能被理解，那么对于使用CSS /辅助技术等的用户来说，这将会让您感到困惑

然而，业务人员的真正热门按钮是Google / SEO。因此，有没有人知道任何好的论点/文章，为什么以错误的结构方式编写HTML会对我们的SEO产生负面影响？

Answer 1

[会以错误的方式编写HTML会对我们的SEO产生负面影响吗？

几乎可以肯定。虽然搜索排名算法的确切性质是一个谨慎保护的行业秘密，并且每个公司都不同，但每个人看起来都不利于呈现给搜索引擎的内容与呈现给用户的内容之间的差异。

<强> Here's what Google's Webmaster Guidelines say:

创建一个有用的，信息丰富的网站，并撰写能够清晰准确地描述您的内容的网页。 [内容模糊了实际视觉排序的页面并未清晰准确地描述其内容。]



建立一个网站，其中包含明确的层次结构和文字链接。 [在<h2>之前设置<h1>会违反层次结构。]



使用Lynx等文本浏览器来检查您的网站，因为大多数搜索引擎蜘蛛都会像Lynx一样看到您的网站。 [使用文本浏览器的人肯定会被奇怪的内容重新排序方案弄糊涂。]

因此，简而言之，您正在干预＆＃34;明确的等级制度＆＃34;搜索引擎正试图索引。这显然不可取。

回答更一般的问题：

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

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

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

在一本书中，你是否期望第7章出现在第6章之前？
在一篇报纸文章中，你是否期望身体出现在标题之前？
在一部电影中，您是否希望结束学分来到标题卡之前？

你可以从结构上看出为什么以这种方式重新排序元素是不明智的。文件具有自然形状; 扭曲它会让人更难理解。

可能有令人信服的美学或艺术理由来改变像文件这样的语义载体的形式（例如，像 Memento 这样的电影，它会利用这种影响进行深思熟虑），但这些通常都是经过深思熟虑，而不是琐碎的。

你很难在一部旨在娱乐的电影与一部旨在通知的HTML文件之间取得相同的效果。

Answer 2

这似乎是个糟糕的主意。主要是因为可读性。从逻辑上讲，让次要来到主要之前是没有意义的。如果我是一个关注页面代码的Web开发人员，我看到了，那时我唯一想到的是“什么”。

如果你用CSS移动视觉效果，这似乎也毫无意义。就代码来说，这并不像你需要在辅助节点之前放置辅助节点。

Answer 3

这不是一个有明确答案的问题。原因是，一些布局形式需要重新排序源。如果secondary-content需要浮动main-content在其周围流动（向侧面及其下方），则必须首先放置在源顺序中。这个问题别无选择。

如果可能，最好将内容放在源代码中，是的。它总是可能的，没有。

参见示例：http://jsfiddle.net/ceHGX/3/

Answer 4

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

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

直观地将主要内容div放在次要内容之前

它们是浮动的列（或显示：内联块或表格单元格，无论如何）或一个在另一个之上？在后一种情况下，任何文本缩放（IE7，IE6，ZoomText users，所有禁用图形缩放以避免水平滚动并需要大量缩放的用户都将严重破坏。如果商家只对Google / SEO感兴趣，请告诉他们您所在国家/地区有多少有部分用户。我相信盲人用户数量的十倍。不是说像我们（大）父母那样的老年人他们是否希望他们作为客户，或者您的公司是否足够富裕并且不需要/关心他们和他们的钱？ ;）

不使用CSS在视觉上重新排列HTML元素顺序的原因

4 个答案: