HTML 5 is the upcoming major revision of the HyperText Markup Language (HTML), the main method of marking up content for sharing on the World Wide Web. HTML’s development stopped at HTML 4.01 in 1999, and since then web content has evolved so much that current HTML specifications are inadequate for today’s requirements.
HTML 5 aims to improve HTML’s interoperability and address the growing demand for more diverse and complex web content. It also addresses HTML 4’s lacking features for web applications. In this post, we’ll look at 5 exciting new features in HTML 5.
This is a guest post by Jacob Gube, a web developer/designer and author of Six Revisions, a blog on web development and design.
A bit of history
The conceptual thinking for HTML 5 began in late 2003. The World Wide Web Consortium (W3C), the organization that oversees the web’s standard protocols and guidelines, expressed interest in the HTML 5 draft originally developed by the Web Hypertext Application Technology Working Group (WHATWG), a group formed in 2004 consisting of representatives of Apple, the Mozilla Foundation, and Opera Software. As a result, the W3C HTML Working Group was formed in 2007 to develop the specifications of HTML 5.
Development is underway, and HTML 5 is anticipated to reach W3C Candidate Recommendation status in 2012, though many modern browsers already have partial support for HTML 5 specifications.
Exciting new features
1. New HTML elements that improve our ability to describe content
HTML’s primary task is to describe the structure of a web page. For example, by enclosing text between <p></p> elements, HTML tells the browser that the text between those elements is a paragraph.
Increasingly, diverse web content has outgrown HTML 4’s ability to accurately describe the content of a web page. Streaming video and audio is now commonplace. Website regions such as navigation menus and branding areas (commonly located in the header) are now staples of most web pages. More importantly, advancements in JavaScript, Flash, and server-side technologies have allowed for the proliferation of rich Internet applications (responsive, user-driven, browser-based applications), despite current HTML specifications.
By adding more HTML elements, HTML 5 aims to give developers a better and more precise way of describing data.
For example, under current HTML specifications, this is how we would describe the structure of a typical web page:
The problem with this layout is that, to the browser, everything is a <div> element. The browser treats everything inside the <div> elements equally because it can’t tell the difference between them, and “classes” and “ids,” such as content, sidebar, and footer, change from website to website.
In HTML 5, this is how you might describe the layout of the same web page:
In this markup, the browser now knows what each part is. It knows that the web page’s main content is inside the <article> element, that the website’s navigation is inside the <nav> element, and so on.
Besides prettier-looking and more semantic markup, the practical implications are endless. It increases our markup’s interoperability. For example, an external system, such as a search engine spider, would be able to more accurately determine what content on a web page is important. It can skip crawling the <nav> element and the <footer> element because they probably do not contain the main content of the web page. A well-formed HTML 5 document would therefore give search engines a better understanding of the content being displayed.
A crafty developer could create an application that pulls out just the <article> section of a group of websites, say, to aggregate it in a database, or generate a list of all the videos on a web page by finding all the <video> elements.
Screen-reading software could give vision-impaired users a quicker way to traverse content sections. They could go to the <article> element directly if they wanted to read the main content of the web page, or go directly to the <nav> element if they wanted to navigate away from the page.
2. Improved web forms handling
These days, it’s hard not to come across forms on websites. You encounter them when submitting a comment on a blog, registering for a user account, or sendinging mail in Gmail. HTML 5’s proposed specifications include a huge revamping, called Web Forms 2.0, of how web forms would be handled. It gives web developers a lot of options and new features for effectively and easily handling input fields and form submissions.
The most exciting thing about Web Forms 2.0 is form validation. Currently, developers are required to use JavaScript (client-side) or PHP (server-side) code to validate inputs. For example, many web forms contain required fields (perhaps for the username and email fields):
In HTML 4, the markup of the web form above would look something like:
Currently, you have to use scripting to validate a user’s submission. In this example, developers would have to write their own validation code (or use a pre-made script, such as this one) to ensure that required fields aren’t left blank by accident or that submitted email addresses are valid (usually by doing something called “regular expression” matching).
In handling this form without requiring the author to include a validation script, HTML 5 (with the current Web 2.0 specifications) would give us additional element attributes, such as required and email attributes, which automatically check that the username and email fields are not left blank and that the email address’ format is valid.
3. APIs for easier web application development
HTML 5 will introduce several application programming interfaces (APIs) to new and existing elements, aimed at improving web application development and addressing current issues with HTML 4’s lack of ability to allow developers to mark up web applications.
One API is specifically for working with audio and video and will be used with the <audio> and <video> elements. It will provide audio and video playback capabilities and eliminate the need to use third-party applications, such as Flash, to develop and display media (at least for supported media files).
Check out this scripted video controls demonstration, which accompanies this Opera Developer Community article on the video element.
4. The <canvas> element allows image scripting on the fly
Most people take in information more quickly and effectively through visuals. For example, between a table, numerical data, and a pie chart, the pie chart gives users a better feel for the scale and relationship of data (at least most of the time).
The downside of images is that they’re static. If you create a pie chart using a traditional method (for example, with an image editor like Photoshop, or a graphing application like Excel), you wouldn’t be able to adjust any data that changes without manually editing your graphics.
With the <canvas> element, you can take constantly changing (database-driven) data and apply it to a pie chart like the one above, as well as other types of 2D visuals (even a cat, if you’re so inclined), via scripting.
The canvas API also allows users to interact with <canvas> elements. For example, you can write a script that responds to users’ clicking on a particular section of the pie chart.
5. Users can edit and interact with sections of a web page
The section in the proposed HTML 5 specifications about User Interaction describes new ways of marking up interactive web pages. The contenteditable attribute (a boolean attribute to which you assign either true or false) allows you to indicate which parts of a web page users can change.
This can be useful for wiki-style websites, in which content is user-generated. Another use of the contenteditable attribute would be to create web page templates. You can allow certain regions of a web page to be open to content editing and lock other regions that shouldn’t be changed. This gives users of your website who aren’t proficient in HTML an opportunity to input content safely without affecting critical areas that should be handled by more knowledgeable users.
At the document level, you can make an entire page editable via the designMode attribute, which accepts two values: on or off.
In Sum
The proposed specifications are slated to reach W3C Candidate Recommendation status in 2012, but that doesn’t mean you have to wait that long to start using some of the new things in HTML 5. A lot of modern browsers, for example, have already implemented the <canvas> element (including Mozilla Firefox, which has partially implemented it since version 1.5).
HTML 5 will redefine how web developers mark up content. It will provide a better way to describe the content displayed on a web page, enable more complex content types, improve media and web application support, and increase the interoperability of HTML documents.
Note that things are still under heavy development and are bound to change; many of the proposed improvements may be heavily revised in the next few years or not implemented at all.
There are a lot of exciting new features in HTML 5. Share your own favorites in the comments.
Further reading
- You can read the latest working draft of HTML 5 specifications on the W3C website.
- Learn about the major differences between HTML 4 and HTML 5 on the W3C website.
- IBM developerWorks has an excellent in-depth article on new elements in HTML 5.
- Read about the people in charge of developing HTML 5 specifications on the W3C HTML Working Group website.
- Find out what you can do to help HTML 5 development on the WHATWG wiki website.
About the author
Jacob Gube is a web developer/designer and author of Six Revisions, a blog on web development and design. If you want to connect with the author, you can follow him on Twitter.
