It is often helpful, in understanding something new, to have a sense of where it came from. The evolution of different versions of HTML and accompanying versions of CSS (style sheets) has been marked in a fundamental sense by the need to create more attractive, complex, and creative page designs.
Web page design has evolved radically, but HTML in one version or another remains the foundation for web page design. HTML pages are the basic containers in which text, images, media, and animation are packaged. Moreover, HTML5 is the up-and-coming version of HTML that, as it gradually is adopted and unified across browsing environments, opens up vast opportunities for more easily creating web pages that are more inviting.
In the course of this book, we will explore how to use Dreamweaver to create page layouts, interactive elements, embedded media, and creative design with HTML5. However, we will start with one of the most basic, and substantial, new improvements in HTML5: the creation of a set of elements dedicated to the page layout. These elements ("tags" in earlier incarnations of HTML) are used to define regions of a page common to many, if not most, web page layouts.
HTML5 elements (like all HTML elements) are enclosed in "<>" characters in the HTML code. Therefore, for example, in coding books, the footer element is often written as <footer>. Even though Dreamweaver generates HTML and HTML5 code, we will use "<>" when referring to elements to make it easier to identify and work with them, once generated, in Dreamweaver.
The earliest versions of HTML did not provide for any real page design tools. Web pages were envisioned as pages to hold very basic content, with some images and text formatting, but without any real page layout.
Inventive designers forged a way to use tables—a feature originally created to present data in columns and rows—as a page design tool. Table columns were used to layout vertical blocks of content, whereas table rows were used to layout horizontal bands of content.
Tables are still available as a tool for page design and a large percentage of older websites that were built using tables still rely on tables for page design. Moreover, Dreamweaver, including Dreamweaver CS5.5, still provides tools for designing pages with tables. The following screenshot shows a web page design in Dreamweaver. The properties inspector (shown in the following figure) identifies the selected table as having three columns (merged in the top and bottom rows) and three rows.
Tables had (and have) two great limitations as page layout tools.
The first was that they were (and are) a clunky way to design pages. Creative and unique page layouts with tables required contorting what was essentially a checkerboard of squares into desired headers, footers, sidebars, navigation spaces, and so on. Placement of images and text was awkward, requiring unstandardized combinations of table, row, column, and cell attributes, mixed and matched with attributes like those that margins assigned to text and images.
The second problem was that it was nearly impossible to orchestrate the global page designs across a website. The page design was embedded in individual pages—and thus if a designer wanted to tweak the layout of dozens of pages across a website, this generally required changing each page layout, one by one.
There is a third; it is a less recognized problem with using tables as page layout tools: They are not compatible with special reader software that allows vision-impaired people to experience web pages.
The solution that emerged to these challenges was just as creative and out-of-the-box as the original invention of using tables for page layout. Designers began relying on external (separate) CSS files to control both the attributes of text and images, but also to define blocks that could be used for the page design. Designers took and expanded the vaguely defined HTML DIV tag, and used it as a page layout tool. By attaching rules (attributes) defined in the CSS file to uniquely named DIV tags, designers concocted a work-around to the lack of real page layout elements in HTML. This situation existed through all the versions of HTML and XHTML (an updated, enhanced version of HTML that preceded HTML5).
Working with these blocks was (and is) awkward. There is no uniform or standardized set of DIV tags for page design, each designer creates and defines his or her own. This means that designers working in collaborative environments, or with content created by other designers, have to create their own sets of defined DIV tags for page layout. Editing other designers' work often requires far too much unproductive time and energy decoding the unique set of DIV tags used for page layout in an inherited design.
Therefore, DIV tags provided more flexibility than tables and allowed global editing (by changing the CSS file, all DIV tags across a site are updated). However, DIV tags are not standardized and are a clumsy and unnecessarily anarchistic approach to defining page layout elements.
The following screenshot shows a page designed with DIV tags in Dreamweaver. The Properties inspector reveals a non-standard DIV tag defining the selected container on the left side of the page (sidebar1, displayed in the Class pop up):
From this set of demands and constraints, HTML5 evolved a standardized set of page layout elements. Sections of a web page such as Header, Footer, <nav> (for navigational elements), or <aside> (sidebars) come pre-named.
Like DIV tags before them, HTML5 layout elements can be updated across a website quickly and easily.
In addition, like DIV tags before them, HTML5 elements rely on CSS styles to define their location, size, and other appearance attributes (such as the background color or padding). Therefore, in the course of this, and following chapters, we'll be using Dreamweaver to orchestrate a dynamic relationship between HTML5 layout elements and CSS styles.
As alluded to in our journey thus far, HTML5 comes with pre-set elements for commonly used components of a web page design. Once we have briefly surveyed the main HTML5 layout elements, we will explore how they are generated and modified in Dreamweaver with the HTML5 Pack.
Some of these elements are more adapted to laying out particular kinds of web pages. For example, the <article> and <section> elements are particularly useful for online periodicals or other publications that have articles, with (sub)sections within them. The <aside> element defines boxes for sidebars associated with articles.
The intuitively named <header> element, as you would expect, holds the content at the top of web pages. The <footer> element holds the content at the bottom of a page.
The <nav> element is used to layout the navigational content—links to other pages or locations on the Internet.
The following diagram illustrates a typical page layout using the <header>, <nav>, <article> and <section>, <aside>, and <footer> HTML5 elements:
