A Basic HTML5 Template

A Basic HTML5 Template
As you learn HTML5 and add new techniques to your toolbox, you’re likely going
to want to build yourself a blueprint, or boilerplate, from which you can begin all
your HTML5-based projects. In fact, you’ve probably already done something similar
for your existing XHTML or HTML 4.0 projects. We encourage this, and you
may also consider using one of the many online sources that provide a basic HTML5
starting point for you.1
In this project, however, we want to build our code from scratch and explain each
piece as we go along. Of course, it would be impossible for even the most fantastical
and unwieldy sample site we could dream up to include every new element or
technique, so we’ll also explain some new features that don’t fit into the project.
This way, you’ll be familiar with a wide set of options when deciding how to build
your HTML5 and CSS3 websites and web apps, so you’ll be able to use this book
as a quick reference for a number of techniques.
Let’s start simple, with a bare-bones HTML5 page:

Look closely at the above markup. If you’re making the transition to HTML5 from

XHTML or HTML 4, then you’ll immediately notice quite a few areas in which

HTML5 differs.

Markup, HTML5 Style

Markup, HTML5 Style
Now that we’ve given you a bit of a history primer, along with some compelling
reasons to learn HTML5 and start using it in your projects today, it’s time to introduce
you to the sample site that we’ll be progressively building in this book.
After we briefly cover what we’ll be building, we’ll discuss some HTML5 syntax
basics, along with some suggestions for best practice coding.We’ll follow that with
some important info on cross-browser compatibility, and the basics of page structure
in HTML5. Lastly, we’ll introduce some specific HTML5 elements and see how
they’ll fit into our layout.
So let’s get into it!

Introducing The HTML5 Herald
For the purpose of this book, we’ve put together a sample website project that we’ll
be building from scratch.
The website is already built—check it out now at http://thehtml5herald.com/. It’s
an old-time newspaper-style website called The HTML5 Herald. The home page ofthe site contains some media in the form of video, images, articles, and advertisements.
There’s also another page comprising a registration form.
Go ahead and view the source, and try some of the functionality if you like. As we
proceed through the book, we’ll be working through the code that went into making
the site.We’ll avoid discussing every detail of the CSS involved, as most of it should
already be familiar to you: float layouts, absolute and relative positioning, basic
font styling, and the like.We’ll primarily focus on the new HTML5 elements, along
with the APIs, plus all the new CSS3 techniques being used to add styles and interactivity
to the various elements.
While we build the site, we’ll do our best to explain the new HTML5 elements,
APIs, and CSS3 features, and we’ll try to recommend some best practices. Of course,
many of these technologies are still new and in development, so we’ll try not to be
too dogmatic about what you can and can’t do.

Why should I care about HTML5?

Why should I care about HTML5?
As mentioned, at the core of HTML5 are a number of new semantic elements, as
well as several related technologies and APIs. These additions and changes to the
language have been introduced with the goal of web pages being easier to code, use,
and access.
These new semantic elements, along with other standards like WAI-ARIA and Microdata
(which we cover in Appendix B and Appendix C respectively), help make
our documents more accessible to both humans and machines—resulting in benefits
for both accessibility and search engine optimization.
The semantic elements, in particular, have been designed with the dynamic web
in mind, with a particular focus on making pages more modular and portable.We’ll
go into more detail on this in later chapters.
Finally, the APIs associated with HTML5 help improve on a number of techniques
that web developers have been using for years. Many common tasks are now simplified,
putting more power in developers’ hands. Furthermore, the introduction of
HTML5-based audio and video means there will be less dependence on third-party
software and plugins when publishing rich media content on the Web.
Overall, there is good reason to start looking into HTML5’s new features and APIs,
and we’ll discuss more of those reasons as we go through this book.

What is HTML5?

What is HTML5?

What we understand today as HTML5 has had a relatively turbulent history. You

probably already know that HTML is the predominant markup language used to

describe content, or data, on the World Wide Web. HTML5 is the latest iteration of

that markup language, and includes new features, improvements to existing features,

and scripting-based APIs.

That said, HTML5 is not a reformulation of previous versions of the language—it

includes all valid elements from both HTML4 and XHTML 1.0. Furthermore, it’s

been designed with some primary principles in mind to ensure it works on just

 about every platform, is compatible with older browsers, and handles errors gracefully.

A summary of the design principles that guided the creation of HTML5 can

