HTML5 Semantic Elements
HTML5 Semantic elements clearly describes its meaning to both the browser and the developer. HTML5 defines eight new Semantic elements. All these are block-level elements.
In HTML4, we have to use only one element for all page sections, i.e. div tag. Div is a non-semantic element because it does not tell anything about its content.
HTML4 Semantic elements are <form>, <table>, and <img> - Clearly defines its content.
HTML5 Semantic Element list:
| HTML5 Semantic Element | Description |
|---|---|
| <header> | Define the Page/Section header |
| <footer> | Define the Page/Section Footer |
| <aside> | Defines content aside from the page content |
| <nav> | Stands for navigation, defines the menu list. |
| <main> | Specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not repeat on multiple documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. |
| <section> | Defines a section in a document |
| <article> | Defines an article in a document |
| <figure> | Defines a figure in a document |
Exercise 1: HTML basic page layout using HTML5 semantic tags.
