Solutions for Real World Frontend Problems.

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

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.
The importance of writing Semantically Correct HTML.

One thought on “The importance of writing Semantically Correct HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top