Stylozero

This is surely not going to be the ultimate article about semantics and CSS mastery, but I’d like to show how some simple observations are essential in order to build good coding habits.

A few weeks ago I worked on this website. The agency who hired me provided me with Photoshop mockups, and I was in charge of developing the front-end code (HTML, CSS, JS) for all the different pages.

For the homepage there was an intro block that I needed to turn into markup and style afterword with CSS.

Here’s a screenshot of that block…

While analyzing the visual mockup, the first (evil) temptation to write the HTML markup was this:

<div id="intro">
   <h2>As a global leader in corrugated packaging, International Paper is supplying
    a wide range of market segments in virtually all geographies.</h2>
   <a href="#" alt="contact us">Need more information? Contact us.</a>
   <p>With over 30 years of experience in the segment, International Paper is the reliable partner
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added
    packaging solutions including supply chain and design services.</p>
</div><!-- end "intro" -->

Which translates things pretty much in the order suggested by the visual presentation.

BUT! For the sake of having a markup that respects the law of semantics and the logical flow of content whenever separated from its presentation, the ideal order should be as follow:

Title (heading):
As a global leader in corrugated packaging, International Paper is supplying a wide range of market segments in virtually all geographies.

Text (paragraphs):
With over 30 years of experience in the segment, International Paper is the reliable partner for all fresh fruit & vegetable packaging needs. We offer our customers value-added packaging solutions including supply chain and design services.

Call to action (link):
Need more information? Contact us.

Which assigns a different order of elements…

Actually, that would make more sense if you read the content stripped out of the presentational layer (CSS). And it’s never said enough that semantics should be considered above all, when coding. You may, for instance, read the content with an RSS reader, with the result of having the title first, then the link to the action and then the text, which wouldn’t look right.

So, the right way of coding the markup would be this:

<div id="intro">
   <h2>As a global leader in corrugated packaging, International Paper is supplying
    a wide range of market segments in virtually all geographies.</h2>
   <p>With over 30 years of experience in the segment, International Paper is the reliable partner
    for all fresh fruit & vegetable packaging needs. We offer our customers value-added
    packaging solutions including supply chain and design services.</p>
   <a href="#" alt="contact us">Need more information? Contact us.</a>
</div><!-- end "intro" -->

Now, to make it look like the mockup, the obvious solution to apply would be to use two basic CSS techniques: image replacement, to turn the call to action link into an image, and absolute positioning, to display the image at the right side of the title, and before the text.

#intro { position: relative; }
#intro h2 { width: 455px; }
#intro a {
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width: 172px;
    height: 70px;
    text-indent: -9999px;
    background: url(images/intro-contact.jpg) no-repeat;
}

We now have the same presentation as on the mockup, but we kept the HTML markup logical!

I am sure that there are exceptions when we just can’t apply simple layout techniques such as this one, without having to compromise semantics.

But the purpose of this article wasn’t to write a CSS positioning tutorial.
It was to bring the attention to the fact that writing proper markup is essential, and in order to do so you need to look at visual mockups for a little time, and interpret them the right way, instead of going to rush up and start to code.

Very basic practice for some, but unfortunately in my professional life I am constantly meeting coders that just don’t care about such an approach.
And the thing is… they just should, and there are millions of reasons why.

Remember, logical HTML markup comes first!