There eight new elements that are block level elements and are semantic as well. These eight elements are: < header >, < footer >, < section >, < aside >, < article >, < main >, < figure >, and < nav >. Consider the following figure:

Now describing each of these elements:

The < header > element

The header element is the first element in an HTML document. It is used to introduce sections of contents. In other words, we can say that a header element can be used to include introductory content or the navigational aids.

The header element can only be written at the top of the page. The header element can also be used as :

< div id = “header” >

The simple example of a header element is as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< head >

< body >

< header >

Heading 1

Paragraph 1

This will generate the following result:

The section element:

The section element is used to represent a generic section of the HTML document or the HTML application. The section element should not be used for styling or for the scripting purposes only.

The section element’s content should be thematic for example we can use it for the various section of a newspaper online website etc. The meaning of the statement “ section is semantic” is that the section element implies that the contents that it has is related in some way.

The section element is used as follows:

< ! DOCTYPE html >

< html >

< head >

< body >

< section >

heading 2

paragraph 1

The above example will generate the following result:

The section element can be nested inside another section element.

The article element:

The article element can be considered as the section element. There is a small difference between the article and section element.

The article element is used to specify the complete composition in a page or document or application whereas, the section element represents a section of a page or document. The article element can be nested inside another article element just like the section element.

The article element is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< head >

< article >

heading 2

paragraph 1

This example will generate the following result:

The nav element

The nav element is used to define some navigational links. The nav element is mostly used with the unordered list of links.

The nav element can also be wrapped around paragraphs that have navigational links within the same section of a page or any other section of page. The nav element simply links one page of the document with the other or one section of the page with other.

It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< head >

< body>

< nav>

< ul >

< li> < a href = “PageUp” > PageUp

< li > < a href =”PageDown” > PageDown

The above example will generate the following result:

The nav element can be used more than once in a page that a page can have several nav elements.

The aside element

The aside element is used to represent the content that is tangential to the remaining content in the page. The aside element should not be used to wrap the section of the page that is the part of the primary content that is the aside element should not meant to be parenthetical. Rather it should be used to wrap the content that is tangential to the entire page.

It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< aside>

< h3 > Quotation on Courage < /h3 >

< p >

< blockquote cite = “https://www.google.com.pk/search?q = quotes&source = lnms&tbm = isch&sa = X&ved = 0ahUKEwj3xvLKivLOAhXJxxQKHVRdCRAQ_AUICCgB&biw = 1366&bih = 631#imgrc = dHE2nHLAlk6nYM%3A” >

Courage is what it takes to stand up and speak. Courage is also what it takes to sit down and listen.

< /aside >

This will produce the following result:

In the above example, we also used the blockquote element within the < aside > element.

The footer element

The footer element is used to represent the section of the page that is at the end of the page; sometimes it can have the copyright information, list of the related links to the content and author information as well. We can have multiple footers in a single page. The footer element is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< footer >

< p >

Blog by: John Abraham < br >

Email Address: < a href = “[email protected]” > [email protected] < / a >

< / p>

< / footer >

< / body >

< /html >

The above example will produce the following result:

The figure and figcaption elements

The figure and figcaption elements are new elements in HTML5. These elements are used to improve the semantics in HTML5.

The figure element is used to explain the illustration, diagrams, photos, code listing, etc.

The figcaption element is used to mark up a caption for a content that is a part of the figure or that appears inside a figure.

The figure and figcaption elements are used as follows:

< ! DOCTYPE html >

< html >

< body >

< h3>

Example of Figure and Figcaption Elements:

< / h3 >

< figure >

< img src = “https://lh3.googleusercontent.com/proxy/Y685pVUQGY_rNEjSeFPcCg2raUcVNp9euHw-X10VhNCgq33FFi9a0gNteLVUoHKVUOP1b87p6OQkvhXbxtqMl0_rgFh3hcg3ZJBuMJqKdKDbFi0cHPkAGQ = w426-h241” alt = “Nature” > < br >

< figcaption > Fig1. Nature < / figcaption >

< / body >

< / html >

The above example is using a link for the figure. This example will generate the following result:

Why Semantic elements are used?

The semantic elements are used to help the search engine optimization because in HTML4 the style elements made the search engines impossible to search the specified content. The semantic elements are also used to improve the automated processing of the documents.

The mark element:

The mark element is used to mark or highlight a piece of text in a document to give reference as it is related to some context in another document. For example if we use the above example to mark figure and figcaption.

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h3 >

Example of < mark> Figure < / mark> and Figcaption Elements:

< / h3 >

< figure >

< img src = “https://lh3.googleusercontent.com/proxy/Y685pVUQGY_rNEjSeFPcCg2raUcVNp9euHw-X10VhNCgq33FFi9a0gNteLVUoHKVUOP1b87p6OQkvhXbxtqMl0_rgFh3hcg3ZJBuMJqKdKDbFi0cHPkAGQ = w426-h241” alt = “Nature” > < br >

< figcaption > Fig1. Nature < / figcaption >

< / body >

< / html >

This will generate the following result:

Other semantic elements in HTML5

There are other semantic elements that have been included in the HTML5 document. For example:

The details element

The details element is used to add more details for the user or to give additional information. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h3 >

Example of Figure and Figcaption Elements:

< / h3>

< figure >

< img src = “https://lh3.googleusercontent.com/proxy/Y685pVUQGY_rNEjSeFPcCg2raUcVNp9euHw-X10VhNCgq33FFi9a0gNteLVUoHKVUOP1b87p6OQkvhXbxtqMl0_rgFh3hcg3ZJBuMJqKdKDbFi0cHPkAGQ =w426-h241” alt = “Nature” > < br >

< figcaption > Fig1. Nature < / figcaption >

< details >

< p > This picture has been taken from a website. It is depicting sunrise < / p >

< / details >

< / body >

< / html >

This will generate the following result:

The summary element

The summary element is used to give a summary of the content of the detail element. It is used with the detail element. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< h3 >

Example of Figure and Figcaption Elements:

< / h3 >

< figure >

< img src = “https://lh3.googleusercontent.com/proxy/Y685pVUQGY_rNEjSeFPcCg2raUcVNp9euHw-X10VhNCgq33FFi9a0gNteLVUoHKVUOP1b87p6OQkvhXbxtqMl0_rgFh3hcg3ZJBuMJqKdKDbFi0cHPkAGQ=w426-h241” alt = “Nature” > < br >

< figcaption > Fig1. Nature < / figcaption >

< details >

< p > This picture has been taken from a website. It is depicting sunrise < / p >

< summary > Sunrise < / summary >

< / details >

< / body >

< / html >

This will provide the following result:

The main element

The main element is used to represent the main content of the document inside the < body > element. It is used as follows:

EXAMPLE

< ! DOCTYPE html >

< html >

< body >

< main >

< h1> Main Content < / h1>

This is the main content of the document

< / main >

< / body >

< / html >

This will produce the following result:

The Time element

The time element is used to represent the time or the date. It is used as follows:

< ! DOCTYPE html>

< html >

< body >

< p > It is < time > 10:10 AM < / time > < / p >

< / body >

< / html >

This will produce the following result: