HTML5 features and structure elements

A Lot has already been written for HTML5 though it is still in draft mode but the other side of the coin is 90% of its features already supported by Modern Browsers. Moreover the big giants of the web ( Apple, Facebook , Google, Yahoo etc…) have already started using it. HTML5 has many new and helpful features, which makes it very robust and independent. It is like a boom to mobile and web applications. Instead of writing all aspect of HTML5 we are mainly focusing on core features of HTML5, the topics that will be covered are enough to get started with HTML5 from a developers point of view.

HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s. The HTML5 draft reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content. The draft:

  1. Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
  2. Defines detailed processing models to foster inter operable implementations.
  3. Improves markup for documents.
  4. Introduces markup and APIs for that can be very helpful for making Web Development easy.

HTML5 is still a draft, because the contents of HTML5, are still being discussed on the HTML Working Group and WHATWG (Web Hypertext Application Technology Working Group) mailing lists.

Document Type

If we start writing a normal HTML page the first thing that comes to our mind is the DOCTYPE (a doctype specifies a document type), HTML5 provides a New Doctype.

Usually a doctype was written as shown below,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
totally confusing, for beginners it was terror, to understand all this, well not any more HTML5 has introduced a simple doctype
<!DOCTYPE html>

which itself defines what it is, i.e. it is an HTML document.

In fact, doctype is even not necessary in HTML5? However, it’s used for current, and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode.

Structure Elememts of HTML5

Once a doctype is specified the second thing that comes to mind is the structure of the document, HTML5 provides a complete new set of Structure Elements that will help us to define the structure of our document. Moreover these tags are self explanatory which will help us to distinguish one part of document from another.

Before discussing upon all these new elements have a look on the image below. The image itself gives all the explanation for the new structure elements.

<header> tag defines the header of a page.

<article> tag defines the article or the primary content on a page.

<section> tag to define sections of pages/article.

There can be multiple <section> tags inside the <article> tag or the <aside> tag.

<aside> tag defines extra content of a page like a sidebar on a page.

We can use multiple header and footer tags in our file and can even nest them.

Besides the Structure Elements covered above there are some others too that can be of great use to us, they are briefed below.

<bdi> Isolates a part of text that might be formatted in a different direction
from other text outside it
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code
listings, etc.
<figcaption> Defines a caption for a <figure> element
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian
typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break

These new elements are no different than styling a div element then why to use them? The main reason to use these new basic page structure elements is not because they add some new powerful tools to web development. What they add instead is readability to your HTML markup. Instead of trudging through multiple div elements to find the navigation section of the page wouldn’t it be quicker and easier to do a simple find for the nav element?

Making HTML5 Structure work with older Browsers

As these elements are new, they are not defined for old browsers and IE, so there is a lack of support for these features across browsers is less than ideal, but in fact it doesn’t really matter for our purposes very much.

We can get HTML5 elements working across all browsers today with the minimum of effort.

If we put an element into a web page that the browser doesn’t recognize, by default the browser will just treat it like a <span>, i.e., an anonymous inline element. These new elements are supposed to behave like block elements, therefore the easiest way to make them behave properly in older browsers is by setting them to display:block; in our CSS. we can do this by including the following CSS rule at the top of your CSS, whether it is contained in the head of your HTML file, or an external CSS file.

article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}

This solves all your problems for all browsers except one. Older versions of Internet Explorer refuse to allow styling of unknown elements, but this can be fixed by inserting a line of JavaScript into the head of your document for each element, like so:

<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>

IE will now magically apply styles to those elements. There is also a problem with these styles STILL not being carried through to the printer when you try to print HTML5 documents from IE. This print problem can be solved using the HTML5 Shiv JavaScript library created by Remy Sharp, which also handles adding the document.createElement lines for us, we should wrap it up in Conditional comments for IE less than IE9, so that the modern browsers don’t execute the JS.

Features of HTML5

HTML5 supports a complete new set of features along with some API’s, the features/API’s are as listed below.

  • HTML 5 Form
  • Geolocation
  • Communication
  • Web Workers
  • Web Storage
  • Web Socket
  • Canvas
  • Offline Web Application
  • Audio and Video

Individually, there is a lot to discuss about the features of HTML5, hence for now they are just listed above, light on all features will be put down in our upcoming posts.

Related Posts