Reasons for not using CSS to visually rearrange order of HTML elements

Question

We're having a bit of a discussion in the office at the moment about using CSS to visually re-order elements on the page.

On a very basic level, a member of our team wants to structure the HTML like this (this request is based solely on a design perspective)

<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>

and then use CSS to visually place the main-content div before the secondary-content one.

Now, I'm not asking for help on how we would technically achieve this, but more I'm looking for evidence to back up the argument that we shouldn't do it at all.

As a front-end dev, my intial concerns are around accessibility

1. Screen readers/assistive technologies will hit the secondary-content first. To me, that's akin to opening a book, starting at chapter 4 and then going back and reading chapters 1, 2, 3, 5, 6 etc
2. The heading structure of the page will be disjointed (H2 before H1 etc)
3. If there is any content in secondary-content which requires info from main-content in order to be understood, it will be confusing for users with CSS off/assistive technologies etc

However, the real hot button for people in the business is Google/SEO. Therefore, does anyone know any good arguments/articles as to why writing the HTML in an ill-structured way would negatively impact our SEO?

Answer 1

[Would] writing the HTML in an ill-structured way would negatively impact our SEO?

Almost definitely. While the precise nature of search ranking algorithms is a jealously guarded industry secret, and each company is different, everyone looks unfavorably on differences between content presented to search engines versus that presented to users.

Here's what Google's Webmaster Guidelines say:

• Create a useful, information-rich site, and write pages that clearly and accurately describe your content. [Pages whose content obfuscates the actual visual ordering are not clearly and accurately describing their content.]

• Make a site with a clear hierarchy and text links. [Putting a <h2> before a <h1> violates a hierarchy.]

• Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would. [Someone using a text browser would certainly be confused by bizarre content reordering schemes.]

So, in short, you're meddling with the "clear hierarchy" that search engines are trying to index. That's clearly not desirable.

To answer your more general question:

I'm looking for evidence to back up the argument that we shouldn't do it at all.

Fundamentally, HTML documents are just that: documents, meant for conveying semantic information through their structure.

Attempting to subvert this natural ordering isn't strictly verboten, but it often suggests that you didn't write the markup correctly, and it always leads to unexpected flows. For example,

• In a book, do you expect chapter 7 to come before chapter 6?
• In a newspaper article, do you expect the body to come before the headline?
• In a movie, do you expect the closing credits to come before the title card?

You can see why, structurally, it would be ill-advised to reorder elements in this way. A document has a natural shape; distorting it makes it harder to understand.

There may be compelling aesthetic or artistic reasons to change the form of semantic vehicles like documents (e.g., a movie like Memento which exploits this for deliberate effect), but these are usually well thought-out, and not done trivially.

And you'd be hard-pressed to make an equivalence between a movie, which is designed to entertain, and an HTML document, which is designed to inform.

Answer 2

This seems like a terrible idea. Mostly because of readability. It doesn't logically make any sense to have the secondary come before the primary. If I was a web dev looking at the code of a page and I saw that, the only thing I would think at that point is, "what."

This also seems entirely pointless if you're moving the visuals around with CSS anyway. It's not like you're required to put the secondary before the primary as far as the code goes.