We both class ourselves as semantic web coding types, but should the H1 tag be used as your logo? – on this conundrum we disagree.

Mike along with most web designers work I view use the H1 tag as the logo, I do not, I often use an anchor with an image within it, and heres why:

Anthony’s Argument

Usually the first heading tag that your web browser and users encounters is the H1 tag and theres one on every page, the H1 tag semantically has the most grunt and is the premier tag you should use for the main heading for that web page.

Notice I said “Web Page”, as this is where the problem with using a H1 tag and putting your logo within it lies. Every page on your website has different content and I believe the H1 tag should support this.

For instance lets say you run a design agency called Dave’s Design and you have a web design services page. To identify to users and to the web browsers a fair reflection of what the content is on that page it makes sense that the main heading (H1) should say “web design services”.

But if the H1 tag was used as a logo, as is often the case, then the web design services pages H1 tag would be Daves Design, actually in this scenario the H1 tag on every page of the Dave’s Design website would be H1, which does not reflect all the different content on each individual web page across the website.

Therefore it is my belief that we should simply use a anchor tag with the logo within that anchor and leave the H1 tag to do its semantic duty as the foremost representative of the web pages content.

Logo’s are always a vector or bitmap image and so I believe semantically should be represented that way, to say that an image is a heading to me just seems plain stupid.

Who won?

In case you was interested to know Mike won the argument in this instance, as Theme Slice is aimed at web designers we have coded in the most popular coding methods, everyone seems to use the H1 tag as a logo, so we followed like sheep, please share your view?

Who won?  (updated)

It seems my rant on this post has won after all and now Theme Slice uses an anchor, I may have even convinced Mike this is the way forward.

I wondered for quite a while how to achieve this and firstly had divs and spans everywhere, then I looked at the data and realized that basically theres 3 lists of information; the product name, the quantity and the price.

So heres the HTML:


<div id="wrapper">
<ul id="products">
<li><h2>Product</h2></li>
<li>black t-shirt - large</li>
<li>blue t-shirt - large</li>
<li>red t-shirt - small</li>
</ul>
<ul id="quantity">
<li><h2>QTY</h2></li>
<li>1</li>
<li>2</li>
<li>4</li>
</ul>
<ul id="price">
<li><h2>Price</h2></li>
<li>£40.20</li>
<li>£40.20</li>
<li>£40.40</li>
</ul>
</div>


The wrapper div can be set to any width and the shopping cart will stretch to fill the void. Heres the CSS:


#wrapper{width: 300px;}
ul{ float: left; margin: 0; padding: 0;}
#products{width: 50%;}
#quantity{width: 25%;}
#price{width: 25%;}
li{list-style:none; }
h2{display: block; margin: 0; padding: 0;}


View the semantic shopping cart to see how it looks, I think I could accomplish a lot more advanced shopping cart designs and also that this would be easier to maintain than its tabular equivalent. Your Thoughts?