Let's understand everything about the semantic HTML with real world examples.
𧡠β
𧡠β
What is Semantic html?
It is a type of markup in html which clearly gives an special meaning to the browser and also increases the accessibility of the html tags
There are many types of semantic html elements exist in the latest HTML5 version.
It is a type of markup in html which clearly gives an special meaning to the browser and also increases the accessibility of the html tags
There are many types of semantic html elements exist in the latest HTML5 version.
What is Non-Semantic html?
Unlike semantic elements, they have no meaning. They don't tell anything about their content, whereas Semantic HTML helps to communicate its meaning not only to the developer but also to the browser.
Unlike semantic elements, they have no meaning. They don't tell anything about their content, whereas Semantic HTML helps to communicate its meaning not only to the developer but also to the browser.
Semantic elements clearly define its content.
Now, why we need to use semantic elements? π€
π It makes the HTML more comprehensible by better defining the different sections and layout of web pages.
π It increases accessibility, hence provide better user experience.
Now, why we need to use semantic elements? π€
π It makes the HTML more comprehensible by better defining the different sections and layout of web pages.
π It increases accessibility, hence provide better user experience.
π It helps in making better site structure.
π It increases the site performance.
π It increases the site performance.
Now we know why we should use semantic elements. But do you know why we should not use non-semantic element like div in making main container? π€
Well, they don't give any meaning, any information about their content.
Well, they don't give any meaning, any information about their content.
This is the structure of some most important semantic elements:
You can see that these tags clearly shows their respective places and that's how it helps the browser to increase the accessibility.
Let's discuss about these semantic elements:
Let's discuss about these semantic elements:
π <header> - This tag is used as a container of introductory content such as author's information.
π <nav> - One of the most important tags. It contains the major navigations links, for examples: home, contact us, about, etc.
π <nav> - One of the most important tags. It contains the major navigations links, for examples: home, contact us, about, etc.
π <section> - It, simply represents a section container in web pages. You'll understand it more better when we'll look into examples.
π <aside> - This tag defines those content which are aside from the main content.
π <aside> - This tag defines those content which are aside from the main content.
π <main> - As its name tells, this is the main tag, it contains the main content of the web pages.
π <article> - It is mainly used on posts, blogs, stories, etc.
π <footer> - Footer tag makes sense on its own. It contains the footer section of the web pages.
π <article> - It is mainly used on posts, blogs, stories, etc.
π <footer> - Footer tag makes sense on its own. It contains the footer section of the web pages.
Some semantic and non-semantic elements are given below:
Let's understand it more clearly with some examples:
1) Twitter
1) Twitter
2) Codepen
3) Codepen
Let me know below if you want a cheat-sheet of all the semantic elementsπ
That's all for now!
1. Make sure to follow me (@Krishn_aGupta) for more of these and also turn on the notification so that you never miss any of my tweets.π
2. RT the tweet below to share this thread with your audience.
1. Make sure to follow me (@Krishn_aGupta) for more of these and also turn on the notification so that you never miss any of my tweets.π
2. RT the tweet below to share this thread with your audience.
Loading suggestions...