Nivedita’s Weblog

Semantic Markups

Good HTML structure is based on logic, order, and using semantically correct markup. Semantics is the study of language meaning. For language this is the words we use to communicate. For HTML it is the tags we use to mark a document up. An example is the p tag for paragraphs which tells the browser that the text within a p tag is a paragraph. Semantics simply means trying to make sure, the documents mean something.

If a user can see the web page as you intended it in a browser why does it matter if the document isn’t semantic? Well it matters quite a lot. Firstly Google and other search engines see the page without styles. The only way for search robots to understand which elements on the page are more important than others is through the markup. If the business name is within a Paragraph tag it is likely to get lost in other content and not be returned in search engine results. But if you put it within a Heading 1 tag the search robots know to give it more importance. So search engine optimisation is one very good reason to use semantic markup.

Secondly a document is easier to style if it is marked up correctly. If all your section headings are Heading 2 tags you only need to specify one CSS class and all section headings are styled. If in the future you want to change your design entirely a well marked up document will make the exercise simple

Thirdly many other user agents won’t understand your stylesheet, whether it be a mobile device or the next big thing on the internet. By writing semantic markup you are future proofing your documents. HTML is like a common language – if you take the time to understand it and write documents semantically your code will stand the test of time. If you choose to write poorly formed HTML it is like a dialect – some will understand you very well but others won’t understand you at all, and it is likely you will need to translate it in the future.

Examples:
Simillar tags such as <i> itallics and <em> may appear same but they need to be used in a correct contact.
simillarly heading tags and the bold, strong and font tags , though they appear same the need to be used in the correct context.

Using semantic markup you will give the following benefits

• Better search engine optimisation
• More maintainable code
• Easier code to style with CSS
• More accessible code for blind and partially sighted users
• You are future proofing your code
• You are using the right tools for the job

You can choose to ignore semantic markup if you want but you will make your job a lot harder!