An Overview of HTML5 and CSS3

HTML5 and CSS3 are more than just two new standards proposed by
the Worl d Wide We b Consortium (W3C) and its working groups. They
are the next iteration of technologies you use every day, and they’re
here to help you build better modern web applications. Before we dive
into the deep details of HTML5 and CSS3, let’s talk about some benefits
of HTML5 and CSS3, as well as some of the challenges we’ll face.

A lot of the new features of HTML center around creating a better

platform for web-based applications. From more descriptive tags and
better cross-site and cross-window communication to animations and
improved multimedia support, developers using HTML5 have a lot of
new tools to build better user experiences.

More Descriptive Markup
Each version of HTML introduces some new markup, but never before
have there been so many new additions that directly relate to describing
content. You’ll learn about elements for defining headings, footers,
navigation sections, sidebars, and articles, New Structural
Tags and Attributes. You’ll also learn about meters,
progress bars, and how custom data attributes can help you mark up
data.

Multimedia with Less Reliance on Plug-ins
You don’t need Flash or Silverlight for video, audio, and vector graphics
anymore. Although Flash-based video players are relatively simple
to use, they don’t work on Apple’s mobile devices. That’s a significant
market, so you’ll need to learn how to use non-Flash video alternatives.
, Embedding Audio and Video, you’ll see how
to use HTML5 audio and video with effective fallbacks.

Better Applications
Developers have tried all kinds of things to make richer, more interactive
applications on the We b, from ActiveX controls to Flash. HTML5
offers amazing features that, in some cases, completely eliminate the
need for third-party technologies.

Cross-Document Messaging
We b browsers prevent us from using scripts on one domain to affect
or interact with scripts on another domain. This restriction keeps end
users safe from cross-site scripting, which has been used to do all sorts
of nasty things to unsuspecting site visitors.
However, this prevents all scripts from working, even when we write
them ourselves and know we can trust the content. HTML5 includes a
workaround that is both safe and simple to implement. You’ll see how
to make this work in Talking Across Domains.

Web Sockets
HTML5 offers support for We b Sockets, which give you a persistent
connection to a server. Instead of constantly polling a back end for
progress updates, your web page can subscribe to a socket, and the
back end can push notifications to your users. We’ll play with that a bit
in Chatting with Web Sockets.

Client-Side Storage
We tend to think of HTML5 as a web technology, but with the addition of
the We b Storage and We b SQL Database APIs, we can build applications
in the browser that can persist data entirely on the client’s machine.

Better Interfaces
The user interface is such an important part of web applications, and
we jump through hoops every day to make browsers do what we want.
To style a table or round corners, we either use JavaScript libraries
or add tons of additional markup so we can apply styles. HTML5 and
CSS3 make that practice a thing of the past.

Better Forms

HTML5 promises better user interface controls. For ages, we’ve been

forced to use JavaScript and CSS to construct sliders, calendar date

pickers, and color pickers. These are all defined as real elements in

HTML5, just like drop-downs, checkboxes, and radio buttons. Creating User-Friendly Web

Forms. Although this isn’t quite ready yet for every browser,

it’s something you need to keep your eye on, especially if you develop

web-based applications. In addition to improved usability without reliance

on JavaScript libraries, there’s another benefit—improved accessibility.

Screen readers and other browsers can implement these controls

in specific ways so that they work easily for the disabled.

HTML5 promises better user interface controls. For ages, we’ve been
forced to use JavaScript and CSS to construct sliders, calendar date
pickers, and color pickers. These are all defined as real elements in
HTML5, just like drop-downs, checkboxes, and radio buttons. You’ll
learn about how to use them in Chapter 3, Creating User-Friendly Web
Forms, on page 45. Although this isn’t quite ready yet for every browser,
it’s something you need to keep your eye on, especially if you develop
web-based applications. In addition to improved usability without reliance
on JavaScript libraries, there’s another benefit—improved accessibility.
Screen readers and other browsers can implement these controls
in specific ways so that they work easily for the disabled.

Improved Accessibility
Using the new HTML5 elements in HTML5 to clearly describe our content
makes it easier for programs like screen readers to easily consume
the content. A site’s navigation, for example, is much easier to find if
you can look for the nav tag instead of a specific div or unordered list.
Footers, sidebars, and other content can be easily reordered or skipped
altogether. Parsing pages in general becomes much less painful, which
can lead to better experiences for people relying on assistive technologies.
In addition, new attributes on elements can specify the roles of
elements so that screen readers can work with them easier.

Advanced Selectors
CSS3 has selectors that let you identify odd and even rows of tables, all
selected check boxes, or even the last paragraph in a group. You can
accomplish more with less code and less markup. This also makes it
much easier to style HTML you can’t edit.

Visual Effects
Drop shadows on text and images help bring depth to a web page, and
gradients can also add dimension. CSS3 lets you add shadows and
gradients to elements without resorting to background images or extra
markup. In addition, you can use transformations to round corners or
skew and rotate elements.