Table of Contents
In this post, I am trying to note down uses of HTML5 elements
HTML5 Core Elements
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 |
Things to remember
article
- 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
section
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
header
Header element can be added to article or section. This isn’t limited to only the start of your page—it provides a semantic way of declaring the header to any area of the webpage.
hggroup
Ttypically contains the standard and familiar h1 to h6 elements
progress
progress element 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.
<progress max="5"></progress>
aside
<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
Helpful Links
https://www.w3schools.com/html/html5_semantic_elements.asp
References
- Rick Delorme, 2014; Exam Ref 70-480 Programming in HTML5 with JavaScript and CSS3