Semantic HTML is the notion of using properly named HTML tags in an HTML document.
There are over 110 tags available in HTML5 and around 100 are semantic. Each semantic element serves specific purposes in an HTML document and is named according to the purposes it serves. For example, a <h1> heading is intended and named to serve the purpose of a main heading of a document or a section, where applicable. A <video> tag is named for and serves the purposes of a video element.
Many of these named elements have specific attributes and methods associated with the functionalities they serve. In other words - their names, attributes and methods accurately describe what they are, do and how they are different from others. For example, a <video> tag represents an element which has several different attributes and methods than <img> tag. So all HTML elements have a semantic description with respect to what they are and do.
There are cases when a certain HTML tag can be misused or incorrectly used. For eample, a <nav> tag properly describes a section that has navigation items, but using a more generic <div> tag does not represent precisely what is going on in there. Or using a <nav> tag to house the content of a paragraph would be laughable.
Semantic HTML is the idea of using properly named HTML tags for different parts of an HTML document.
References
Top comments (0)