The perfect introduction to the latest generation of web development technologies. You'll master the semantic markup available in HTML5, and discover how to use CSS3 to create amazing-looking websites without resorting to complex workarounds.

HTML5 & CSS3 for the Real World: 2nd Edition

Preface

This chapter gives a basic overview of how the web development industry has evolved and why HTML5 and CSS3 are so important to modern websites and web apps. It will show how using these technologies will be invaluable to your career as a web professional.

Introducing HTML5 and CSS3

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.

Markup, HTML5 Style

Our sample site is coming along nicely. We’ve given it some basic structure, along the way learning more about marking up content using HTML5’s new elements.

More HTML5 Semantics

We’ve coded most of the page, and you now know almost all of what there is to know about new HTML5 elements and their semantics. But before we start work on the look of the site—which we do in Chapter 7—we’ll take a quick detour away from The HTML5 Herald ’s front page to look at the sign-up page. This will illustrate what HTML5 has to offer in terms of web forms.

HTML5 Forms

No book on HTML5 would be complete without an examination of the new video and audio elements. These groundbreaking new elements have already been utilized on the Web, and more developers and content creators are starting to incorporate them into their projects in place of technologies such as Flash and Silverlight.

HTML5 Video and Audio

The content layer is done. Now it’s time to make it pretty. The next four chapters focus on presentation. In this one, we’ll start by covering some basics: we’ll first do a quick overview of CSS selectors, and see what’s been added to our arsenal in CSS3. Then, we’ll take a look at a few new ways of specifying colors. We’ll dive into rounded corners, drop shadows, and text shadows—tips and tricks enabling us to style pages without having to make dozens of rounded-corner and text images to match our designs.

Introducing CSS3

In Chapter 6, we learned a few ways to add decorative styling features—such as shadows and rounded corners—to our pages without the use of additional markup or images. The next most common feature frequently added to websites that used to require images is gradients. CSS3 provides us with the ability to include multiple background images on any element including multiple radial and linear gradients that we can make the browser create for us. With CSS3, there’s no need to create the multitudes of JPEGs of years past, or add nonsemantic hooks to our markup.

CSS3 Gradients and Multiple Backgrounds

Our page is fairly static. Actually, it’s completely static. In Chapter 4 we learned a little about how to alter a form’s appearance based on its state with the :invalid and :valid pseudo-classes. But what about really moving things around? What about changing the appearance of elements, such as rotating or skewing them?

CSS3 Transforms and Transitions

We’ve added quite a lot of decoration to The HTML5 Herald , but we’re still missing some key components to give it that old-fashioned feel. To look like a real newspaper, the text of the articles should be laid out in narrow columns, and we should use some suitably appropriate fonts.

Embedded Fonts and Multicolumn Layouts

At this point, we’ve added a number of CSS3 enhancements to The HTML5 Herald . Along the way, we’ve filled in some knowledge gaps by presenting aspects of CSS3 that were outside the scope of our sample site. So it’s fitting that we should introduce two other CSS3 features that have received much attention among designers targeting audiences on various devices and screen sizes: flexbox and media queries.

Flexbox and Media Queries

Much of what is loosely considered to be a part of HTML5 isn’t, strictly speaking, HTML at all—it’s a set of additional APIs that provide a wide variety of tools to make our websites even better. We introduced the concept of an API way back in Chapter 1, but here’s a quick refresher: an API is an interface for programs. So, rather than a visual interface where a user clicks on a button to make something happen, an API gives your code a virtual “button” to press in the form of a method it calls, giving it access to a set of functionality.

Geolocation, Offline Web Apps, and Web Storage

The HTML5 Herald is becoming quite dynamic for an “ol’ timey” newspaper! We’ve added a video with the new video element, made our site available offline, added support to remember the user’s name and email address, and used geolocation to detect where our user is.

Canvas, SVG, and Drag and Drop

Modernizr is an open-source JavaScript library that enables us to test for individual features of HTML5, CSS3, and some APIs in our users’ browsers. Instead of testing solely for a particular browser and trying to make decisions based on that, Modernizr allows us to ask specific questions such as “does this browser support geolocation?” and receive a clear “yes” or “no” answer. Modernizr does this by feature detection : checking whether the browser that our user is currently utilizing supports a given feature.

Appendix A. Modernizr

In Chapter 2 and Chapter 3, we covered considerable ground explaining how our pages can become more semantic and potentially more accessible using HTML5's new semantic elements. Improved semantics alone, however, is often insufficient to make a sophisticated web application fully accessible.

Appendix B. WAI-ARIA

Microdata is another technology that’s rapidly gaining adoption and support, but, unlike WAI-ARIA, it’s technically part of HTML5. Although still early in development, it’s worth mentioning the Microdata specification here, because the technology provides a peek into what may be the future of document readability and semantics.

Community Questions