HTML5 new structure and inline elements

HTML5 introduced various new structural elements which are

<section> element – The section element, in conjunction with the <h> element, offers a mechanism for structuring documents into sections. It defines content to be block-level but imposes no other presentational format on the content. It allows to separate the sections of document from the h1–h6 elements. It is used to contain content that would be listed in a document’s outline or table of contents. The following example illustrates it

<body>

<h>Events</h>

<h>Introduction</h>

<h>Specifying the binding elsewhere</h>

</section>

</body>

<header> element – It represents a group of introductory or navigational aids. It is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. An

HTML code

<header><p>Welcome to…</p>

<h1>Voidwars!</h1></header>

Browser output

HTML5 new structure and inline elements

<footer> element – The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section like author, links to related documents, copyright data, etc. Footers don’t necessarily have to appear at the end of a section, though they usually do.

HTML code

<nav>

<p><a href=”/credits.html”>Credits</a> —

<a href=”/tos.html”>Terms of Service</a> —

<a herf=”/index.html”>Blog Index</a>

</p>

</nav>

</footer>

Browser output

HTML5 new structure and inline elements 2

The <nav> element – It represents a section with navigation links. The navigation links to other pages or links to parts within the page, though not all groups of links on a page need to be in a nav element. The nav element is appropriate only for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

HTML code

<nav>

<h1>Navigation</h1>

<ul>

<li><a href=”articles.html”>Index of all articles</a></li>

<li><a href=”today.html”>Things sheeple need to wake up for today</a></li>

</ul>

</nav>

Browser output

HTML5 new structure and inline elements 3

The <article> element – It represents an independent item section of content.

It is an independent item section of content used for forum post, magazine article, newspaper article, blog entry, user-submitted comment, etc. In principle, content in the article element should be independently distributable or reusable.

HTML code

<h1>The Very First Rule of Life</h1>

<p></p>

</header>

<p>If there’s a microphone anywhere near you, assume it’s hot and

sending whatever you’re saying to the world. Seriously.</p>

<a href=”?comments=1″>Show comments…</a>

</footer>

</article>

Browser output

HTML5 new structure and inline elements 4

The <aside> element – It represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Some example of contents are pull quotes, sidebars, advertising, groups of nav elements, etc. Other content that is considered separate from the main content of the page.

HTML code

<aside>

<h1>Switzerland</h1>

<p>Switzerland, a land-locked country in the middle of geographic Europe,

has not joined the geopolitical European Union, though it is a signatory to a number of European treaties.</p> </aside>

Browser output

HTML5 new structure and inline elements 5

The <figure> element – It represents some flow content like to annotate illustrations, diagrams, photos, code listings, etc. which are referred from the main content of the document, but without affecting the flow of the document. The element can have a caption and the figcaption element child of the element, represents the caption of the figure element’s contents.

HTML code

<figcaption>The Stata Center</figcaption>

</figure>

Browser output

HTML5 new structure and inline elements 6

HTML5 introduced various new inline elements which are used to define time based semantic elements as

The <mark> element – It is used as a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.

HTML code

<p>Look around and you will find, no-one’s really

<mark>colour</mark>

blind.</p>

Browser output

The <time> element – It is used for either a time on a 24 hour clock, or a precise date in the calendar, optionally with a time and a time-zone offset. It encodes modern dates and times in a machine-readable manner but, is not intended for encoding times for which a precise date or time cannot be established like winter around 250 BCE. It has two attributes as

datetime can take values of date or time, which specifies the date or time that the element represents and can be a date, time or date and time
pubdate can take values of “pubdate” or “” (empty string). It indicates that the date and time given by the element is the publication date and time of the nearest ancestor article element — or, if the element has no ancestor article element, of the document as a whole.

HTML code

<p>

On <time datetime=”1913-03-12″>12 March 1913</time>, the city of Canberra

was officially given its name by Lady Denman, the wife of Governor-General

Lord Denman.

</p>

Browser output

HTML5 new structure and inline elements 8

The <meter> element – It represents a scalar measurement within a known range, or a fractional value and can be used for showing disk usage, relevance of a query result, fraction of a voting population, etc. It should not be used as a progress bar as progress element is used for that. It needs a known maximum value. It has the following attributes

value takes valid floating point number to specify the value to indicate as the “measured” value and is required attribute for the element.

min takes valid floating point number to specify the lower bound of the range.
max takes valid floating point numbers to specify the upper bound of the range.
low takes valid floating point number to specify the range which is the “low” part.
high takes valid floating point number to specify the range which is the “high” part.
form, is the ID of a form element to which it is associated.

HTML code

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>

Voter turnout: <meter value=0.75><img alt=”75%” src=”graph75.png”></meter>

Tickets sold: <meter min=”0″ max=”100″ value=”75″></meter>

Browser output

HTML5 new structure and inline elements 9

The <progress> element – It indicates the completion progress of a task. It is a number in the range zero to a maximum, giving the fraction of work that has so far been completed. It has the following attributes

value takes valid floating point numbers which specify how much of the task has been completed. It must have a value equal to or greater than zero, and less than or equal to the value of the max attribute. If the max attribute is not present, the value attribute must have a value less than 1.0.
max takes valid floating point numbers which specify how much work the task requires in total and must have a value greater than zero.
form, is the ID of a form element to which it is associated.

HTML code

<h2>Task Progress</h2>

<p>Progress: <progress id=”p” max=”100″><span>0</span>%</progress></p>

Browser output