Accessibility Navigation

ImageXY

ImageXY - Mac OS X Batch Photo Resizer

Checkout ImageXY - Painless image resizing for Mac OS X.

Quickly and painlessly bulk resize images, change image formats and create web-friendly photos for your website.

Available on the Mac App Store!

Why use heading tags as opposed to font tags for displaying text in HTML?

I pose this question as it is something that i often get asked by clients about and felt it was worthwhile talking about. Although related to clients, I think its something that people who code HTML should also give consideration. The scenario I usually find myself in is that a client wants to understand why the content management system I have produced just uses H1, H2, H3, etc all the way to P to style text as oppose to give a whole array of different font options that can be available.

My answer to that scenario is based on a number of factors which i believe need to be thought about when using heading tags compared to font tags which are:- consistency of design, structure, accessibility, seo and document weight.

I would say that structure and consistency of design is the most important one as this is the factor that is visually more noticeable than any of the others to a user. Admittedly it would be fine to say that you can potentially create exactly the same styles whether you use font or heading tags, which to me is true. The difference I see with regards to the 2 ways of doing it is that the heading tags are more designed to get you to think about the content and to structure it appropriately. My trouble with font tags is that basically you can set a value for size, colour and family (ie the font name). For me in my mind this encourages you to stray away from the existing design, as potentially you can add new fonts, new colours and introduce lots of different sizing of text without really thinking too much about it. This is where heading tags have the edge as far as im concerned as there is only seven possible options so not as much leeway to go totally mad. Plus what I think helps is that fact that they are named Heading 1 ,2 ,3 ,4 5, 6 and P which gives this idea of hierarchy which is how I believe you should look at adding content within a document. This gets you to think for example I will use H1 for all titles throughout the site therefore you’re thinking about the document structure and as the H1 tag is styled within a css style sheet you also maintain a consistency throughout so a user understands that the size, colour, weight means its a title. I should make clear that yes you can go wrong with the use of headings ie if not set up correctly or used in a manner like a hierarchy yet in my opinion its more focussed on that method than font tags.

I expect at this stage some people will say that surely you can create font tags with classes defined within a stylesheet or set with values to behave in the same way as heading tags yet have much more of them yet still produce a document in a structured way. This is true and I wouldn’t argue with that theory at all, yet invariably I find that this isnt the case.

This then brings me to the next factor accessibility and how the 2 differ from each other. In this scenario accessibility is  about being able to create a readable page regardless of what technology is being used to view it. This does encompass the above points already mentionned yet what I specifically want to address is here is when a web page is viewed differently from what is the norm. The example screenshot below shows the difference between font tags defined by a stylesheet and heading tags if the css has been switched off.

displaying the difference between heading tags and font tags

Displaying the difference between Heading tags and Font tags

As you can see within the picture the font tags displayed on right show the text exactly the same style, so barring for the indicators I have added you would just see one long same unformatted document. In contrast when using the heading tags this uses size to display them differently so therefore you still get a structure and makes the page more easy to read.

My next point is if used properly then you can get round the use of using ¬†font tags, although I would still say that heading tags are more effective. Where the heading tag is certainly better is document weight whereby if you imagine a HTML document that contains many lines of code containing <font size=”2″ family=”verdana, arial” color=”#000″> compared to <h1>, although it may not make too much difference for users with there broadband connection there certainly is a vast difference between the two methods and page loading speed should surely be a consideration.

It can also be said the heading tags are better for seo work as I believe that search engines use the <h1> and <h2> tags when deciding on how to index pages when crawled by search engine robots. This does potentially give it an advantage over font tags if search engine places are derived from how the document is coded.

These are my reasons as to why i would use heading tags and why I advise clients in the above scenario to use them.


About The Author

Jacob Wyke is a web developer from the UK who makes complex things simple on the internet. He develops a batch image resizer for Mac OS X called ImageXY which you should try if you ever need to resize anything for the web.

You should also follow him on twitter.