Friday, November 18, 2011

The importance of writing Semantically Correct HTML.


Few days back i had a discussion with a Web Master around use of h1 h2 h3 tags in a web page. He explained what importance these tags have and what would the impact be if instead of using a h1 i use a span tag with some bigger font size. Here i am going to share what he described and what all i read after this conversation.

The Conversation...

When you read a newspaper you scan through the headlines of the paper. And then the subheadings sometimes. The h1 h2 tags are like headlines of a web document. So you should use heading tags wherever you are giving a heading to your content. This helps Web Crawlers also when they crawl your page they can read the headlines and index them and may help you in a better page ranking.

Why with the Heading Tags only.

Then i thought why just with the heading tags Web Crawlers will work. Googling around and asking questions on Stackoverflow i found that from the very beginning the Web was desgined to be written semantically correct. Every tag had a meaning and it should be used according to its meaning. So that when someone else is reading your html he could draw the semantics around it by reading the tags. This someone can also be a web crawler cause most of the Web Crawler Algorithms should try to get meaning of your web page from the Sematically Correct HTML Tags.

Here is a snippet of one of the answers on Stackoverflow.

I guess it's just a logical thing. If I read HTML with my human eyes I can clearly see where there are headings which represent a block of content. Why should a search spider thingy be any different? I have a feeling that the more logical the markup for your content is, the better your content will be indexed. I wouldn't index content if it was too hard to tell what each segment of content is meant to be. <span>s tell me nothing.

How Sematic HTML helps with Web Accessibility.

This is also because of the same reason. Think of a Visually Impaired person who is  using a Web Page designed by you. He would definitely be using a Screen Reader to read your Web Page. And the Reader will be able to help him only when it could understand the semantics of tags also. One classical example used in this context is of image tag. If the image tag is having the alt attribute describing the image. The screen reader can read the text in alt attribute and explain your user about the image. There are lot of Studies and Standards being worked upon to make web accessible to differently-abled people. You can read more around Web Accessibility here http://www.w3.org/WAI/intro/accessibility.php

So next time when your are writing your html. Try also to make it semantically correct as well. It will help your code understandable to other readers to web Crawlers and of course make it more accessible.

5 comments:

  1. Each HTML tag has a special meaning and there is a specific place for their usage. People try to control the layout by using CSS instead of tags. For example, People use span style="font-weight:bold;">text here span instead of text here.
    Many softwares have been written according to specific html tags. So, an HTML page must be semantically correct and as per w3c standard.
    Thank you Sushil for pointing out one more important point.

    ReplyDelete
  2. Really this is a post which will help normal and SEO developer to make beautiful reputation in the web.

    Video contents which are getting more values now a days.

    Again thanks for this knowledge sharing.

    ReplyDelete
  3. That was something which I have never come across. That was simply amazing.Please keep writing such articles.

    ReplyDelete
  4. Great topic, I would like to add that Semantically Correct HTML will also help the visually impaired user's to read your website,

    This might be helpful
    =====================
    Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/

    ReplyDelete
  5. Hey there, I think your site might be having browser compatibility issues.
    When I look at your website in Firefox, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, fantastic blog!
    Also visit my weblog : hosting uk

    ReplyDelete