HTML 5: Five Things of Special Interest

HTML 5 is the upcoming update of the hypertext markup language, the main way of creating content to be placed on the world wide web. HTML development stopped in 1999, on HTML version 4.01, and since then, web content has changed so that the current HTML specifications no longer meet today's requirements.

HTML 5 aims to increase HTML interoperability and meet the growing demands of diverse and blended web content. HTML 5 also aims to address the shortcomings of the fourth version. In this article we will take a look at 5 new interesting things in HTML 5.

This is an article by our guest, Jacob Gube, a web developer and designer, the author of Six Revisions , a blog about web development and design.

A bit of history

Distracted thoughts about HTML 5 began in late 2003. The World Wide Web Consortium (W3C), an organization that oversees standards for web-based protocols and recommendations, expressed interest in a draft of HTML 5 developed by the Web Hypertext Application Technology Working Group (WHATWG), a group formed in 2004 from representatives of Apple, the Mozilla Foundation and Opera Software . As a result, in 2007, the W3C HTML Working Group was formed to develop the HTML 5 specifications.
')
Development is underway and it is expected that HTML 5 will reach the status of the W3C Candidate Recommendation in 2012, although most modern browsers already have partial support for the HTML 5 specifications.

New Interesting Functions

1. New HTML elements that will allow us to better describe the content.

The primary task of HTML is to describe the structure of a web page. For example, the text enclosed between <p> </ p> elements tells the browser that the text between these elements is a paragraph.



Diverse web content is increasingly beyond the capabilities of HTML 4 to accurately describe the content of web pages. Streaming video and audio is a typical example. Parts of websites like navigation menus and trademarks (usually located in the title) are present on most web pages. More importantly, contrary to current HTML specifications, improvements in JavaScript, Flash, and server-side technologies are helping to spread rich Internet applications that are responsive, user-centric, browser-based applications.

By adding many HTML elements , HTML 5 aims to give developers a better and more accurate way to describe the data.

As an example, we will present how, according to the current HTML specifications, we would describe the structure of a typical web page:



The problem with this kind of markup is that for the browser all elements are <div> elements. The browser handles everything inside the <div> elements in the same way, because it doesn’t see the difference between the blocks, and the classes and identifiers like content, sidebar and footer are different from site to site.

In HTML 5, you can describe the markup of the same page differently:



In this markup, the browser knows the purpose of each of the parts. He knows that the main content of the page is inside the <article> element, that the navigation of the web site is inside the <nav> element, and so on.

Practical use does not end with an attractive-looking and more semantic markup. These innovations increase the interoperability of our markup. For example, an external system, such as a search bot, can more accurately determine which content on a web page is more important. These systems may skip the processing of the elements <nav> and <footer> because such elements most likely do not contain important content on the pages. Consequently, a properly designed HTML 5 document will allow search engines to better understand its contents.

A sly developer can create an application that collects only the <article> sections on a group of web sites to save to a database or, say, generates a list of the entire video on a page, finding all <video> elements .

Software that allows you to read the text for people with low vision, will allow users to quickly navigate to the main content section. They can go directly to the <article> element if they want to read the main content on the web page or go directly to the <nav> element if they want to go to another page.

2. Improved work with web forms

Nowadays it is difficult to do without forms on web sites. You encounter them when you post a comment on a blog, register a user account, or send mail to Gmail. HTML 5 offers specifications, called Web Forms 2.0 , which include rethinking how web forms should be used. They provide web developers with many options and new features for efficiently and easily managing input fields and submitting a form.

One of the most impressive things about Web Forms 2.0 is validation. Currently, developers need to use JavaScript (on the client side) or PHP (on the server side) to validate the input. For example, many web forms contain required fields (for example, for username or email fields):



In HTML 4, the markup for such a form would look like this:



Currently, you must use scripts to validate user input. In this example, the developer must write his own validation code (or use the one created earlier, like this ) to make sure that the required fields were not accidentally filled in or that the specified email is correct (usually this is done through a regular expression test).

To allow the author to process the page without validation scripts, HTML 5 (with current Web 2.0 specifications) provides us with additional attributes, such as " required " and " email ", which automatically check if the fields are filled in and whether the email field is correctly filled out.

3. API for easier web application development

HTML 5 will present several APIs for new and existing elements aimed at improving the development of web applications and designed to eliminate the weaknesses of HTML 4 in terms of the ability for developers to create markup for their web applications.

One of these APIs is specifically designed to work with audio and video through the use of the <audio> and <video> elements. This API provides the ability to play audio and video and eliminates the need to use third-party applications, such as Flash, in order to display media (at least for supported media files).



Watch this demonstration of the video controls that accompany the Opera Developer Community article on the video element .

4. The <canvas> element allows you to change the image on the fly

Most people perceive information faster and more efficiently through visual display. For example, between a table, numbered data and a pie chart (pie chart), the pie chart is the best data perception for the user, which allows the user to better understand the weight and ratio of the data.



The minus of the images is that they are static. If you created a pie chart in the traditional way (through an image editor like Photoshop or an application like Excel), then you will not be able to change the data without manually editing your graphics.

With the <canvas> element ; You can take editable data (from a database) and apply it to a pie chart, or any other 2D mapping, through scripts.

The canvas API also allows users to interact with <canvas> elements. For example, you can write a script that responds to a user's click on one of the parts of the pie chart.

5. Users can edit and interact with sections of the web page.

The HTML 5 User Interaction section describes new ways to create interactive web pages. The “contenteditable” attribute (a logical attribute that can be true or false) allows you to mark which parts of the web page users can change.

This mechanism can be useful for wiki-style web sites where content is generated by users. Another option for using the contenteditable attribute is to create web page templates. This will provide users of your web site who are not familiar with HTML with a convenient opportunity to enter content safely, without affecting the critical places on the page, which should be filled with more competent users.

At the document level, you can specify the attribute of the page that allows editing the content through the designMode attribute, which takes two values: “on” or “off”.

Eventually

It is assumed that the specifications will reach the status of the W3C Candidate Recommendation in 2012, but this does not mean that you will have to wait so long to start using some new HTML 5 stuff. Most modern browsers, for example, already have an implementation of the <canvas> element (in Mozilla Firefox, in which it is partially implemented from version 1.5 ).

HTML 5 will redefine how web developers create content markup. This version will offer a better way to describe the content displayed on a web page, allow using more complex types of content, improve support for media and web applications, and increase the interoperability of HTML documents.

Keep in mind that these things are still under development and are subject to change, many of these improvements may be revised for several years or not be implemented at all.

Other sources of information

• You can read the latest working draft of the HTML 5 specifications on the W3C website;
• Learn more about the major differences between HTML 4 and HTML 5 on the W3C website;
• IBM developerWorks has a great and in-depth article on the core elements of HTML 5 ;
• Read about the people who are involved in the development of HTML 5 specifications on the W3C HTML Working Group website ;
• Find out what you can do to help develop HTML 5 on the WHATWG wiki site.

about the author

Jacob Gube is a web developer, designer and author of Six Revisions , a blog about development and design. If you want to contact him, you can find him on Twitter .