Section One: Essentials of HTML, HTML5, and CSS
This book is divided into two sections. The first section covers the fundamentals of HTML5 along with the essentials of styling text and creating page layouts using XHTML/HTML and CSS.
Even if you consider yourself a skilled web professional, start with Lesson 1 in this section before jumping ahead to the second section, which starts with Lesson 6, where you’ll dive into HTML5. New web designers and developers, and those updating their skills from table-based HTML development, will want to complete Lessons 1 through 5 before moving on to Section Two in this book.
Lesson 1: Defining HTML5
In this lesson, you will discover the features and capabilities that are part of the HTML5 specification and related web technologies. You will also understand the benefits HTML5 provides to web designers, developers and end-users.
What you’ll learn in this lesson:
- • Needs fulfilled by HTML5
- • The scope of HTML5
- • An overview of HTML5 Syntax
- • An overview of HTML5 APIs and supporting technologies
Starting up
You will not need any files for this lesson.
This lesson provides a general overview of HTML5. The additional lessons include step-by-step exercises, while this lesson provides an overview and road map of what you will be discovering in the future lessons.
Defining HTML5
HTML5 is a combination of new HTML markup tags, CSS3 properties, JavaScript, and several supporting technologies related to, but technically separate from, the HTML5 specification. For this reason, we make a distinction between the HTML5 specification and the HTML5 family.
You can define the HTML5 specification as new markup elements, or syntax, used by designers to build web pages in conjunction with the tags that are currently used. Many of these new elements are familiar to designers who work with traditional HTML tags, such as <p>, <ul>, and <div>. These new tags provide better tools for developers and designers, and translate to better experiences for users.
The HTML5 family includes the new tags and technologies such as CSS3, Geolocation, Web storage, Web Workers, and Web Sockets. These technologies provide a more powerful upgrade to the toolset, and result in more useful and sophisticated web pages.
New browsers add features based on consumer expectation and as part of the natural evolution of technology. As web applications become more responsive, speedy, and able to work with complex tasks such as image editing, mapping, spreadsheets, and video, users expect this level of performance from all web applications. There are limitations with the capabilities of current languages and the ease of implementing and adding these features. HTML5 provides new tools and features to help make websites more useful and exciting.
For more information about the WHATWG, visit www.whatwg.org.
HTML5 expands the definition of what a web page can do
Currently, HTML cannot play multimedia such as audio and video without a browser plugin like Flash or QuickTime. HTML also has no capability to store data on a user’s computer; this is currently done with a scripting language or another technology. There is no native drawing format in HTML: graphics and animations are currently supplied as image files or through browser plugins such as Flash, Java, or Silverlight. In general, as more and more people rely on the Web and web applications, the expectations of what a web page can efficiently do is constantly growing. This user demand for higher performance and more fully featured websites is limited by the current HTML language.
A site such as Google Maps is a high-performance web application that benefits from the new features in HTML5.
The following sections provide a brief explanation of some of the most important aspects of HTML5.
HTML5 markup
HTML5 markup introduces several new tags designed to make the structure of a web page more logical and functional. Before HTML5, the page structure relied heavily on the <div> tag, often paired with a CSS class or ID. For example, the code that defines the header of a web page would appear as follows:
<div id="header" > This is my header </div>
In this example, the code highlighted in red refers to the CSS ID that defines the width and height of the header, as well as background color. In the CSS code, this would appear as follows:
#header {
width:960px;
height:100px;
background-color:gray;
}
The ID name header is arbitrary. Some designers might use the name masthead, topsection, or box. In the HTML5 specification, there is a unique tag called <header>, so the syntax is much more logical and consistent:
<header> This is my header </header>
In this example, you can directly add style properties (width, height, background color, and more) to the header rule in CSS:
header {
width:960px;
height:100px;
background-color:gray;
}
The difference between the two code examples above may be difficult to understand if you aren’t familiar with CSS. The first example uses a selector (#header) that is referring to a CSS ID attribute. The second example uses a selector (header) that is new to HTML5 and allows you to style the element directly. HTML5 has a number of other new elements such as <footer>, <nav>, <section>, <aside>, and <article>. These names are based on the most common ones used for layout sections in today’s web pages (div id="footer", div id="nav", and so on). The goal of the new HTML5 elements is to reduce the current reliance on <div> tags and replace them with a more consistent and readable page structure. Note that HTML5 doesn’t replace any HTML syntax; it adds new vocabulary to the existing list. In other words, you can still use the <div> tag, but it no longer supports the entire load of a page layout.
The structure of a website with HTML5 elements. A. Header. B. Nav. C. Section. D. Article. E. Aside. F. Footer.
A tour of the key HTML5 elements
This book explains many of the new HTML5 elements in depth, beginning with Lesson 6. But first, Lesson 1 will provide an overview of the key additions to the HTML5 syntax.
The <video>, <audio>, and <canvas> elements
The HTML5 specification includes tags that let you incorporate multimedia without browser plugins. The <video> and <audio> tags let you embed video and audio into your pages as you currently do with images using the <img> tag. The <canvas> tag supplies HTML with a native drawing and animation format. This tag could also provide an alternative platform for the type of graphics and animation found in Flash movies. However, there are significant issues that need to be addressed.
The <video> and <audio> elements embed media files into your pages
The structure for embedding video and audio is simple, as the following example to adding video to a web page shows:
<video src="catz.mp4" width="400" height="300"></video>
Embedding an mp3 audio file onto your page is similar; for video and audio, you can add built-in player controls and preloading capabilities with the controls, preload, and autobuffer attributes:
<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </audio>
This feature of HTML5 is helpful when compared with current available methods; for example, embedding video using Flash requires more code to implement. Additionally, there is currently a large category of mobile devices such as Apple’s iPhone and iPad that do not support Flash, and in these cases the video element is the primary alternative. Although the simplicity of having <video> and <audio> tags is welcome, it does raise the question of how older browsers that do not recognize these tags are supposed to handle them. You will learn more about these complications and solutions in Lesson 9, Working with the Video and Audio Elements.
An HTML5 video player with controls is embedded into a web page; no browser plugin needed.
The <canvas> element provides drawing and animation features
The canvas element works as a drawing surface on your page. Within this drawing surface, you can create shapes with color, gradient, and pattern fills. You can interactively manipulate pixels onscreen, render text, and export these contents to a static image file, such as a .png. You can also add JavaScript or the new CSS3 animation features to make the objects you create move, fade, scale, and so on. Adding a canvas element to a page is simple:
<canvas id="myCanvas"></canvas>
JavaScript handles all of the work, and it provides a context for the object you create. For example, to create one of the simplest canvas objects, a black rectangle, the code might appear as follows:
<script>
var canvas = document.getElementById ("myCanvas"), context = canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100
context.fillRect(10, 20, 200, 100);
</script>
This creates a simple rectangle filled with the color black. The code might seem longer than necessary for a simple result, but the canvas tag simply exposes the code within an HTML document and this model provides a number of benefits. Future uses include user interface elements such as player controls, illustration elements that can be animated, and data visualization uses, such as charts and graphs. You will learn more about creating content with the <canvas> tag in Lesson 10, Working with Canvas.
Web applications such as the one at LucidChart.com can use the canvas element to interactively draw charts and diagrams.
Web forms
The new form elements in HTML, when implemented, will make working with forms easier than at present. For example, many web designers need to create forms that require validation before the data is submitted. In order to do so, a user must enter a value in the email field of a form submission. Currently, most solutions to this problem require JavaScript or another scripting language, but HTML5 just adds the required attribute to the list of form input types, as shown below:
<input type="email" required>
There are many new form input types, such as email for email addresses, search to designate form fields used with search terms, url to specify a form field that uses a web address, and many more. These new web form elements are designed to regress to generic input forms. In other words, you can begin to use these new input types, and if a browser does not support the new form element, it will use a generic (supported) element. You’ll learn how to work with forms in Lesson 7, Creating HTML5 Forms.
In Firefox 26, the browser displays a warning if a user tries to submit a form with an empty required field.
Many more new HTML5 elements
In addition to the new <video>, <audio>, <canvas>, and form elements, there are several more new elements for use in HTML5. Some examples are the <figure> and <figcaption> elements used to label images on your pages, the <nav> element to group a set of navigation elements into a logical section, and more. HTML5 also addresses existing tags found in HTML 4.0.1 that were outdated or needed refinement, such as <i>, <b>, <small>, <strong>, and <abbr>, which have new meaning and new uses in HTML5.
An overview of HTML5 APIs and supporting technologies
There are other developing web technologies related to the HTML5 specification on syntax. These techniques will help you perform tasks in the web browser and supported mobile devices that were not possible in previous versions of HTML.
Geolocation in action
Geolocation is an API that helps identify the web browser’s geographic location. This information is then used to send you relevant data based on your position. Version 3.5 of Firefox was one of the first browsers to use geolocation. An example of the usefulness of geolocation is to connect a web search with map data to help you locate restaurants within walking distance of your hotel. Instead of manually entering your address, a geolocation-enabled browser could deliver local results based on your location.
Geolocation is currently enabled in some modern browsers. For an example of how this feature works, follow the instructions in the next procedure to visit Flickr, the photosharing site. (You need a browser that supports geolocation.)
At the time of this writing, Firefox 3.5 and above, Chrome 4.0 and above, IE 9 and above, Safari 5 and above, and Opera 10.6 and above all support Geolocation.
1 Open your geolocation-enabled browser and type the following URL: flickr.com/map. This page displays a map of photographs around the world that users have uploaded with metadata that tags their images with the geographical coordinates of the location. (This information can be entered manually or automatically by some cameras. The term for images with this metadata is geotagged.)
2 Click the Find My Location button at the top right side of the map. (You will not see this button if your browser does not support geolocation.)
You will be prompted by your browser to share your location. To see geolocation in action, click Share or Allow. (Different browsers implement this differently.)
3 The Flickr map will update your geographic location. If there are geotagged images in your immediate area, you will see pink circles representing images on a local map. Additionally, a row of thumbnails representing these images appears at the bottom of the page.
The geolocation-enabled map displays thumbnails of images taken in your surrounding location.
For the last few years, smartphones have provided the ability of connecting geographical or GPS data with the device’s browser or an application. With the geolocation feature available to more web browsers, these benefits can now be part of the desktop experience.
Web Workers
Web Workers is another API often grouped into the HTML5 family. Web Workers is a framework that addresses browser performance. When you access advanced web applications, such as mapping or applications that instantly generate charts and graphs, there are several processor-intensive computations that can slow down the performance of your application. Much of the slowdown occurs because there is competition between user interaction (clicking, dragging, and so on) and the need for the application to access resources (graphics, data, and more).
Web Workers are scripts that run in a separate thread. This separation means that processes, such as obtaining data from a database, occur independently from user behavior, which creates a more seamless environment for the user. Web Workers are in an early phase of development; at the time of this writing, there has been relatively little browser support.
Web storage
Web storage is an example of using pre-existing models of web technology in more powerful ways. Web storage improves browser cookies. Currently, browser cookies let websites store small pieces of data on your system so the site can save information for later use; for example, sites that recognize your login information when you return.
Cookies are a limited technology, and are not particularly easy for designers to use. Web storage updates the model to allow for greater storage space for modern web applications and makes the addition of storage features more accessible.
HTML5 provides two ways to store data: localStorage and sessionStorage. Data saved as localStorage is available to the browser at any point, even when the browser closes or the system is restarted. Data saved as sessionStorage is lost when the browser is closed.
An example of web storage currently in use is in Apple iPhones, which have a default storage space of five megabytes for data used in web applications. As this space begins to fill, you receive a prompt asking you to expand your storage.
Web pages may request user permission to use offline storage.
CSS3 is not part of HTML5, but is closely related
As noted earlier, many of the examples labeled as HTML5 are a combination of the HTML5 technologies described above and JavaScript or CSS. CSS is an evolving language identified by version numbers, and the latest version of CSS (3.0) has evolved alongside the HTML5 specification. Some components of CSS3 are frequently mistaken as components of HTML5, such as animation or transitions. The confusion is understandable but it is important for professional designers and developers to understand the distinction. Below is a brief description of some of the most interesting CSS3 features.
CSS animations
Technologies such as Flash have traditionally been used to animate objects in the browser. You can now create some of the same functionality using CSS rules and properties. In the future, the HTML5 Canvas element and CSS3 transitions can help designers create interactive and animated elements on the page.
Visit http://stuffandnonsense.co.uk/content/demo/madmanimation/ in a Webkit browser, such as Chrome or Safari, to see CSS animation in action.
CSS transitions
CSS transitions are closely related to animation, but fundamentally different. A transition allows property changes in CSS values to occur smoothly over a specified duration. For example, a button that has a background color of green can smoothly animate to a different background color when the user rolls over the button. You can currently perform this type of animation with JavaScript and Flash, but as with much of CSS3, transitions give designers a tool to use without becoming a scripting expert.
Visit http://daftpunk.themaninblue.com/ to see an example of CSS transitions in action.
CSS 2D- and 3D-transformations
The CSS transform property allows you to rotate, scale, or skew an element on your page. An example is the ability to rotate an image on the page slightly to one side for aesthetic effect. You can also animate transforms; for example, animating the scale property lets you create an enlarging or minimizing effect on an image or other element. You can also add the perspective property to the transformation effect to simulate an object positioned or animated in 3D space.
An example of a 3D-CSS transformation that is also animated.
CSS3 backgrounds, borders, RGBa colors, gradients, drop shadows, and rounded corners
There are several enhancements to the visual style of the page that are now possible with CSS3. A simple example is the border-radius property which allows you to add rounded corners to your boxes, but there are many other new effects you can create, such as native gradients and drop shadows. Traditional effects, such as the background-image and the border property, are improved in CSS3. For example, you can use the border-image property to apply images to style a border, or add multiple background images to a single container; this removes the current limitation of a single background-image.
@font-face web fonts
There is increasing support for the ability to add custom fonts to page designs using the @font-face property, which lets the designer specify a particular font and provide a source link for the font to allow the browser to download it. This feature, along with web font services like Adobe Edge Web Fonts and Google Web Fonts, greatly expand the typefaces and fonts available to web designers.
HTML5 is in a state of transition
The technologies behind HTML5 are in transition, so you need to determine when you can use them and when you should not. Throughout this book, we will guide you and offer a perspective on the kind of support you can expect in web browsers, and provide scenarios where HTML5 might be more appropriate to use than other languages.
Each of the major browsers in use today (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, and Opera) have different support for HTML5 features in the syntax and the supporting family. In some cases, a page that has new functionality or appearance in one browser might not appear at all in another, or features might be missing, but the page continues to be functional. These scenarios might change in the future, but desktop web browsers evolve very slowly, so there will continue to be inconsistent browser support in the near future.
Who is using HTML5 today?
Mobile devices and smartphones are active platforms for HTML5 documents and web applications today. Browsers such as Apple Safari for iOS have supported features associated with HTML5 (for example, offline storage and CSS3 animations) for a few years. This is because iOS mobile devices, such as the iPhone and the iPad, have a distinctive hardware profile including screen size and memory capabilities as well as a consistent software profile (only one operating system needs to be supported). Within the controlled environment of a smartphone or mobile device, it is much easier to add advanced features when you know definitively they will be supported by the browser. In contrast, within the landscape of desktop computing, there are far too many variables to support easily, including multiple browsers, old browsers, different monitor resolutions and more.
The mobile Safari browser on Apple’s iPhone has been using HTML5 features such as offline storage since 2009, and has internal preferences to set the storage size.
Users are also demanding content that is optimized for mobile devices, which HTML5 and its supporting technologies can deliver. For this reason, HTML5 support is a high priority for the manufacturers of these devices. This support, in turn, encourages designers and developers to build unique and compelling websites and web applications that leverage HTML5 features.
All of the major web browsers are committed to HTML5, and by learning these skills today, you can be a part of the exhilarating (and challenging) evolution of the Web.
Identifying HTML5 sites
The World Wide Web Consortium (known as the W3C) is a group that has been in existence since the beginning of the Web. This group has no formal power, but it provides the specifications, or rules, for the various technologies behind the Web. For example, formal specifications for HTML and CSS help browser manufacturers make browsers, and help designers and developers build reliable websites that work in these browsers.
In January 2010, the W3C introduced an HTML5 logo for public use to promote the new capabilities of HTML5 and related technologies.
The HTML5 logo is free to download and use.
The logo is available as a graphic to display on websites and other media to indicate the use of this technology. Note that the W3C uses the term HTML5 in a broad sense and includes other technologies. In addition, HTML5 will become an official standard in 2014, but web developers and designers are encouraged to start using the specification today. For more information about HTML5 and the logo as discussed by the W3C, visit: www.w3.org/html/logo/
Self study
1 Browser manufacturers often promote HTML5 features. In addition to your primary web browser, download and install one or more of the following browsers: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, and Opera. Next, visit the URL for your primary browser, and then explore the HTML5 features.
- • Google Chrome (www.chromeexperiments.com)
- • Apple Safari (https://developer.apple.com/safaridemos/)
- • Mozilla Firefox (https://developer.mozilla.org/en-US/demos/)
- • Microsoft Internet Explorer (http://ie.microsoft.com/testdrive/)
2 Next, use a different browser for the same site. Can you identify any missing features? Does the primary website give you warnings about features that might not be supported?
Review
Questions
1 Name three components of HTML5 designed to reduce or replace web browser dependence on browser plugins such as Flash.
2 What is the difference between the HTML5 specification and the HTML5 family as defined in this lesson?
3 Where was the earliest adoption of HTML5 seen and why?
Answers
1 The <video> and <audio> tags let you embed multimedia directly in HTML without the need for a browser plugin. The <canvas> element lets you add a drawing surface to your page and create shapes, fills, gradients, and with the help of CSS, it can animate these objects.
2 The HTML5 specification features a number of new elements (or tags) that you can use to add new layout structure or functionality to web pages. The HTML5 family is composed of several related, but independent, technologies such as Geolocation, web storage, and CSS3.
3 The earliest adoption of HTML5 was seen on mobile devices, such as the iPhone, because the operating system and browser were based on a controlled environment (such as screen size and memory) that made it easier to introduce the new HTML browser features.