HTML5 from quatre-bornes.com website is something innovative. Most of this site content has been already been implemented using HTML5.  We surely do understand that most of you might be looking at the source codes of this site and see, what on earth are these codes and what and where its pulling from.

We did come across so called web developers and designers, who talk very big on web but they fail to understand simple practical HTML code,  just because they use the tools like dreamweaver, webdev or what so ever tool, but all you ask them is write a basic HTML code and you see real them behind the technology.  We personally don’t have any respect for those who don’t even understand ABC’s of web. There is a lot of buzz around the emerging HTML5 standard yet there is a difference of opinion among developers in terms of adoption. Some takes the wait-and-see approach while others are ecstatic about its potential and start learning and experimenting with it. Even though it will take HTML5 some more time to be universally available, a lot of popular browsers and sites already support it. It’s the right time to start experimenting with HTML5 and even CSS3 and learn how to prepare your site for the future Web. In this article, we take a look at some of the new features of HTML5.

HTML5 Structure

Most web pages contain common structures like headers, footers, sidebars and main content areas. In HTML4 designers use <div> tags to differentiate and style these different sections. While this works fine, the problem is that it is difficult to process these pages because they lack semantics. HTML5 introduces a set of new elements that makes it easy to structure your page through the use of tags like: <header>, <nav>, <article>, <aside>,<footer>. The potential of this is huge – for example, search engine will be able to figure out where your main content resides and index that section only.

HTML5 Inline semantic elements

Several new elements have been added to HTML5 to support indication of basic quantities like time and numbers.

<mark> – allows you to mark a particular keyword on your page. For example, you can mark all returned keywords in a search result page.

<time> – this elements indicates a specific date and time. You can use any format you’d like, but for a more semantic approach, you can use the datetime attribute: <time datetime=””>

<meter> – this can be used to indicate content that is a fraction of a known rage like disc storage usage. It has attributes like value, min, max, low, high and optimum.

<progress>- this elements allows you to specify the percentage progress of an ongoing process. It has the attribute value and max.

HTML5 Input Types for Form

Along with the standard form input types, HTML5 will support several new input types like:

• - datetime
• - date
• - time
• - month
• - week
• - number
• - range
• -email
• – url

The date input type for example will automatically display a date-picker. In terms of form validation, you will also be able to specify the required attribute to denote fields with required input. This will help a lot form form validation.

Video and Audio Embedding

While multimedia content is extremely popular online, the format used by different providers differs a lot. HTML5 aims to make the multimedia platform more open by replacing all propriety formats. It also makes the embedding easier. Right now, developers have to resort to using different scripts or players to stream audio and video content online, but with HTML5 embedding multimedia will get easier through the user of tags like <audio> and <video>

HTML5 Canvas Elements

HTML5 canvas elements allows you to dynamically draw graphics using JavaScript. This will be helpful to create canvas for charts, graphs, animation or simply diagrams like flowchart. The <canvas> element is already supported by most browsers.

HTML5 – Dynamic and Interactive Features

Most of the new features introduced in HTML5 aims at helping developing better web applications. As such, several new elements are focused on the user interface for Web applications:

<details> – allows you to specify a tooltip for a particular DOM element

<datagrid> – this will you to create a table from a dataset which can then be updated by the user or scipts.

<command> – defines actions that should happen when a dynamic element is activated

context menus – developers will be able to easily create right-click menus for their Web applications.

Other HTML5 APIs

HTML5 has numerous APIs that open the doors for future Web applications. It will be possible to do application cache, offline data storage and drag and drop right in the browser without downloading any plugins or ActiveX controls.

Quatre Bornes Town Portal Share

•