home

HTML5 Semantic Elements

Semantic Means = Semantics within HTML is the practice and clearly defines the structure of content on the page and gives meaning.

Divisions, or divs, and spans are HTML elements that act as a container for different content, it very clear describes the meaning to both browser and developer.

non-Semantic Elements

Which is Tells nothing about its content that is called non-semantic or block level element(div, span), Block level elements (div, span) are HTML elements that act as a container for different content.

Browser Compatibility of Semantic Elements

Browser-Compatibility: IE9+-Works, Firefox, Chrome, Safari, Opera all major browsers support semantic elements(IE8 + earlier version does not support).

HTML5 semantic elements are SEO Friendly

<header>
<nav>
<section>
<aside>
<article>
<figure>
<footer>
<details>
<summary>
<time>

HTML5 header Element

The <header> tag main aim is used to specify the header of the section and document. This is totally entirely new element with a different purpose than either the "heading tags" (<h1> to <h6>) or the <head> tag. Yes, it is confusing, See the following example code with the different purpose.
This is one of the most important of HTML5 semantic elements.

The following example defines a header for a document:

<body>
<header>
<nav>
<ul> <li><a href="/html/">HTML5</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/js/">Jquery</a></li> <li><a href="/jquery/">JavaScript</a></li> </ul> </nav> <header> </body> //styles for header// <style> header { width:1024px; } </style>

The following example defines a header for an article:

<article>
  <header>Article header<header>
    <p>this tags demonstrates the heading for the article.</p>
</article>

//styles for article//
<style>
header {
font-size:16px;
}
</style> 

HTML5 nav Element

This <nav> tag specifically designed to define the navigation(website menu) links(anchor links) on the web page that links to other pages or to parts within the page: a section with navigation links.

Nav tag carries all list(li) elements and menu text with effects like hover activate and more.

In the following below example, you can see all option and effects with CSS classes and attributes with properties of nav element.

<nav>
<ul> <li><a href="/html5.html">HTML5</a></li>
<li><a href="/styles.css">CSS</a></li>
<li><a href="/jquery.js">Jquery</a></li> <li><a href="/php-db.php/">Php</a></li> </ul> </nav>
//styles for nav//
<style>
nav{ width: 450px; display: table; }
nav ul{ margin:0px padding :0px; display: none; } nav ul li{ list-style:none; }
nav ul li a{ color:#ff0000; }
nav ul li a:hover{ text-decoration:underline; } </style>

HTML5 section Element

the <section> element indicates(divide) the section in the document and thematic grouping of content in the document. The theme of each section should be identified, typically by including a heading (h1-h6 element) and paragraphs (p) as a parent of the section element.

In the following below example, you can see the section element code,

<section>
<h1>Section Element</h1>
<p>this is a semantic html5 element...</p>
</section>
//styles for section// <style> section{ width: 1024px; margin: auto; } </style>

HTML5 article Element

The <article> element represents a completely self-contained and independently distributable, reusable element.

An article should make sense on a forum post or blog post in magazine or newspaper articles even in article websites, a blog entry, user-submitted comment, an interactive widget, or any other independent item of content.

In the following below example of article Element.

<article>
<h1>This my first article</h1> <p>This post is related to article semantic element, it will describes every thing about article element...</p> </article>
//styles for article// <style>
article{ width:450px; display: table; } </style>

HTML5 aside Element

aside = "to one side; out of the way".

The <aside> element is a small section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered aside from that left side the document (see the top image).

The element can be used for pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.


If your writing aside tags for advertisement purpose its not make sense because its not SEO friendly

In the following below example of aside Element.
<aside>
<h4>News letter</h4>
<p>its small section in the website.</p>
</aside>
//styles for aside//
<style>
aside{ width:150px; border:1px solid #c7c7c7; } </style>

HTML5 footer Element

The <footer> element specifies a footer in the document.
A footer typically contains information about its section such as who wrote(author) it, links to related documents, copyright information, etc.
All are using footer tags as a sitemap (mentioning all the list of links).

In the following below example of footer element:

<footer>
Posted by: Aj Royal|Copyright © 2014 aj Royal| call-034866766
</footer>
//styles for footer//
<style>
footer{ width: auto; border-top:1px solid #c7c7c7; } </style>

HTML5 figure Element

The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.

In the following below example of figure element:

<figure>
<img src="figcaption-work.jpeg" alt="us tutorials provide web tutorials like html css js jquery">
</figure>

HTML5 figcaption Element

The <figcaption> tag defines a caption for a <figure> element.

In the following below example of figcaption element:

<figure>
<img src="figcaption-work.jpeg" alt="ustutorials provide web totorials like html css js jquery">
<figcaption>Bubbles at work</figcaption>
</figure>

HTML5 details and summary Element

It will work like a jquery Toogle (hide and show). The <details> tag specifies additional details that the user can view or hide on demand.
The <summary> tag defines to work heading for details element, it will show and hide based on user action.

Its not support in all browsers.

The following example defines a details and summary element:

<details>
  <summary>Show/Hide</summary>
<p> - by ustutorials Data. All Rights Reserved.</p>
<p>All about company property Data.</p>
</details>

HTML5 time Element

This element can be used as a way to encode dates and times in a readable way so that it can not update time on as per you system time in globe in any where, its container to display the time.

In the following below example of time and date time element:

<p>We open at <time>12:00</time> every morning.</p>
  
<p>I have a date on <time datetime="2014-03-30">Mother Day Special</time>.</p>