COM271, Week 12
HTML5
Syllabus | Table of Pages | Assignments | References and Useful Links
Students interested in keeping abreast of new developments on the web should consult the W3C HTML5 tutorial pages (directory at left). Alternatively, the concise HTML5 for Web Designers, by Jeremy Keith (A Book Apart, 2010, 87p.) provides a substantive introduction with examples.
HTML5 (note: no space between HTML and 5) is a recommendation as of 2012. It is a hybrid, the product of two initially separate working groups, now working together.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
Rather than continue in a direction marked by XHTML, HTML5 is a distinctive new way of addressing the future of the web. The W3C/WHATWG collaboration now addresses both web developers and browser makers. To web developers, the message is largely "here are some new things that we want you to consider using, and some old ones that we want you to stop using." To browser makers, the message is a bit more schizophrenic, "We don't want anyone to use these old elements or attributes, but when they do this is how they should be rendered."
Perhaps the most illustrative element is the new DOCTYPE:
That's it. Gone are the references back to the W3C, the specification of a particular DTD, etc.
Why? Because HTML5 will include all previous elements and attributes (including the ones nobody should be using anymore), all previous versions of HTML (e.g., HTML 4.01) are covered in the new recommendation. So why worry about version anymore? Are you liking this approach yet? Well, at least it's moving toward being a lot simpler to write code!
What else?
HTML5—New Features
Some of the most interesting new features in HTML5:
- The <canvas> element for 2D drawing
- The <video> and <audio> elements for media playback
- Support for local storage
- New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
- New form controls, like calendar, date, time, email, url, search
Browser Support for HTML5
HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
Global attributes
In addition to class, id, style, and title attributes, there is an expanded set of attributes that may be used with any html5 element, including contenteditable, draggable, and spellcheck attributes. (www.w3schools.com/html5/html5_ref_globalattributes.asp)
Tags You're Going to Like (Most are supported in most browsers now)
A few of the newer html5 tags include the following:
<address> This tag defines the contact information for the author/owner of a document or an article. (www.w3schools.com/html5/tag_address.asp)
<article>
Definition and Usage
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the
- Forum post
- Blog post
- News story
- Comment
<code> This tag defines a string of computer code.
<footer> This tag defines a footer for a document or section.
<nav> This element marks a navigation section (i.e., use it instead of <div id="nav">. (www.w3schools.com/html5/tag_nav.asp)
Form Inputs You Probably Should Wait For (Most are not supported yet)
Check the form inputs page (left) and you'll discover that several new form elements are not ready for use yet. Check back later!
Among those to watch for:
- <input placeholder="Temporary text" />.... A new way to put it some greyed out temporary text.
- required (attribute). Not yet widely available, but when it does, your form can't be submitted without entering something here.
- datalist (element). An alternative to <select>, this one will let you type in a value instead of being limited to the options of the select list. This is like a hybrid between a select menu and an extra text box for "other" choices.
- new input types:
- search would allow the browser to display text differently if you are using it for a search term.
- slider will build a nifty slider bar. Is this ready?
In this browser? Yes? No? Well, not in Firefox in April 2013. That's why we need to temper our enthusiasm....