There is so much hype about HTML5 right
now and its hard to know what is currently useful, what may become useful and
what is best avoided for the time being. Here is a by-no-means-complete list of
some helpful hints and tips for developers.
The Doctype: Only use the doctype <!DOCTYPE
html> HTML5 can work without a doctype, it is now only used for current and
older browsers that require a doctype to be specified
Image Captions: You can associate a caption with an
image using the new figure element
<figure>
<img src=”pathtoimage” alt=”About image”/>
<figcaption>
<p> This is the caption under the image. </p>
</figcaption>
</figure>
<img src=”pathtoimage” alt=”About image”/>
<figcaption>
<p> This is the caption under the image. </p>
</figcaption>
</figure>
Small element: The <small> element has been redefined and now specifies print
that is small like copyright in a footer.
No types required for style and
scripts: It is no longer necessary to include types for
scripts and links as it is now implied that both tags refer to scripts and
stylesheets respectively.
Get rid of quotes: You don’t have to wrap your
attributes in quotes anymore nor do you have to close your elements… you can
still do it if you wish but things will still work if you don’t!
Make content editable: Content can be made editable with the
use of a new attribute called contenteditable.
This will allow the user to edit the text contained in the element and also the
elements children.
Email input type: Use Email input boxes. This instructs
the browser to only allow strings that conform to constructing an email
address… built in form validation! Older browsers however will revert to a text
box to accept input if they cannot render the required email field. Therefore
form validation cannot currently be depended upon and client/server validations
will still need to be in place.
Easy to use placeholders: Rid yourself of that piece of
javascript that creates a placeholder for you. HTML5 implements a placeholder
attribute. Like form validation, support is sketchy but will improve.
Client Side Storage: Get familiar with LocalStorage. This
enables persistent client side storage up to 5mb(ish). Do however take care
what you store in there, its not the safest place in the world – no session
ids, usernames etc
Content placement: Say goodbye to <div
id=”header”></div> and say hello to <header> and <footer>.
There are certain situations when you will still use <div> however, for
example… when there is no better element to use for the job. There are also
<article> and <nav> tags that can be used for positioning content.
Required form information: Forms now have a required attribute
and will not submit if the information field required is left blank
The trials and tribulations of
IE: IE’s lack of
support for features meant a little extra coding is required to make it work.
Specifying the elements to display as block is a start and then IE will ignore
these as it does not know what the elements are so we need to create each one.
header, footer, article, section,
nav, menu, hgroup{
display: block;}
document.createElement(“article”);
document.createElement(“footer)”
display: block;}
document.createElement(“article”);
document.createElement(“footer)”
To simplify
this Remy Sharp has created a great HTML5 script which needs to be included in
the head element so that IE knows about the elements before it comes to render
them. It also deals with some printing issues. This shiv is called HTML5shiv.js
and can be found here http://remysharp.com/2009/01/07/html5-enabling-script/
and can be referenced in code as
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
AutoFocus: No more need for javascript autofocus
solutions, HTML5 has an autofocus feature!
Audio & Video: No more relying on third party
plugins for audio and video rendering but support again is sketchy for now so
providing backwards compatibility is still a must. For <audio> you will
need to provide a .ogg file for firefox and a .mp3 for Webkit. IE doesn’t
support this and Opera only supports .wav. For <video> you will need to
provide both H.264 for IE and Safari and Theora or Vorbis for Firefox and
Opera. Chrome can display both the ogg and mp4 encoding formats. There are also
other video features to consider, like preloading the video and displaying
controls for the user.
RegEx: Regular expressions can now be
inserted directly into markup through the use of the <pattern> attribute.
<input type=text name=username pattern=[A-Za-z]{4-10}>
Element detection: Learn how to detect support for the
new attributes preferably using the Modernizr library
Highlighter: There is an inbuilt highlighter
called <mark> which will highlight the text wrapped in the
<mark></mark> tags
Custom attributes: The Data attribute can be used to set
custom attributes as long as the custom attribute is prefaced with ‘data’
Output: The output element can be used to
output the result of a calculation or coordinates
Value range sliders: There is a new type of input that
will allow you create a slider with a range of inputs <input
type=”range”>
What can you use right
now in your sites?
All these things
are great but what can you start using right now? Obviously code efficiency is
always a good start…
- The doctype – you can use the doctype without breaking older browsers - they will simply fall back to whatever doctype they require, this is less code for you and less for you to remember!
- Shorten your meta charset statements
- Take out types from stylesheets and scripts, remove them all, no need for them now!
- Use <header> and <footer> etc watching out for IE’s lack of rendering for semantics sake…
What is NOT HTML5?
As well as it
being important to know what is included in HTML5, it is almost as important to
know what isn’t! Although these features are used intrinsically in HTML5 they
are actually not part of the HTML5 specification
- SVG
- CSS3
- GeoLocation
- ClientStorage/ LocalStorage – this used to be HTML5 now a specification of its own
- WebSockets – also now its own specification
Article link here
No comments:
Post a Comment