HTML5 and Dreamweaver CS5 in the world of web design
We will be working with a few key acronyms in this book and they stand for things, which are essential to creating innovative websites. So, let's start with introductions:
- HTML5 is the latest and most powerful version of the HTML (HyperText Markup Language). It is the newest and the most powerful language for creating the basic elements of a web page.
- CSS3 is the latest and the most powerful version of CSS (Cascading Style Sheets—or Style Sheets for short). CSS handles how web pages and elements on them look.
- Dreamweaver CS5 is the most widely used, powerful, and flexible tool for creating the web page content, including HTML5 and CSS3. Thus, the basic flow of this book will be exploring the key powerful features of HTML5 and CSS3 and generating those features using Dreamweaver CS5.
Note
Limited CS4 and CS3 functionality: Some, but not all of the features explored in this book are available in older versions of Dreamweaver with the HTML5 Pack installed. In general, you can follow the same steps indicated here for Dreamweaver CS3 and CS4 and take advantage of those elements of the HTML5 Pack supported by older versions of Dreamweaver.
I like to describe HTML5 concisely as solving the 3s: simplifying, standardizing, and styling. Those terms don't embrace everything new in HTML5, but they highlight key new features and help break down what HTML5 is all about into digestible chunks.
HTML5 simplifies the web design by taking frequently used features, such as the page layout elements we will explore in this chapter, and defining elements (previously known as tags) for them. Therefore, for example, instead of every page designer needing to invent a special batch of code to define a page header—a common element in many web pages—HTML5 has added a standard, pre-set <header> element.
HTML5 is an attempt to standardize how browsers interpret the page layout code. Now, an obvious question is, who sets the standards and how standard are they? The answer in this case is complex, contradictory, and a work in progress. However, suffice to say that an alignment of the most powerful players on the Web, in particular the makers of all the major browsers (Safari, Firefox, Chrome, Opera, and Internet Explorer starting with version 9) have all embraced HTML5, to the point that a critical mass is either now in place, or emerging quickly. That said, it would be a long time before everyone browsing the Web is doing so in an HTML5-compliant browser. Therefore, in the course of this book, we will explore approaches for providing alternative content for visitors using non-HTML5 browsers.
HTML5 also expands what can be done in web design style, without resorting to plugins (such as JavaScript or Flash). Many of these additional features are accessed through CSS3—the latest version of Style Sheet formatting that is an enabling, co-dependent partner (in a good way!) with HTML5.
HTML5 was preceded by XHTML, and before that, HTML 4 (in various versions). In some ways, HTML5 is not a continuation on that evolutionary line, but a new synthesis that stands on both HTML and XHTML.
There is no great need here to clutter our heads with the ways in which HTML5 addresses non-standardization in different previous versions of HTML and browsing environments, but such housekeeping and standardization is a significant contribution of HTML5.
The new features in HTML5 (and the related features in CSS3) are of more interest for designers.
HTML5's <video> and <audio> elements
provide a much simplified approach to presenting the online video and audio, without resorting to different and competing media players (such as Windows Media Player, QuickTime player, or Flash Player). The new canvas elements open the door to an exciting array of possibilities for presenting images, interactivity, and media.
Moreover, as we will focus on in this chapter, HTML5 introduces a set of elements that standardize and simplify the page layout.
As HTML5 is new, and emerging, designers obviously want to know whether elements they create using it (such as video, or page design elements) are supported in different browsers.
The answer is more complicated than you might think. Different HTML5 elements are supported in different browsing environments and in different ways. For example, many (but not all) browsers support HTML5's new VIDEO element, but within that grouping of browsers, there is support for different video formats.
In other cases, older browsers support the HTML5 elements, but some of the features don't work. In general, these elements still work in older browsers and visitors simply forego nice but non-essential features. For example, an HTML5 e-mail will be easier to fill out in an HTML5-complaint browser, but will still work as a plain text field in older browsers.
This might sound like a messy situation. In some ways it is. However, as I say in almost every session of my live web design classes, "welcome to the experience." Compatibility issues with HTML5 are, however, an eminently manageable challenge that we will address from different angles and with different problems in mind throughout this book.
Each time we introduce HTML5 elements, we will also look at how to provide alternatives for visitors viewing the page in a browser that does not support HTML5.
Sometimes, the HTML5 features not supported in non-complaint browsers limit available features, but do not cause harm. For example, the following screenshot illustrates the PLACEHOLDER attribute in HTML5 that displays a "hint" text in a form field that vanishes when a visitor begins typing in that field.
HTML5 allows a placeholder text, in this case, Enter search text here:
In the case of HTML5's placeholder attribute, when this is not supported in a browser, the form field simply appears without the placeholder text, as shown in the following screenshot.
Viewed in a non-complaint browser, the HTML placeholder text simply disappears, but the form still works:
In some situations, we will address compatibility issues exploring, on the spot, and creating an alternative content for older browsers. We will also explore more radical approaches to provide alternative formatting for different browsers using techniques such as Media Queries (see Chapter 5, Defining and Implementing Multiscreen Previews and Media Queries) to provide alternate page layouts for different browsers.
However, the bottom line is, in one way or another, we will take into account and build into the process by providing alternative content for non-HTML5 environments.