What are Semantic and Non Semantic elements ?
The best thing and most important thing introduced in HTML5 is semantic tags. HTML 4.01 and older versions had some semantic tags like <img> and <table>, but HTML5 blessed developers with full set of semantic tags for every box in a webpage which eliminated the Ugly <div> tags to an extent.
Semantic elements = elements with a meaning.
Basically Semantic tags are those tags which clearly defines its content. In other terms semantic tags are those tags whose name can easily let you know which type of content take place in it. Like <header>, <section>, <article> and <footer>
Header tag is used for storing the header in a HTML5 webpage. The header can contain Heading, Logo and stuff like that. Likewise the Section, Article and Footer tags are used for storing a Section, Article and a footer respectively in the webpage.
HTML5 offers new semantic elements to define different parts of a web page:
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
Why Semantic Elements?
With HTML4 and older version, developers used their own id/class names to style elements for different sections like header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, etc.
This made it very complex for search engines to identify the correct web page content. With the new HTML5 elements (<header> <footer> <nav> <section> <article>), this will become easier.
According to the W3C, a Semantic Web: “Allows data to be shared and reused across applications, enterprises, and communities.”
What are Non-semantic tags?
Non-semantic tags are just opposite in nature of semantic tags. Non-semantic tags are the tags which Tells nothing about its content. In other terms Non-semantic tags are those tags whose name doesn’t suggest or describe you anything what they do. For example <div> and <span>
[paypal-donation]
