Semantic Mark-up is the web development practice of coding a web page with elements that are relevant to the code contained in them. The correct use of HTML is vital in creating a semantically marked up document.
HTML was designed to determine the structure of a document by using the appropriate elements. Ultimately, a properly marked up document would be readable by itself, without the use of CSS or Javascript. This can be easily achieved by efficiently using the appropriate HTML elements.
For example
<h1> tags for headers
<h2> tags for sub-headers;
<p> tags for regular paragraphs
<blockquotes>tags for quotes
This may all seem very simple and straight forward, but far too often the mistake is made of using common elements, such as the <p> tag, adding a css class, and styling it to represent a quote. This practice would not be considered good semantic HTML.
Also, there are other elements, which are currently part of the HTML specification, that will visually achieve what you want but are meaningless and will not be considered semantically marked-up code.
For example
Both the <i> and the <em> tag will italicize text, but where the <i> tag is meaningless, the tag <em> will represent the enclosed content as emphasized text and therefore identify its relevence to the subject.
However, Semantic markup doesn’t only refer to the HTML document itself, it also includes the practice of keeping any styling/presentation aspects and JavaScript separate from the HTML page. In other words, avoid using any on page CSS or JavaScript.
Advantages of Semantic Markup
The advantages of using good semantic markup in a document are:
- It will be understandable and coherent to people having it read to them with the help of a screen reader.
- It will help to get a better search engine ranking, since search engines can easier distinguish the importance level of the document’s different parts and what message is being conveyed.
- It will be a lot easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS).
- In most cases, there will be less code, which isn’t cluttered by formatting, meaning that the web page will be faster to load.