: Responsive design best practice: Duplicate html elements for media querying and SEO impact? I have a page with, in order of html appearance, a figure tag, headgroup tag, and an article tag.

@Murphy175

<hgroup> is deprecated and therefore shouldn't be used.

In my experience, the difference in the SEO impact of the ordering is negligible. Use semantic HTML (i.e. appropriate headlines, captions, etc.) and you'll be fine.

As noted above, just use CSS for positioning.

Vote Up Vote Down

@Shanna517

But I have the feeling this is not ideal SEO-wise.


Yep, I wouldn't do it.

Even worse, it's bad for your users that rely on your document outline (screenreader, …) or your users that don't use CSS (text browsers, feed readers, …).


Is there another recommended solution? Best practice?


Use CSS.

Using the "classical" float or position or newer ways like Regions, Flexible Box, Grid Layout, Template Layout, …


Is there an html attribute to declare duplicate elements in a page?


No, not exactly. There is the hidden attribute:


When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user.


In your case, you'd have to use JS to switch it (and to recognize which media query fired).

Vote Up Vote Down