HTML 5 adds a
lot of new features to the HTML specification. And what's even better, there is
already some limited browser support for these new features. If there is a
feature you're interested in, watch the WHATWG Wiki Implementations page for information on browsers that support various
parts of the specification.
HTML 5 New Doctype and Charset
The nice thing about HTML 5 is how easy it is to impelement. You
use the HTML 5 doctype, which is very simple and streamlined:
<!doctype html>
Yes, that's it. Just two words "doctype" and
"html". It can be this simple because HTML 5 is no longer part of
SGML, but is instead a markup language all on its own.
The character set for HTML 5 is streamlined as well. It uses
UTF-8 and you define it with just one meta tag:
<meta charset="UTF-8">
HTML 5 New Structure
HTML 5 recognizes that Web pages have a structure, just like
books have a structure or other XML documents. In general, Web pages have
navigation, body content, and sidebar content plus headers, footers, and other
features. And HTML 5 has created tags to support those elements of the page.
·
<section> - to define sections of pages
·
<header> - defines the header of a page
·
<footer> - defines the footer of a page
·
<nav> - defines the navigation on a page
·
<article> - defines the article or primary content on a
page
·
<aside> - defines extra content like a sidebar on a page
·
<figure> - defines images that annotate an article
HTML 5 New Inline Elements
These inline elements define some basic concepts and keep them
semantically marked up, mostly to do with time:
·
<mark> - to indicate content that is marked in some
fashion
·
<time> - to indicate content that is a time or date
·
<meter> - to indicate content that is a fraction of a
known range - such as disk usage
·
<progress> - to indicate the progress of a task towards
completion
HTML 5 New Dynamic Pages Support
HTML 5 was developed to help Web application developers, so
there are a lot of new features to make it easy to create dynamic HTML pages:
·
Context menus - HTML 5 will support the creation and use of
context menus within Web pages and applications
·
href is not required on a tag - this allows you to use the a tag
with scripts and in Web applications without needing a place to send that
anchor
·
async attribute - This is added to the script tag to tell the
browser that the script should be loaded asynchronously so that it doesn't slow
down the load and display of the rest of the page.
·
<details> - provides details about an element. This would
be like tooltips in non-Web applications.
·
<datagrid> - creates a table that is built from a database
or other dynamic source
·
<menu> - an old tag brought back and given new life
allowing you to create a menu system on your Web pages
·
<command> - defines actions that should happen when a dynamic
element is activated
HTML 5 New Form Types
HTML 5 supports all the standard form input types, but it adds a
few more:
·
datetime
·
datetime-local
·
date
·
month
·
week
·
time
·
number
·
range
·
email
·
url
HTML 5 New Elements
There are a few exciting new elements in HTML 5:
·
<canvas> - an element to give you a drawing space in
JavaScript on your Web pages. It can let you add images or graphs to tool tips
or just create dyanmic graphs on your Web pages, built on the fly.
·
<video> - add video to your Web pages with this simple
tag.
·
<audio> - add sound to your Web pages with this simple
tag.
HTML 5 Removes Some Elements
There are also some elements in HTML 4 that will no longer be
supported by HTML 5. Most are already deprecated, and so shouldn't be
surprising, but a few might be difficult:
·
acronym
·
applet
·
basefont
·
big
·
center
·
dir
·
font
·
frame
·
frameset
·
isindex
·
noframes
·
noscript
·
s
·
strike
·
tt
·
u
Are You Ready for HTML 5?
HTML 5 adds a lot of great new features to Web pages and Web design and it will be exciting when more browsers support it. Microsoft has stated that they will begin supporting at least portions of HTML 5 in IE 8. If you want to get started sooner, Opera has had the best support, with Safari close behind.
0 comments: