Introduction

Unless you have been off on a digital-free holiday, you've heard a lot of chatter about HTML5. As a web professional, it is apparent that having an understanding of HTML5 is not only beneficial—it's essential. The future of the Web has radically changed course in the last few years from XHTML to HTML5, which means there are new concepts to learn but also outdated coding practices to unlearn.

At times HTML5 can seem enigmatic and ambiguous in what it encompasses, and threshing out a definition for HTML5 can lead you in many directions. This book will comprehensively cover the state of HTML5 and give you a solid foundation in the technologies it covers. Fundamental concepts are briefly covered before diving into specifics, with an emphasis on gaining a solid grounding in HTML. There are many new elements and attributes to cover, in areas such as web forms, multimedia, and improved website semantics. There are also a handful of elements and attributes that are now obsolete, which as a professional web developer you will absolutely never use ever again (right?). The correct usage of the current HTML elements, new and old, is shown in clear easy-to-follow summaries. CSS and JavaScript are the next topics on the table, and both are discussed and explored through their relationship with HTML.

Also, in order to give you the theories and practical knowledge that will take your web practice higher, related foundational topics, such as digital color, media formats, responsive design, and even trigonometry, will be covered as relevant to HTML5.

While HTML5 will be molded for years to come, you will find that it has laid the foundation for many next-generation web applications to be built today—web applications that might just be built by you!

Who is this book for?

HTML5 Mastery is aimed toward anyone with a working familiarity with HTML, CSS, and JavaScript, who is interested in gaining a deeper understanding of the specifications that define these languages. The HTML5 specification is very large. Approaching it through the pages of this book will quickly get you up-to-speed and serve as a launching board to take your HTML knowledge to new heights.

HTML, CSS, and JavaScript may feel familiar and easy to you, but you are sure to find hidden gems that will surprise you. Learning about these subtleties will go a long way toward making you a master of HTML5. You will walk away equipped with foundational knowledge and the wherewithal to seek out higher-level concepts in order to follow the trends of modern web development.

How is this book structured?

This book begins with a discussion of the surprisingly convoluted history that led to HTML5 becoming today's hottest web development trend. For those newer to HTML, fundamental terminology is covered before running through the highlights of HTML5 and what's changed since HTML 4.01. After this high-level view of the state of HTML5, subsequent chapters dive deeper into specific areas of interest, providing a comprehensive overview of the HTML elements and related technologies.

The first third of the book will give you a solid grounding in what is available to you in HTML5 and help you organize and build better web pages for today's Internet. In Chapter 2 you will learn about the global attributes present on all elements and the new content model categories of HTML5 that organize each HTML element into a set of overlapping groups. The elements are then explored in-depth across the next two chapters. Special attention is given to semantically structuring your pages. After gaining a broad understanding of all the elements in HTML, the second third of the book will dive deeper into the elements of web forms, followed by the elements for embedding multimedia into your web pages.

The last third of the book goes into concepts that are used closely with HTML but are separate from the HTML elements used to structure a page. Beginning in Chapter 6, HTML's relationship with CSS3 is discussed. Fundamental CSS concepts are also shown, and examples of key new features of CSS3 styling are demonstrated. Next, concepts from the HTML5 JavaScript APIs are introduced. A small template for exploring JavaScript within the web browser is constructed and demonstrated through specific practical examples. The book finishes up with the road ahead into web development for mobile devices and ends with a summary of upcoming and evolving HTML5 technologies and, lastly, coverage of technologies that aren't part of HTML5 but are commonly used and associated with it (such as the Geolocation API).

This book can be read from cover to cover or kept by your computer as a reference for particular elements and concepts. To get the most out of this book, I recommend you follow the wisdom of the (WHATWG) HTML specification, which, when talking about how a document should be read to get the most out of it, puts it this way:

“[It] should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references”

Lastly, the book has an accompany website at http://html5mastery.com where you can find related information and links.

Conventions used in this book

This book uses a couple of conventions that are worth noting:

• Unless otherwise noted, HTML5 and HTML refer the most recent implementation of the HTML language.
• Modern browsers are considered to be Google Chrome 11 or newer, Mozilla Firefox 4 or newer, Safari 5 or newer, Opera 11 or newer, and Microsoft Internet Explorer 9 or newer.
• Individual HTML elements may be referred to with and without “element,” for instance, pre and pre element, both refer to the HTML <pre>.
• Unless shown or implied, it is assumed that all the HTML examples in this book are nested in the body of a valid HTML5 document.
• Unless otherwise shown, any CSS and JavaScript code is assumed to be within an external style sheet and external script file, respectively.
• Code snippets that are contained in a larger piece of code may include the ellipsis character (...), which is used to denote that there is code not shown that continues before and/or after a particular code snippet. Here's an example:
  ...
<body>
          <p>The head area and the rest of the body aren't shown, but they should be
there if you wrote this code yourself.</p>
...
• Lastly, it should be noted that the JavaScript examples shown have variables and functions that are created in a global scope for the sake of brevity and clarity. This likely will be fine for most uses, but in a truly professional best practice environment, the scope of a particular set of JavaScript variables and functions would likely be placed inside a custom object to prevent naming conflicts between different scripts running on the same page.

  With the formalities out of the way, let's begin this road to HTML5 mastery.