Semantic HTML –
Semantic HTML5 Elements Explained
Semantic HTML is a coding style. It uses HTML markup to reinforce the semantics or meaning of the content in webpages and web applications rather than just defining its look or appearance. It introduces meaning to the code we write.
For example: , , and , these tags clearly define its content.
Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.
List of new semantic elements
The semantic elements added in HTML5 are:
<article> <aside> <details> <figcaption> <figure> <footer> <header> <main> <mark> <nav> <section> <summary> <time>
Using Semantic HTML
The following structure below, might be help you understand the use of semantic html
<html> <head> <title></title> </head> <main> <header> <nav> <ul> <li> </li> <li> </li> </ul> </nav> </header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer> <p></p> </footer> </main> </html>
- Easier to read
- Greater Accessibility
- Consistent Code