HTML5 semantic element

Semantics = meaning.

Semantic element = the meaning of the element.

What is a semantic element?
A semantic element can clearly describe its meaning to browsers and developers.

No semantic  element instances: <div> and <span> - no need to think about content.

Examples of semantic elements: <form>, <table>, and <img> - clearly define its contents.

Browser support



Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support semantic elements.

Note: This element is not supported in Internet Explorer 8 and earlier. However, a compatible workaround is provided at the bottom of the article.

New semantic elements in HTML5

Many existing websites contain the following HTML code: <div id="nav">, <div class="header">, or <div id="footer"> to indicate the navigation link, header, and trailer.

HTML5 provides new semantic elements to clarify different parts of a web page:


<header>

<nav>

<section>

<article>

<aside>

<figcaption>

<figure>

<footer>




HTML5 <header> element
The <header> element describes the header area of ​​the document

The <header> element takes care of the presentation area used to define the content.

You can use multiple <header> elements in the page.

The following example defines the head of the article:

 
Pubdate indicates that the date/time in the <time> element is the publication date of the document (or the most recent senior <article> element)    

Run the program and try it out 

HTML5 <nav> element

The <nav> tag defines the part of the navigation link.

The <nav> element is used to define the navigation link partial area of ​​the page, but not all links need to be included in the <nav> element!

Instance
Run the program and try it out

HTML5 <section> element
The <section> tag defines the section (section, section) in the document. Such as chapters, headers, footers, or other parts of the document.

According to the W3C HTML5 documentation: section contains a set of content and its title.

Instance

Run the program and try it out

HTML5 <article> element
The <article> tag defines separate content. .

<article> element usage example:

Forum post (forum posts)

Blog post (blog)

News story

Comment

Instance

Run the program and try it out

HTML5 <aside> element

The <aside> tag defines content outside of the main area of ​​the page (such as the sidebar).

The content of the aside tag should be related to the content of the main area.

Instance
Run the program and try it out

HTML5 <footer> element

The <footer> element describes the bottom area of ​​the document.

The <footer> element should contain its containing elements

A footer usually contains the author of the document, copyright information, terms of use of the link, contact information, etc.

You can use multiple <footer> elements in the document.

Instance

Run the program and try it out

HTML5 <figure> and <figcaption> elements

The <figure> tag specifies separate stream content (images, charts, photos, code, etc.).

The content of the <figure> element should be related to the main content, but if it is deleted, it should not affect the document flow.

The <figcaption> tag defines the title of the <figure> element.

The <figcaption> element should be placed at the position of the first or last child of the "figure" element.

Instance
Run the program and try it out

Can we start using these semantic elements?

The above elements are all block elements (except <figcaption>).

In order for these blocks and elements to work in all versions of the browser, you need to set the properties in the stylesheet file (the following style code allows older browsers to support the block-level elements covered in this chapter):

Put it in the middle of <head></head>

Issues in Internet Explorer 8 and earlier versions of IE


IE8 and earlier versions of IE cannot render CSS effects in these elements, so you can't use <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, or other HTML5 elements.

Solution: You can use the HTML5 Shiv Javascript script to solve IE compatibility issues. HTML5 Shiv download address: http://code.google.com/p/html5shiv/

Once downloaded, place the following code in the page:

<!--[if lt IE 9]> 
<script src="html5shiv.js"></script> 
<![endif]-->

The above code will load the html5shiv.js file when the browser is smaller than the IE9 version. You must place it in the <head> element, because IE needs to render these HTML5 new elements after the header is loaded.

Last Updated: 2018-07-06 12:32:44 By akshay

SHARE THIS

share_facebook share_twitter share_google_plus

Please Comment Here :