HTML5 and CSS3 For Dummies

Chapter 1

Structure and Design with HTML5 and CSS3

In This Chapter

• Essential new elements of HTML5

• Dynamic new design options with CSS3

• A crash course in structuring web page content with HTML

• An introduction to contemporary CSS styling techniques

In this chapter, I pull back the lens and survey the scope and range of new web design tools provided by HTML5 and CSS3. In the remainder of this book, I’ll dive deeply into specific features of both HTML5 and CSS3. But here at the beginning, it will be valuable to step back from the trees to appreciate the forest.

HTML5 is a breakthrough in structuring web page content. There are all kinds of cool new features, ranging from pop-up calendars that go with input forms (see Figure 1-1) to native video that doesn't require plugins. But the big picture is a cleaner, more logical way to organize and present content. This cleaner way to organize content is concentrated in many ways in the new semantic page elements like <article>, <header>, and <footer>. Similarly, CSS3 provides a dynamic and fun set of new styling tools — like gradient backgrounds and irregularly shaped boxes. But the sum of CSS3 is greater than the parts. CSS3 expands and stretches what designers can do with web pages in a qualitative way.

In this chapter, I give you a sweeping, bird’s-eye view of HTML5 and CSS3, in part by comparing and contrasting how pages were built in the pre-HTML5/CSS3 era, and how they can and should built now. So, buckle up your seat belts and let’s start on our journey.

Figure 1-1

Realizing the Magic of HTML5 and CSS3

HTML5 and CSS3 open the door to designing really exciting, vibrant, and dynamic web pages. In different ways throughout this book, I will contrast new elements in HTML5 and new styling tools in CSS3 with previous versions of HTML and CSS. Here, in a compressed way, I want to quickly identify what these new features are.

Earlier versions of HTML had no systematic, universally applied set of elements for basic page content — like articles, sections, asides, and so on. HTML5 introduces a rational way to structure page content with semantic tags (see Figure 1-2), which describe the nature of content that they contain.

Figure 1-2

Until the advent of HTML5, plugins (like Windows Media Player or QuickTime Player) were necessary to present video. HTML5 approaches audio and video in a whole new way, freed of plugins. And HTML5 provides form-field prompting and validation (testing), as shown in Figure 1-3.

Figure 1-3

CSS3 hands designers a toolbox filled with tools that makes it easy to rotate, skew, scale, and overlap page elements. Web designers can now apply rounded corners to content — even turning squares into circles.

In addition, CSS3 effects make rich graphical content available without graphics. You can, for example, easily define highly complex gradient blend backgrounds (see Figure 1-4) without requiring users to download any image file.

Figure 1-4

And I’m just scratching the surface here. By combining these different features, web designers can blaze new trails in creating websites that people will enjoy spending time visiting.

Not all new . . . but different

In two ways, all the exciting and dynamic design options made possible with HTML5 and CSS3 aren’t exactly new.

First, almost all the features I rave about in the previous section have been available to web designers for some time. However, using them required complicated tools and/or high-level programming skills. In addition, they placed demands on computer and mobile resources that are no longer acceptable — particularly in an era when mobile viewing is such a critical dimension of reaching an audience. Here are a few examples to make the point(s):

Video: Video has always been available (see Figure 1-5), but — as noted earlier — it required plugins like Windows Media Player, QuickTime Player, or Flash Player. These video players had to be updated regularly, they didn’t support each other’s formats (at least not without configuration), and they created an unpredictable viewing experience. With HTML5, users don’t need to install (or update) any media player plugins; all the software needed to view videos (or listen to audio) is built into browsers and accessed directly with HTML5 code.

Figure 1-5

Interactivity and animation: Interactivity and animation (see Figure 1-6) have always been available, but they often required complex programming in Flash or JavaScript. Although HTML5 and CSS3 don’t fully replicate the feature sets of Flash and JavaScript animation, they do make much of that feature set available at a far lower cost in terms of software, Flash or JavaScript coding skills on the part of designers, and download time for users.

Figure 1-6

Rich graphical backgrounds: Rich graphical backgrounds have, until the advent of CSS3, been created by designing gradient artwork in programs like Adobe Illustrator and then saving them as web-accessible images that tile (repeat) in the background of a design element (like a layout box). With CSS3, these backgrounds (see Figure 1-7) can now be defined without any image files at all.

Forms: Complex forms have required JavaScript, or server-side scripts, written in programs like Ruby or PHP. HTML5 provides prompts (see Figure 1-8) and validation tests without any scripting.

Figure 1-7

Figure 1-8

My point here isn’t to review the whole range of exciting new features I explore in this book, but rather to give examples of how HTML5 and CSS3 build on the history of web design. HTML5 and CSS3 make many features radically more accessible to designers — without having to resort to third-party products and plugins, as well as reducing download time for pages.

Use a Code Editor!

Warning: Do not build HTML or CSS pages in a text editor. Doing so corrupts any code you create. For example, most text editors convert standard quotes (") into smart quotes (" ").

Plenty of very good free code editors are available. If you already have one, use it. If you don’t already have a code editor, here are my recommendations. They aren’t the most sophisticated code editors, but they’re free, and easy to set up and work with:

• Windows: Notepad++, http://notepad-plus-plus.org).

• Mac: TextWrangler, www.barebones.com/products/textwrangler)

If you’re comfortable working in another dedicated coding environment — say, Komodo Edit, Adobe Dreamweaver, Aptana Studio, or any other code editor — use that.

Second, HTML5 and CSS3 build on (and qualitatively augment) previous versions of HTML and CSS:

Simplification: In some areas, new features in HTML5 and CSS3 replace older (which is a nice way of saying “clumsy, slower, problematic, and less-flexible”) techniques. For example, HTML5 simplifies audio and video embedding. (For more on using HTML5 to embed audio and video, see Chapter 7.) And with CSS3, you can easily rotate, rescale, move, or skew boxes of content without the need for positioned background images.

New features: In other areas, new HTML5 and CSS3 open up completely new options. For example, HTML5 mobile tools facilitate app-like, highly mobile-friendly pages. And CSS3 effects provide options for defining transparency (allowing elements to “show through” elements above them) far more powerfully than the opacity tools in earlier CSS.

HTML5: Building on HTML techniques

I can’t emphasize this enough: HTML5 and CSS3 build on, and are extensions of, the most developed and current techniques for using HTML and CSS. Why am I so fixated on this? Because current techniques for HTML and CSS design are the launching pad from which you deploy HTML5 and CSS3.

HTML has evolved. The reason why this is important isn’t to belabor history, but rather to understand why you build pages in a certain way — and why you don’t build them in ways that don’t provide a solid-enough foundation to present page content in an engaging way that meets the standards of today’s demanding website visitor.

Do Old Browsers Support HTML5?

With the exception of Internet Explorer (IE), all browsers prompt users to update frequently, so when I talk about “old browsers” I mean old versions of Internet Explorer that are installed in large corporate or institutional environments that, for reasons internal to the security and networking environments, can’t be updated. All other browsers (Firefox, Chrome, Safari, Opera, and so on, in their laptop/desktop and mobile versions) essentially update automatically.

But there is, and will continue to be, a substantial installed user base for old versions of Internet Explorer. What about that community? When someone asks, “Will my old version of IE support HTML5 and CSS?,” the short (and accurate)...