The list below is the HTML5 semantic elements, make up the core of HTML5.
|article||Defines self-contained areas on a page|
|aside||Defines smaller content areas outside the flow of a webpage|
|figcaption||Defines the caption of a figure element|
|figure||Defines content that contains a figure, such as an image, chart, or picture|
|footer||Defines the bottom of a section or page|
|header||Defines the top of a section or page|
|hgroup||Defines a group of headings (H1–H6 elements)|
|mark||Defines text that should be highlighted|
|nav||Defines navigation to other pages in the site|
|progress||Defines the progress of the task|
|section||Defines the distinct content of a document|
- Represents a whole and complete composition or entry
- Each article is wholly contained within itself
- Article can have sub-articles. Each article added to the document represents an independent part of the document that can be wholly contained.
- Typically, the first element within the <article> element is a header element or header group.
- <section> element is closely related to this
Use to subdivides or break down pages into sections. Like an <article> element, the first element within a <section> element is typically a header or a header group
Ttypically contains the standard and familiar h1 to h6 elements
progresselement represents the progress of an objective or task. The two supported types of progress tasks are determinate and indeterminate.When you don’t specify the value attribute, the browser can infer that the progress element represents an indeterminate task.
<aside> element defines any content that doesn’t fall within the main flow or main content of the current page—for example, a sidebar, a note, an alert, or an advertisement.
This doesn’t place itself automatically to any particular side of the webpage; You need to position an aside using styles.
Element’s name says it all
- <figure> & <figcaption> elements provide the semantic elements necessary for adding graphics and figures to webpages.
- <mark> to highlight text
<p>Some very <mark style="background-color:red;">important</mark> information provided here!</p>
- <footer> to define footer of the website
- <nav> used for navigation menu.
Finally, HTML5 semantic elements provide the mechanisms necessary to structure the page
more easily for accessibility via screen readers. That;’s all for today