Ruthless semantic markup

I’ve recently overhauled the markup of this site to make it more accessible and generally better. The purpose of a HTML document is to describe the content of the page, in an ideal world it would be completely decoupled from the styling and layout of the page. It’s very easy to fall in to the trap of adding meaningless elements to a page to make a styling problem easier, these tiny concessions add up and you eventually end up with a meaningless div soup!

Modern CSS removes a lot of the need for meaningless wrapper divs anyway. The header of this site is a good example of that, I want it to be full width but I also want the content to be the same width as the main body of the page. Previously this would have to be done with a inner wrapping element that has no meaning, probably something like

<header>
    <div class="inner">
        <!-- stuff goes here -->
    </div>
</header>

In ruthless semantic world we won’t accept anything more than

<header>
    <!-- stuff goes here -->
</header>

So we need to find another way to nudge the content in to the correct visible width. One way of doing this is to use calc() to work out the padding based on the screen width, like this

header {
    width: 100%;
    padding: 0px calc((100% - 1200px) / 2);
}

We could have also used a pseudo element to extend the bar, but I like to save those where possible. Working that out took a bit of thought but it was worth it to make our documents more meaningful!

So try not to worry too much about the CSS selector complexity when creating a new page and just describe the content as best as you can, it’s always easy to come back later and add a class or two if you need to.