Semantic Code for your Website – A Necessity

You must have wondered what all these jargons are that web-designers use? Even if you don’t know about web designing, you probably know that your site is coded in HTML – a programming language. In any programming language, the code should be correct in two ways: syntax and semantic. Here we will talk about semantic code of HTML and why semantic code for your website is a necessity.

HTML was developed for the purpose of describing the content of a website. It was never intended to be visually pleasing. Semantic content is this concept of describing the content, and does not focus on the visual aspect of a page.

The syntax of a code refers to the correctness of the code, if the code is executing things correctly, that there are no mistakes in the code. However the semantics refer to doing the correct things, if only those things are done which need to be done. It ensures that no unintended tasks are accomplished correctly. Please note that the difference between the two lies between doing the task correctly and doing the correct task.

For e.g., in HTML, we can give heading of a page as:
this is a heading

This will be interpreted by HTML as a common statement with different font. The syntax of the statement is correct as it is accomplishing the correct thing. But we want here is the browser to understand and interpret the statement as a heading and not as a normal statement. The browser will be able to process it as title only if it understands that it is one.

So for the computer to understand that this is a title, you can write the following code:

this is a heading

A file called CSS (cascading style sheet) can then be created to define the appearance of the heading separately.

Both of the codes above give the effect of the statement being a title, then why there is need to write it in the latter manner? Here are some of the reasons:

• Placement in Search Engine: It helps in understanding the content properly and thus affects the page rank. It is easier for ‘search engine spiders’ to understand and thus improves your placement in the search engine.
• Aids Accessibility: Speech browsers (mainly used by visually impaired) rely on the semantics to understand the content.
• Semantic code is easier to download as it is shorter, as shown in the example above.
• By using semantic code, the site updates becomes easier, as you can apply changes to all the headings in the site simultaneously by changing the CSS.
• It is easier to understand.

Coming to the step of ensuring that your website is written semantically, there is no automated tool to ensure this. You will have to go through the code to check if it contains colors and font tags instead of describing the content. Or the other way out could be to directly ask your designer if they use semantic code. If he looks at you blankly, then you can be sure that he is not adhering to it. This way you can easily get to know that its time either you push your designer that semantic code for your website is a necessity or change the designer.