be found on the W3C’s HTML Design Principles page1.

First and foremost, HTML5 includes redefinitions of existing markup elements, and

new elements that allow web designers to be more expressive in the semantics of

their markup. Why litter your page with divs when you can have articles, sections,

headers, footers, and more?

The term “HTML5” has additionally been used to refer to a number of other new

technologies and APIs. Some of these include drawing with the <canvas> element,

offline storage, the new <video> and <audio> elements, drag-and-drop functionality,

Microdata, embedded fonts, and others. In this book, we’ll be covering a number

of those technologies, and more.

It should also be noted that some of the technologies that were once part of HTML5

have been separated from the specification, so technically, they no longer fall under

the “HTML5” umbrella. Certain other technologies were never part of HTML5, yet

have at times been lumped in under the same label. This has instigated the use

 ofbroad, all-encompassing expressions such as “HTML5 and related technologies.”

Bruce Lawson even half-jokingly proposed the term “NEWT” (New Exciting Web

Technologies)2 as an alternative.

However, in the interest of brevity—and also at the risk of inciting heated arguments—

we’ll generally refer to these technologies collectively as “HTML5.”

How did we get here?

The web design industry has evolved in a relatively short time period. Twelve years

ago, a website that included images and an eye-catching design was considered

“top of the line” in terms of web content.

Now, the landscape is quite different. Simple, performance-driven, Ajax-based web

apps that rely on client-side scripting for critical functionality are becoming more

and more common.Websites today often resemble standalone software applications,

and an increasing number of developers are viewing them as such.

Along the way, web markup evolved. HTML4 eventually gave way to XHTML,

which is really just HTML 4 with strict XML-style syntax. Currently, both HTML 4

and XHTML are in general use, but HTML5 is gaining headway.

HTML5 originally began as two different specifications: Web Forms 2.0 and Web

Apps 1.0. Both were a result of the changed web landscape, and the need for faster,

more efficient, maintainable web applications. Forms and app-like functionality

are at the heart of web apps, so this was the natural direction for the HTML5 spec

to take. Eventually, the two specs were merged to form what we now call HTML5.

During the time that HTML5 was in development, so was XHTML 2.0. That project

has since been abandoned to allow focus on HTML5.

Would the real HTML5 spec please stand up?

Because the HTML5 specification is being developed by two different bodies (the

WHATWG and the W3C), there are two different versions of the spec. The W3C (or

World Wide Web Consortium) you’re probably familiar with: it’s the organization

that maintains the original HTML and CSS specifications, as well as a host of 

otherweb-related standards, such as SVG (scalable vector graphics) and WCAG (web

content accessibility guidelines.)

The WHATWG (aka the Web Hypertext Application Technology Working Group),

on the other hand, might be new to you. It was formed by a group of people from

Apple, Mozilla, and Opera after a 2004 W3C meeting left them disheartened. They

felt that the W3C was ignoring the needs of browser makers and users by focusing

on XHTML 2.0, instead of working on a backwards-compatible HTML standard. So

they went off on their own and developed theWeb Apps andWeb Forms specifications

discussed above, which were then merged into a spec they called HTML5. On

seeing this, the W3C eventually gave in and created its own HTML5 specification

based on the WHATWG’s spec.

This can seem a little confusing. Yes, there are some politics behind the scenes that

we, as designers and developers, have no control over. But should it worry us that

there are two versions of the spec? In short, no.

The WHATWG’s version of the specification can be found at

http://www.whatwg.org/html/, and has recently been renamed “HTML” (dropping

the “5”). It’s now called a “living standard,” meaning that it will be in constant development

and will no longer be referred to using incrementing version numbers.3

TheWHATWGversion contains information covering HTML-only features, including

what’s new in HTML5. Additionally, there are separate specifications being developed

by the WHATWG that cover the related technologies. These specifications

include Microdata, Canvas 2D Context, Web Workers, Web Storage, and others.4

The W3C’s version of the spec can be found at http://dev.w3.org/html5/spec/, and

the separate specifications for the other technologies can be accessed through

http://dev.w3.org/html5/.

So what’s the difference between the W3C spec and that of WHATWG? Briefly, the

WHATWG version is a little more informal and experimental (and, some might argue,

more forward-thinking). But overall, they’re very similar, so either one can be used

as a basis for studying new HTML5 elements and related technologies.