Keeping the HTML markup flow logical

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!

7 Comments

Subscribe to comments by rss.

  • Keep up the great work , I read few posts on this web site and I believe that your website is really interesting and holds sets of great information.

  • IPAGE COUPON CODE

    May 18, 2013

    I’d have to talk with you it article}. That is not really one thing I usually do! I quite like reading a writing which will make people think. Also, appreciate it just for allowing me to comment! グッチアウトレット

  • I got what you mean , regards for putting up.Woh I am lucky to find this website through google. “Being intelligent is not a felony, but most societies evaluate it as at least a misdemeanor.” by Lazarus Long.

  • It is perfect time to make a few plans for the longer term and it is time to be happy.
    I have learn this publish and if I may just I want to suggest
    you some interesting things or advice. Maybe you could write subsequent articles referring to this
    article. I want to read even more issues approximately it!

    Louis Vuitton Thames PM Brown Shoulder Bags

  • Christy

    Mar 15, 2014

    Good site you have here.. It’s difficult to find excellent writing like yours these days.
    I seriously appreciate individuals like you! Take care!!

  • promo code asos

    May 7, 2014

    The moment you are going to use the facial tissue some eminent brand pops into your mind.

    Some of these may feature a special item
    at an incredibly low price. So to do such arduous task you have no other way than to have faith on such a
    recognized product that is not only acclaimed in the area of its own but beyond the horizon.

  • We’re a group of volunteers and starting a new scheme in our community.
    Your web site provided us with valuable information to work on. You’ve done an impressive job and
    our whole community will be grateful to you.

(Get your Gravatar here.)

Leave a Comment