Before CSS was introduced, HTML only was used to convey both structural and presentational information. You would also encode certain presentational characteristics of the content such as font color, font type, and layout using HTML. Since the inception of CSS, it has been encouraged to use HTML strictly for structural markup, leaving the responsibility of styling and presentation to CSS.
HTML tags are classified as semantic and non-semantic tags according to the purpose they serve.
Semantic markup tags
Tags such as h1 and p elements explain the meaning or purpose of the content they enclose.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
When a browser notices the above piece of HTML, it understands that the content is a paragraph.
Non-semantic markup tags
There are tags in HTML, namely div and span that just indicate that the content inside them are grouped together, while not giving any semantic information of it.
What is semantic HTML?
Semantic HTML is using semantic markup tags to precisely describe the meaning of the content between them. In semantic HTML, non-semantic markup tags should only be used for data that cannot be semantically labeled. It could be said that HTML was semantically written:
- If HTML was not used to describe presentational characteristics of the content.
- If appropriate tags were used to mark up different types of content in the document.
Why Semantic HTML?
Semantic HTML makes navigation easier for the visually impaired. Imagine a visually impaired person using 2 websites, one which was developed using semantic HTML, and the other which was not. While using the former website, the user can easily navigate as the screen reader readily provides the outline of it. But, in the case of the latter website, as it has no accessibility features, the user has to read from top to bottom of the page, making navigation difficult.
It also helps in increasing accessibility to web pages. Search engines depend on HTML elements to extract the meaning of the text on webpages. So, by using semantic HTML the overall semantic clarity increases, which leads to better accessibility.
Top comments (0)