Dreamweaver's HTML5 Pack and design elements

Now that we have introduced the key design elements of HTML5, we are almost ready to generate pages that use those elements in Dreamweaver. Before we do, however, it will be helpful to preview briefly, conceptually, how Dreamweaver generates HTML5 layouts.

The first thing to emphasize is that HTML5 elements such as <header>, <footer>, <article>, <section>, <aside>, and <nav>, do not really do much if anything "on their own." Like their DIV tag evolutionary precursors, they are more or less empty vessels. HTML5 elements take shape, literally, when connected with CSS styles.

For example, a web page might have a <header> defined as stretching the entire width of the page, at the top of the page, with a set background color, and spacing that keeps it from bumping into other page elements. All of these attributes (size, location, background color, and spacing) are defined in a CSS style sheet that includes a specific CSS style associated with the <header> element. Moreover, this symbiotic relationship between HTML5 layout elements and CSS styles is required for each HTML5 layout element.

Therefore, when Dreamweaver generates page layouts using HTML5 elements, it also generates a CSS file that has already built-in style rules for all the HTML5 elements used in the page.

Of course, you can change how HTML5 elements appear. You can edit the generic content that Dreamweaver provides with the HTML5 layouts. Alternatively, you can change the appearance of the HTML5 elements by editing the CSS styles. We will do both of these things in the next chapter of this book. Here and now, we will focus on setting up Dreamweaver so that it can generate HTML5 pages and then we will actually create those pages.

With the basic understanding of HTML5 layout elements and the way they interact with CSS under our belts, the time has come to launch into Dreamweaver and begin to create HTML5 layouts.