Learning HTML5 semantic markup with Jobair

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.

HTML5 element Description
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


  1. Represents a whole and complete composition or entry
  2. Each article is wholly contained within itself
  3. Article can have sub-articles. Each article added to the document represents an independent part of the document that can be wholly contained.
  4. Typically, the first element within the <article> element is a header element or header group.
  5. <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


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.


Ttypically contains the standard and familiar h1 to h6 elements


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> 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
  • <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



  • Rick Delorme, 2014; Exam Ref 70-480 Programming in HTML5 with JavaScript and CSS3

I would like to hear your thoughts