Producing semantic HTML originates from the desire to communicate, which should be the primary purpose of every online page. By including semantic tags in your text, you convey more information about it to the browsers and, importantly, search engines.
Semantic HTML tags indicate what the different sections of an HTML Document are instead of merely how they look. This is a key principle in web design and semantic HTML tags make it easier to see what information is on the page and its importance.
Table Of Contents
What is semantic HTML?
Not all tags are created equally in HTML. Some are semantic tags, and some are non-semantic. Elements such as <div> and <span> tell the browser nothing about the content, making them non-semantic.
Semantic elements such as <header>, <nav>, and <footer> provide browsers with a clear definition of the content within the tag that defines its content.
Semantic HTML tags
Header:
The <header> tag is normally used for a banner image or a series of navigational links (see <nav> below). The typical contents of a <header> element are elements like an <h1> tag or a logo.
For more code examples that you can copy and explanations of the different Semantic HTML sections click here
Top comments (0)