The Benefits of Using Semantic Code
What is Semantic Code/HTML you ask?
Basically, it’s a way of writing your HTML in a more meaningful, structured and to be honest, sensible way. It’s all about using your header tags (H1, H2, etc) for yep, you guessed it - headers, instead of bolding the text and increasing the font size with the old <font size=”10000000000000000000″> tag. For paragraphs, use the <p> tag rather than sizing the font and adding hundreds of line breaks, for lists use the <li> tag, and so on.
If you want to add an image, you use the <img=…> tag because it’s the tag for inserting images, so it stands to reason really that when you’re adding a heading, list, etc, you use the correct tag, not some sort of bodge. Got it? Great.
So why use Semantic HTML? What are the benefits? Why can’t I just do things my way?
Well you can just do things your way if you want, but I’d probably not advise it. The biggest benefit of using Semantic Code is that you’ll be adhering to the Internet standard. And the benefit of that is that when things change and progress as they like to do on the Internet, the stuff that makes your site work isn’t going to get left behind.
Another great benefit is that it’ll make your pages load quicker. You whack all the crap and formatting in an external stylesheet, and it only needs to be declared and loaded once. For example:
- Crappy HTML - <font size=”3″ color=”#000000″><i>HELLO!</i></font><br><br>
- Over the top XHTML - <div class=”big_heading”>Hello!</div>
- Semantic HTML - <h1>Hello!</h1>
Make sense? Lovely clean, uncluttered code. All the browsers and all the software know that number 3 is a heading. The other two are, for all anyone knows from looking at the code, just some formatted text. And if you check the HTML of this page, you’ll see that I also use the list tag there, because yep, it’s a list.
It’ll also make the tedious task of making a website cross-browser compatible a lot easier.
But why do I care what my code looks like? I just want my site to look pretty!
But it can still look pretty! Both inside and out! And what’s the point in your site looking pretty if no-one can find it? Semantic code is also great for SEO! GoogleBot and co love semantic code. They don’t judge your site by how pretty it looks, they look at your code and work out what’s important, pick out keywords etc. The less clutter, and better formatted it is, the easier GoogleBot can find what’s important in your page.
If there’s a heading tag <h1>Gay Bars in London</h1>, GoogleBot’s going to note that down as being important and that the site’s obviously about Gay Bars in London. It’s common sense really. When GoogleBot sees<font size=”23694″ color=”pink”><b>Gay Bars In London</b></font>, he thinks “what’s all that crap around those words?”, not “there’s a heading!”.
Accessibility
And here’s another benefit - it’ll make your code accessible. Screen readers (what a blind person would use to surf the net) work in a similar way to the search engine bots in that they don’t care how pretty your page is, they want to know what the content is, and then read the text out loud for the end user. Now, to be of any use, the website needs to be read in the right order. If you’ve got messy code everywhere the screen reader is going to get confused and possibly misinterpret your page. And please, take note that the <b> or <em> tags are used to add emphasis to something, and in screen reader language that means it’ll “shout” it, so do think carefully where you use those tags. If in doubt, a top tip is to set up a style in your CSS that bolds the text and use <span class=”b”>Hello</span> instead. Similarly, we all know that in Internet speak, writing in capital letters is considered shouting, so if you’re using capital letters somewhere for visual effect, use a text-transform style in your CSS so your content isn’t shouted at the user.
In Summary
So to sum up, please code your pages semantically. It’s for the benefit of everyone, and once you learn how to do it, it’ll save you time too. Just writing short tags instead of styling everything up in the body of the page means a lot less typing for you. And above all, it’s just the right way to do things!
And to finish, here’s a little quiz for you. Just highlight the black blocks to reveal the answer.
For a heading, what tag should you use? Answer: The Heading tag
And for a list? Answer: The List tag
For a paragraph? Answer: The Paragraph tag
Now give yourself a pat on the back and sort your site out!
Subscribe |
Comments RSS | Trackback | Leave a response
July 5th, 2008 at 9:33 am
This was a really very helpfull article. What it writes here is the true and i have try this thinks. All of them are working perfectly.
Many thanks
October 22nd, 2008 at 2:48 pm
Very nice article posted, it’s very helpful in coding html in a proper way.
October 28th, 2008 at 2:59 pm
People should read this.