HTML Semantics - Header or Sidebar?
Here's a question on HTML semantics. We now have the not-so-new HTML5 semantic sectioning elements which define areas of the page and try to bring more meaning to it. This is generally seen as a step forward from using <div> which has no particular meaning. Does it always work?
There's quite a common design pattern where a wider screen will show the logo and navigation in a sidebar on the left and then in a narrower screen will show it at the top. I've used this myself a few times. Here's a quick illustration of what I mean:
[caption id="attachment_567" align="aligncenter" width="200"] Wider screen with sidebar[/caption]
[caption id="attachment_566" align="aligncenter" width="150"] Narrower screen with header[/caption]
Ultimately, it comes down to the content. I've used the <aside> on this site in a fairly static, global way, so really it is a header. The theme creators can't know how the area is going to be used - if it's global or changes with the context of each page, so I guess it makes sense to keep the door open and use <aside>.
Changing ContentWe don't necessarily show the same content at different screen sizes. We might show contextual content in the sidebar but on a smaller screen we might choose not to use it. If we change the displayed content with media queries than how can we use semantic sectioning elements correctly? We could have an <aside> and a <header> in our markup but that's a lot of unused bloat.
The example I've given is quite subtle but I can imagine wanting to combine header, sidebar or footer content on smaller screens. How do we handle this and keep it all semantic?