- 10 Things To Do When Launching A Site
- Using PHP to connect to SFTP
- Asynchronous Virtual Pageviews with Google Analytics
- 5 Advanced Text Editing Keyboard Shortcuts
- Get the headers of a HTTP request with PHP
- How-to: Create PDF preview images in PHP – Part 2
- How-to: Create PDF preview images in PHP
- Quick Code: Get the domain name in JS
- Things to think about when designing a logo
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.
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.