HTML and CSS Reference
In-Depth Information
HTML5
ELEMENTS
FIGURE 2.2
A simple
HTML5 video example
(see simple-video.html in
the chapter2 folder).
Let's look at the HTML5 elements you'll be using in this topic, plus a few more for
good measure. An exhaustive treatment of HTML5 features is beyond the scope of
this topic because you'll be working with CSS3 styling, so most of the HTML5 APIs
are pretty much irrelevant in this context. Yes, you could build a fully functional
UI inside an HTML5
<canvas>
element, but you won't be able to style it with CSS,
and you'd be committing most of the same accessibility, usability, and SEO crimes
that Flash developers used to when building full Flash websites and the like. So,
don't even think about it!
In addition, most of the new elements you'll look at are pretty self-explanatory,
and I know you are a clever bunch. All of the elements described in this section
are supported across all modern browsers with the exception of the Form elements,
which have been a bit slower to catch on.
NOTE:
If you want a deeper treatment of HTML5, look no further than
Bruce Lawson and Remy Sharp's excellent book,
Introducing HTML5,
2nd
Edition (New Riders, 2011). For free tutorials, check out the Opera developer
community at
http://dev.opera.com
or the fantastic
http://html5doctor.com.
<AUDIO> AND <VIDEO>
Two of the most important new elements in HTML5 are
<audio>
and
<video>
.
These respectively allow you to add audio and video content to your sites as easily
as you'd add images using
<img>
. Both elements are pretty self-explanatory. Here
is a
<video>
example (
Figure 2.2
):
