Section Two: HTML5 with CSS3 and JavaScript
This section covers the fundamentals of HTML5 and CSS3 syntax, along with HTML5 techniques involving JavaScript and the jQuery JavaScript library. This section includes ten lessons. You should have an understanding of coding XHTML/HTML and CSS prior to starting these lessons. If you are new to coding HTML/XHTML and CSS, we suggest you start with section one of this book, which covers the fundamentals of web design and development with XHTML/HTML and CSS.
Lesson 6: Using HTML5 Markup
In this lesson, you will learn how to update existing HTML pages using the new HTML5 sectioning elements and other new elements.
What you’ll learn in this lesson:
- • How to define the different HTML5 content categories
- • How to replace div elements with new HTML5 elements
- • Understanding sectioning content and HTML5 outlines
Starting up
You will work with several files from the HTML5_06lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.
To accurately preview the HTML5 content that you will create in this lesson, you need a browser that supports the relevant HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser and for instructions on downloading one, if needed.
A review of semantic markup
In this lesson, you will learn some of the new HTML5 elements that have been added to the language. To successfully complete the lesson, you should know the fundamentals of HTML and CSS and have experience building web pages with these languages.
This lesson begins with a brief review of semantic markup, which is a formal way of saying “always choose the best tag for the job.” A more technical explanation of semantic markup is syntax that makes sense to humans as well as programs, such as a web browser. Semantic markup tries to explicitly attach meaning to content, most often through the use of tags.
At first glance, choosing the right tag seems fairly straightforward. For example, consider headings in HTML, of which there are 6 levels: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Rendered in the browser, the <h1> element is the largest and the <h6> element is the smallest.
The 6 heading elements, rendered in default styles, from top to bottom.
The content within an <h1> element should have greater importance than the content in an <h3> element. Likewise, if a font style is set for the headings, the font size of an <h1> element should be set larger than the <h3> element. There is no technical reason that prevents you from creating a style making the <h3> element larger than the <h1>. From the web browser’s perspective it would make no difference, but to a human looking at the code for the first time it would be semantically confusing: an <h3> element is not supposed to be larger than an <h1>.
One of the goals of semantic markup is to make the code on a page logical and consistent. Logically chosen and consistent code is easier to update and modify for the designer, and it makes the web page more flexible and adaptable for different uses, such as websites for mobile devices. Semantic markup ensures that even pages with no style still display elements that are comprehensible and usable.
HTML5 fundamentals
Before creating an HTML5 page, you will review the different categories of content within an HTML document. Although the changes made to HTML5 are numerous, the fundamentals of HTML (and XHTML) have not changed dramatically. One interesting development is that the syntax in HTML5 is very forgiving, especially if you compare it to XHTML 1.0 syntax. For example, all of the following is currently true in HTML5:
- • HTML5 is case insensitive, meaning that you can use uppercase tags, lowercase tags or even a mixture of the two and the page will still validate. For example, the following code is technically valid:
<H1> Breaking news from Boston </h1>
- • The closing tags for elements are not required. For example, adding multiple paragraphs in the following way is technically valid:
<p> There is an accident on Interstate 95 between Woburn and Burlington.
<p> Travelers should seek alternative routes.
<p> The speed limit is 55 mph.
- • Attribute quotes are optional. For example, the following code is technically valid:
<img src=trafficjam.jpg alt=traffic jam>
If you have learned how to create webpages with code over the last 10 years or so, you might be scratching your head a bit because the preceding rules fly directly in the face of the “best practices” of web design that you may have been taught. If this is the case, why does HTML5 allow these practices? The answer is perhaps best summarized by the architects of the language as an attempt to “pave the cowpaths.” In other words, when a practice is already widespread by designers and developers, “consider adopting it rather than forbidding it or inventing something new.” In HTML5, there is an emphasis on backwards compatibility, and many of the practices mentioned above (such as using uppercase tags) were used by document creators in the early days of the Web. The W3C decided to fold this variety of coding practices into the specification to ensure that future browsers would continue to render as many pages on the Web as possible.
For a more detailed explanation of the W3C’s philosophy for HTML Design Principles, visit http://www.w3.org/TR/html-design-principles/.
Just because HTML5 allows this syntax, it does not mean you need to change the way you currently write code. If you are used to closing your elements using lower-case tags and adding quotation marks for attributes, this remains a very good idea. By having a standardized way of writing code, you will tend to reduce the number of errors you make, and have a way to isolate problems when they do occur.
The HTML5 DOCTYPE declaration
A significant change in the HTML5 specification can be seen on the very first line of an HTML5 document. A web browser renders a page from the top of the document to the bottom. The opening line of most HTML files is called a doctype, which indicates to the browser the type of document to expect. For example, when a designer uses the transitional version of HTML (4.0.1), the doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
When a designer uses the strict version of XHTML 1.0, the doctype is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In HTML5, a doctype is much simpler:
<!DOCTYPE html>
DOCTYPE is used to validate documents. Current and future browsers can check the syntax of documents that declare themselves as HTML. Any incorrect syntax (for example, a misspelled tag or missing attribute) returns an error. Validation is an optional process, but it is often used by designers and developers to find incomplete or missing code.
To learn more about validation, visit the W3C Markup Validation Service at http://validator.w3.org/about.html.
In this exercise, you will convert an older HTML page to HTML5. The document you’ll convert is an HTML 4.01 document, so you will need to update the DOCTYPE to use the simpler HTML5 DOCTYPE.
1 In your text editor, choose File > Open and navigate to the HTML5_06lessons folder. Choose the 06_index.html file, and then click Open. Save the document with a new name to ensure you have a backup copy:
Choose File > Save As, name this file 06_index_work.html, and save it within the HTML5_06lessons folder.
2 Preview this page in your browser to see the current layout. This layout is classified as a two-column fixed-width column layout. The basics are simple: there is a div element with the ID attribute wrap containing the other div elements that compose the layout of the page. The CSS style for the container div sets the width as 960 pixels and sets the left and right margins with the auto value to ensure the container is centered within the browser window.
The div element with the wrap ID attribute is set to 960 pixels wide and contains all the other layout sections.
3 Close the browser and return to your text editor. Select the entire first line at the top of your page and delete it. Then type the following:
<!DOCTYPE html>
4 Save your file and preview in the browser. You should notice no change, but the browser recognizes this file as HTML5, not HTML 4.01.
5 Close your browser. You will replace some of the div elements with the new HTML5 elements, but first you’ll review how to categorize the different types of content in HTML5.
The different categories used for HTML5 content
You can divide the content of a web page into categories that, for the most part, are not new to HTML5 and should be familiar to designers with experience building web pages.
- • Metadata content
- • Flow content
- • Sectioning content
- • Heading content
- • Phrasing content
- • Embedded content
- • Interactive content
These categories are helpful for grouping the elements available for use. For example, the Flow content category describes all the elements available for use in the body of a page, but you can sub-divide flow content into smaller categories, such as phrasing and heading content.
Metadata content
Content that sets up the presentation or behavior of the rest of the content on the page is called metadata content. You can also use it to set up the relationship of the document with other documents. One obvious example of metadata content is the <meta> element, which often contains keywords or a description about the page, and is used by search engines to help categorize the page. Elements, such as <style> and <script>, are also considered metadata content since they contribute to the appearance and behavior of the primary content. Metadata content is located in the <head> section of a document.
<head>
<title> SmoothieWorld: Providing access to the best smoothie recipes anywhere. </title>
<meta charset=utf-8>
<link rel="stylesheet" href="styles.css" media="all">
<script src= "jquery-1.4.2.min.js"></script>
</head>
Flow content
Flow content represents the elements that are considered the content of a web page. In other words, all the tags used to mark up content are placed in this category; for example, <p>, <h1>, <ol>, <table>, and so on. Flow content is traditionally text or an embedded file, such as an image or video. In HTML5, there are several new elements in this category; for example, <article>, <aside>, <audio>, <canvas>, <hgroup>, and many more.
<h3> This is flow content </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
Sectioning content
This category is new to HTML5 and currently includes four elements: <article>, <aside>, <nav>, and <section>. The W3C explains sectioning content as “defin[ing] the scope of headings and footers.” Sectioning content is a subset of flow content; you will learn more about sectioning later in the lesson.
You can find the definitions of sectioning content and the other categories at: http://developers.whatwg.org/content-models.html#kinds-of-content.
<aside>
<h1> New Additions </h1>
<p> SmoothieWorld features smoothie recipes submitted by our community of users. Here are some of the highest rated recipes of the last 30 days.</p>
</aside>
Heading content
Heading content contains all the standard heading elements currently used in HTML 4.0: <h1>, <h2>, and so on. In addition, HTML5 includes the <hgroup> element, designed to group two or more headings. Heading content is a subset of flow content.
<hgroup>
<h2>Top Rated Smoothies</h2>
<h3>The Funky Orange</h3>
</hgroup>
Phrasing content
Phrasing content is the text of the document, which includes elements that mark up the text within a paragraph. Phrasing content is a subset of flow content.
<p> The advantage of having <strong> good </strong> hiking boots becomes <em>extremely</em> clear after your third day of walking.</p>
Embedded content
Embedded content is content that imports another resource into your document page, such as an image or video.
<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </audio>
Interactive content
One of the most basic elements, the <a> tag (used for hyperlinks), is considered an interactive element. Other elements specifically intended for user interaction are also included in this category; for example, the <textarea> (used in forms) and the <button> elements.
<input type="button" value="Am I interactive?" onClick='alert("Yep I am interactive")'>
Clicking a button with a JavaScript alert attached.
In the next exercise, you will learn how to use some of the new HTML5 elements by converting an existing div-based layout to one that uses new sectioning elements and other new tags.
Using the new header element in HTML5
The HTML5 specification expands the current set of elements used today to give the designer and developer more precise semantic markup options. An example is the HTML <div> element used to divide a page into sections. The opening <div> tag is often paired with a class or ID attribute, which is then styled in CSS with various properties, such as width, height, and background-color. On its own, the <div> element is meaningless. Designers and developers give it meaning by adding ID and class names, but these names are arbitrary and not meaningful to a web browser. One of the goals of HTML5 is to add new elements that have inherent meaning within the structure of the document.
In this exercise, you will examine this structure by opening an existing layout that uses the current HTML framework, and then convert it to an HTML5 page.
1 In your text editor, choose File > Open, navigate to the HTML5_06lessons folder, select the base.css file, and choose Open.
2 Located approximately in the middle of the stylesheet is the following ID rule for the original header:
#masthead{
background-color: white;
}
This is a simple rule that defines the style of the ID called masthead. For this exercise, the style is a white background-color.
3 Open your 06_index_work.html file.
4 The first step is to replace the existing <div> tag used for the header with one of the new HTML5 elements. Within your HTML, locate the following section of code:
<div id="masthead">
<h1>The web's #1 resource for smoothie recipes</h1>
<img src="images/smoothieworld_logo.jpg" width="200" height="150" alt="smoothieworld_logo" />
</div>
The only content nested inside this div element is an image for the site logo and a heading 1 used for the tagline.
5 Delete the opening and closing div tags and replace them with the following:
<header id="masthead">
<h1> The web's #1 resource for smoothie recipes </h1>
<img src="images/smoothieworld_logo.jpg" width="200" height="150" alt="smoothieworld_logo" />
</header>
The W3C specification explains that, “the header element represents a group of introductory or navigational aids.” The specification also indicates that, “A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”
In HTML5, you can use the <header> element multiple times on a page. Later in this lesson, you will learn more about when and where you could add additional headings.
An issue to consider about the <header> element, which is new to HTML5, is compatibility with web browsers not familiar with HTML5 tags. An explanation of this issue and how to resolve it is given in the next paragraphs.
6 Choose File > Save and preview your page in your current browser. If your browser supports the HTML5 <header> element, you will see no difference between this page and the page you previewed at the beginning of this lesson. If you use a browser that does not support the <header> element, the background color of the header will be orange.
The page as seen in a browser that supports the HTML5 <header> element.
Browsers that do not support the HTML5 <header> element will not recognize the style associated with it.
The difference in background colors occurs because a browser that does not support HTML5 will not render the style of the <header> element properly; the orange color you see is the background color of the surrounding div. Even though they are nested within the <header> element, the site logo and the site tagline remain visible because they use elements that the browser can recognize: <img> and <h1>.
This simple example demonstrates the dilemma concerning the new HTML5 elements: How can you use these tags if their styles are not recognized by older browsers? The next section shows two solutions for this problem.
Adding support for HTML5 elements in browsers
To recap, when a web browser encounters an unknown element, and this element has associated CSS styles, this creates a problem. To be more specific, many older browsers treat the unknown <header> element as an inline (or text-level) element, not as a block element. Recall that inline elements are generally found within a block of text; for example, the <strong> element and the <em> element are inline. Block elements use blocks of space on the page and create new lines when added; for example, the <p> element and all the heading elements are block-level. When a browser treats a block element as inline, the result can often be problematic. To resolve this issue, you can add a line of CSS code to force the new HTML5 elements to display as block, not as inline.
1 If your reset.css style sheet is not currently open, open it now by choosing File > Open and navigate to your HTML5_06lessons folder. At the top of the page (after the first two lines of comment code), add the following block of code:
header, section, aside, nav, footer, figure, figcaption {
display:block;
}
You listed all the selectors you’ll use in this lesson. If needed, you can return to this section and add more new HTML5 selectors. The reason you put these rules within the reset.css document instead of the base.css document is so you can reuse this reset.css file for new HTML5 pages.
2 Save your CSS file and close it. Preview your page in your browser. If you happen to be using a browser that originally displayed orange in the header area, the background should be white again, demonstrating that the <header> style is being rendered properly.
The steps above will not work for Internet Explorer 6, 7, and 8 because these browsers completely ignore unfamiliar tags, rather than render them as inline, thus causing more significant problems. JavaScript is the best solution for supporting these older browsers, in particular the JavaScript library called Modernizr. This library is available for free download at www.modernizr.com.
If your browser still displays an orange header, you should refresh the page. Older versions of Safari, in particular, need to refresh the cache in order to use the most recent style sheet.
Because the various versions of Internet Explorer represent such a large proportion of web browsers, it would be a shame if there was no way to use HTML5 tags for these browsers. Luckily, there is a solution in the form of the Modernizr JavaScript library. The Modernizr library adds support for displaying HTML5 elements in older browsers and for enabling HTML5 elements in Internet Explorer 6, 7, and 8. The JavaScript within the library is designed to detect features within any browser, and then allows you to target styles as needed. There are rare occasions when a user’s web browser does not support JavaScript, or JavaScript is turned off; in such cases, none of the fixes will be visible and the page will be broken. The majority of browsers do support JavaScript and it is rarely turned off by design. You’ll now add a link to the Modernizr library.
3 In the head section of your HTML, locate the links to your two external stylesheets, and then add the following line:
<link rel="stylesheet" media="screen" href="reset.css" type="text/css" />
<link rel="stylesheet" media="screen" href="base.css" type="text/css" />
<script src="modernizr-1.7.js" type="text/javascript"></script>
This file is currently located in the HTML5_06lessons folder. Because Modernizr is an evolving JavaScript library, so you should visit http://www.modernizr.com and make certain you have the latest version.
4 Save your file and preview with Internet Explorer 6, 7, or 8. The header section now has its original background color, as intended.
An older browser, such as Internet Explorer 6, will display the HTML5 <header> element when using the Modernizr JavaScript library.
Continue using the new HTML5 elements now that you have provided support for virtually all popular browsers.
Adding the HTML5 <nav> elements
You’ll now add the new HTML5 sectioning elements to divide your page into logical sections; the new sectioning elements are <section>, <article>, <aside>, and <nav>. You’ll start by adding the <nav> element, since it’s the most intuitive one.
1 Locate the following block of code in your HTML:
<div id="nav">
<ul>
<li><a class="nav-home" href="08_layoutwork.html">Home </a></li>
<li><a class="nav-about" href="08_aboutus.html">About Us </a></li>
<li><a class="nav-recipe" href="recipes.html">Recipes </a></li>
<li><a class="nav-submitrecipese"href="submitrecipe.html"> Submit a Recipe</a></li>
<li><a class="nav-forum"href="forum.html">Forum</a></li>
<li><a class="nav-contact"href="contact.html">Contact Us </a></li>
</ul>
</div>
This code uses a common list-based CSS navigation technique. The list in this code is unordered and nested within the div called nav. The new HTML5 <nav> element replaces the original div and ID.
2 Add the following code:
<nav>
<ul>
<li><a class="nav-home" href="08_layoutwork.html">Home</a> </li>
<li><a class="nav-about" href="08_aboutus.html">About Us</a> </li>
<li><a class="nav-recipe" href="recipes.html">Recipes</a> </li>
<li><a class="nav-submitrecipese"href="submitrecipe.html"> Submit a Recipe</a></li>
<li><a class="nav-forum"href="forum.html">Forum</a></li>
<li><a class="nav-contact"href="contact.html">Contact Us</a></li>
</ul>
</nav>
3 Because you removed the id attribute that was used to style the previous div, you must now update the CSS selector used in your stylesheet. In your text editor, open your base.css stylesheet and locate the following code:
#nav {
background-color:#60668B;
height:35px;
background-image:url(images/bg_nav.gif);
background-repeat:repeat-x;
}
Remove the ID selector #nav and replace it with the nav selector, as instructed below.
3 Make the following change to your code:
nav {
background-color:#60668B;
height:35px;
background-image:url(images/bg_nav.gif);
background-repeat:repeat-x;
}
The styles are now connected to the nav element, not to the #nav ID. Choose File > Save to save your stylesheet. Preview your page in the browser. Notice that the navigation is still not working properly.
Your navigation appears broken because you need to update all styles associated with the #nav ID.
The navigation appears broken because there are other styles using the ID name #nav; you need to update them all.
Close your browser and return to your text editor.
4 In your base.css stylesheet, locate the rules below the nav rule. You need to update three different selectors: #nav li, #nav ul li a and #nav ul li a:hover. These selectors are called contextual selectors in CSS, and they target specific tags within the context of the parent style (in this case, the ID #nav.) For example, #nav li defines a style for list elements (li) inside the #nav div element.
Make the changes highlighted in red:
nav li {
float:left; width:120px;
height:35px;
background-color:#7D83A4;
text-align:center;
border-left:1px black solid;
border-right:1px black solid;
line-height:35px;
}
nav ul li a {
color:#ffffff;
text-decoration:none;
display:block;
}
nav ul li a:hover {
background-color:#29336b;
color:#F8F068;
}
5 Choose File > Save. Preview your page in the browser; your navigation should appear as it did originally.
If your navigation still appears broken, try refreshing your page in the browser. Some browsers hold onto the cache of the old page and need to be reloaded.
Your navigation now uses the HTML5 <nav> element.
Adding the other HTML5 sectioning elements
The other elements in the sectioning category are <section>, <article>, and <aside>. You’ll add the <section> element first. The official definition of the section element is that it “represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.” The definition also indicates that “The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
You can find this definition at http://developers.whatwg.org/sections.html#the-section-element
This means that you can use a section when you need to divide important content, such as text and images, into logical areas. For example, the page you have been working on is a home page with content that is divided visually: the column on the left has some content and images; the second column to the right has content introducing users to the site, a product review, and images. The sidebar content is unrelated to the main content, and you will return to it later in the lesson. As you walk through the next steps, take note of the ID names, as they provide clues to the designer’s intended use for these parts of the page.
1 Locate the opening <div> tag for the introduction section:
<div id="introduction-content">
Locate the closing <div> tag further down the page; you will change this tag shortly. The commenting code will help you identify it.
<p><small>© copyright 2038 SmoothieWorld.com.</small></p>
</div>
<!-- End of Introduction Content -->:
2 Scroll back to the opening <div> tag and replace it with the section tag as follows:
<section id="introduction-content">
3 Now scroll to the closing </div> tag and replace it with closing section tag:
<p><small>© copyright 2038 SmoothieWorld.com.</small></p>
</section>
<!-- End of Introduction Content -->:
The parent element of this new section is called <div id="innerwrap"> and it is used for presentation purposes only, not for content. The style associated with this div gives it a background color and a tiled background image. Since this div is for presentation only, you can leave it as is.
A. The Innerwrap div is presentation only, not content, so it remains as a <div> element
You can still use div elements in HTML5, but the best practice is to use them when there is no better choice within the new HTML5 elements.
4 Save your file and preview your page in the browser. Before continuing with the exercise, you need to understand the document outline model that HTML5 uses.
HTML5 document outlines
A weakness of the current HTML and XHTML specifications is the lack of a good document outline model. Consider the traditional outline you might create before writing a report or paper. Outlines illustrate the level of importance for your content as well as the relationships between this content. The HTML5 sectioning elements are designed to naturally create an outline structure from your web pages. Imagine if every web page had a “table of contents” that was automatically created from the structure of the tags being used. This is the intent of the HTML5 document outline.
The benefits of document outlines are not immediately apparent with current web browsers and mobile devices, but they can be useful for assistive devices, such as screen readers. For example, an HTML5-enabled screen reader might encounter a page with the <nav> element and choose to skip the nav, give the user the option to skip it, or read each item within the nav.
HTML and XHTML pages currently have document outlines based on the heading tags only, so they are very limited. The new HTML5 document outline model provides more detailed and meaningful outlines. For example, consider the following:
<body>
<header>
<h1>Welcome to our site</h1>
<p>The best website in the world!</p>
</header>
<nav>
<h1>Site Navigation</h1>
</nav>
<section>
<h1>Breaking News</h1>
<h2>Car overturns on highway</h2>
</section>
</body>
This HTML has the following document outline:
1. Welcome to our site
1. Site Navigation
2. Breaking News
1. Car Overturns on Highway
In this example, the <nav> and <section> elements create new sections within the outline, but their name comes from the nested heading. This makes headings a much more significant part of the document outline for HTML5 sites. The HTML5 model lets you add a new h1 element per section, so different sections of the page can have their own hierarchy, as shown in the example above.
A potential complication is that currently, the HTML5 specification states that sectioning elements must contain headings, or they appear listed as Untitled in the outline. For example, in the HTML example above, deleting the heading 1 element from the <nav> element makes the outline appear as follows:
1. Welcome to our site
1. Untitled NAV
2. Breaking News
1. Car Overturns on Highway
Untitled sections in an outline might not seem important from a visual perspective, and this is an area of the HTML5 specification still being refined at the time of this writing. The rules dictating HTML5 outlines might change, but you should keep in mind that document outlines can help organize your HTML5 content and teach you more about sectioning. Creating a good document outline today will help ensure your site benefits when future browsers begin to use them. Designers and developers who prioritize the accessibility of their sites should pay particular attention to the role of the document outline.
h5o is a tool you can use to view the HTML5 outline in your browser. Access this tool at http://code.google.com/p/h5o/.
Adding the footer element
Keep in mind that the <header> element you added earlier is not a sectioning element and will not define a new section in a document outline. Similarly, the <footer> element is not categorized as a sectioning element; you can have more than one footer element per page. For example, you could have a site footer and a footer within a section. In this exercise, you will simply replace the original div named footer with the new HTML5 footer element.
1 In your HTML page, locate the div element with the ID attribute footer and make the following change:
<footer id="siteinfo">
<p>Copyright SmoothieWorld 2014</p>
<p>Registration on or use of this site constitutes acceptance of our <a href="useragreement.html"> user agreement </a> and <a href="privacy.html">Privacy Policy.</a></p>
</footer>
2 Open your base.css external stylesheet, locate the #footer ID, and change the selector as follows:
#siteinfo {
clear:both;
background-image:url(images/footer_background.jpg);
background-repeat:no-repeat;
width:960px;
height:118px;
padding-top:10px;
}
3 Below this rule, there is a contextual selector for paragraphs inside the footer that you need to update. Replace the #footer p selector as follows:
#siteinfo p {
margin:10px 0 0 20px;
width:280px;
font-family:Verdana, Geneva, sans-serif;
font-size:0.689em;
}
4 Save your HTML and CSS files, and then preview your page in the browser. Scroll to ensure the footer is displaying as expected. (If the image is not visible, try refreshing your browser page before checking your code for errors.) In a browser that supports the HTML5 tags, your page appears as it did when you previewed it earlier in this lesson.
Your design now uses the <footer> element.
In the next few exercises, you will group content using a combination of the tags you have learned, along with some new ones.
Adding the article and aside elements
In this section, you will learn about the <article> and <aside> elements, beginning with the article element. The W3C definition states that <article> is “a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
The key concept in the above definition is that it is self-contained. The <article> element was designed for content that can be extracted from its containing page; for example, the content referring to the Blender review in your current page.
You can nest the <article> element within a <section> element, as in this exercise.
1 About halfway down your page, locate the following heading 2 element: <h2>A review of the Blend-o-Matic 3000</h2> and add an opening <article> tag on the line above it:
<article>
<h2>A review of the Blend-o-Matic 3000</h2>
2 Scroll to find the last paragraph of the review. Add the closing tag for the <article> element as indicated:
<p><small>© copyright 2038 SmoothieWorld.com.</small></p>
</article>
</section>
<!-- End of Introduction Content -->
3 In HTML5, an article element can have a header, so you will add one now. Locate your opening <article> tag and immediately after, add a new header element within the article:
<header>
<h2>A review of the Blend-o-Matic 3000</h2>
<p>By Cheri White, <span class="posttime"> posted December 21, 2012</span></p>
<h3>The latest entry in the Blender Wars lives up to its hype </h3>
</header>
Recall that in HTML5, you can have multiple headings per page as long as they are in different sections. In addition to the header, you can add a <footer> section within the article to help structure this section.
4 Locate the author contact and copyright section and add the following code:
<footer>
<p>Questions for the author? Contact<a href="mailto:[email protected]">Cheri White</a>.
<p><small>© copyright 2038 SmoothieWorld.com. </small></p>
</footer>
</article>
</section>
The rest of this exercise illustrates the use of the aside element. You can use the aside element in two ways. One is based on the traditional use of a sidebar for a website; the second is for an area of related content within a <section> element. You will start with the sidebar of the site.
5 In your HTML, locate the opening <div> tag with the ID name aside:
<div id="aside">
<h2>New Additions</h2>
<p>SmoothieWorld features smoothie recipes submitted by our community of users. Here are some of the highest rated recipes of the last 30 days.</p>
You will replace the <div> tag with the <aside> tag and change the ID name to make it more logical.
6 Change the opening <div> tag as follows:
<aside id="secondary-content">
<h2>New Additions</h2>
<p>SmoothieWorld features smoothie recipes submitted by our community of users. Here are some of the highest rated recipes of the last 30 days.</p>
This ID more accurately represents the role of this content. Make sure you close the <aside> tag.
7 Locate the original closing <div> tag and change it to a closing <aside> tag:
<a href="#"><img src="images/learn_more.png" alt="Learn More" width="235" height="187"></a>
</aside>
8 Open your base.css file and locate the original #aside selector; you need to change this to your new ID #secondary-content. Change the code as follows:
#secondary-content {
float:left;
width:300px;
background-image:url(images/sidebar_bg.png);
background-repeat:repeat-x;
background-color:#EAB8C3;
}
There are related styles that used the original #aside selector, and you need to change all of them.
9 Change the selectors in the following three sets of style rules from #aside to #secondary-content:
#introduction-content p, #introduction-content h1, #introduction-content h2, #introduction-content h3, #secondary-content p, #secondary-content h2, #secondary-content h3
and
#secondary-content img {
and
#introduction-content h2, #secondary-content h2, {
You’ll now look at the alternative use for the <aside> element.
10 Locate the following code within the <section> element:
<div class="articleaside">
<h3>Need more Data?</h3>
<p> See how we put the Blend-O-Matic 300 to the test. <a href="#">Link.</a></p>
</div>
The articleaside class style for this div element is a small box floated to the left that allows the article content to flow around it. This is a common technique used to separate the continuous flow of text and lead the reader’s eye towards other content. In some cases, this content might be a quote from the article itself (known as a pull quote), or a way to direct the reader to other related content, as is the case in this example.
The articleaside class represents a small, floated box within the article.
To replace the div element with something more meaningful, use the aside element again.
11 Replace the div element as follows:
<aside class="articleaside">
<h3>Need more Data?</h3>
<p>See how we put the Blend-O-Matic 300 to the test. <a href="#">Link.</a></p>
</aside>
When you use the <aside> element nested within a <section> element, as you did here, it represents content that is somewhat related to the section. When you use it as you did in the initial example, the <aside> element is a sidebar considered secondary content unrelated to the main content of the page.
12 Save your HTML and CSS files and preview your page in the browser.
Additional HTML5 elements
There are several new elements you can use to make the content of your pages more meaningful. For example, the <figure> and <figurecaption> elements help identify images and associated captions within your content. You’ll also learn about the new <time> element, which lets you embed time and date information into your content.
1 Within the Blend-O-Matic article, locate the <img> tag linking to the blendomatic_3000.jpg image within your images folder, and add the following code:
<figure>
<img src="images/blendomatic_3000.jpg" alt="Blend-O-Matic 3000 blender" />
<p> The Blend-O-Matic 3000 retails for $199.99 </p>
</figure>
The <figure> element is designed for areas of your page, such as images, charts, and graphs. You can also use the <figcaption> element to provide further context.
2 Replace the paragraph tag with the figcaption tag using the following code:
<figure>
<img src="images/blendomatic_3000.jpg" alt="Blend-O-Matic 3000 blender" />
<figcaption> The Blend-O-Matic 3000 retails for $199.99 </figcaption>
</figure>
You can style the new elements as you would other elements. You’ll now format the figure and the caption within the article.
3 Open your base.css file and add the following rule for the figure:
figure {
float:right;
border:1px solid gray;
padding:0.25em;
margin:0 1.5em 1.5em 0;
}
Save your CSS file and then preview your page in the browser. This style floats the image over to the right and applies borders, padding, and margin to set it off from the rest of the page.
The <figure> element floated to the right of your article.
You will now style the caption. Return to your text editor.
4 Add the following style rule below your figure rule:
figcaption {
text-align:center;
font:italic 0.9em Georgia, "Times New Roman", Times, serif;
}
Save your HTML and CSS files and preview your page in the browser. This centers the caption and styles the text. You’ll now add the new <time> element to help logically mark up your pages.
5 At the beginning of the article, locate the paragraph indicating the author’s name and the date posted:
<p>By Cheri White, <span class="posttime"> posted December 21, 2012</span></p>
The problem with this format is that you can’t indicate the time and date of the post in a format readable by a computer system. HTML5 adds the <time> element to help future web applications, such as calendars, make use of the data.
6 Add the following code:
<p>By Cheri White, <span class="posttime"> posted <time datetime="2012-12-21">December 21, 2012</time> </span></p>
The datetime attribute is formatted by year, month and day and is not required, but it addresses the problem of having computer-readable data on a web page.
Revisiting familiar HTML elements
In addition to the new elements covered in this lesson, HTML5 redefines some of the existing HTML 4 elements to make them more useful. There are several elements that have been available for use in HTML for years, but are used infrequently. In some cases, the elements were not consistently styled in browsers and people did not use them. In other cases, the reason for using the tag changed over time. The best examples are the elements <b> and <i>. In the early days of HTML, <b> was used for bolding text and <i> was used to italicize text. With the advent and use of CSS, these tags were no longer used because they conflicted with the idea that HTML was intended for structure, not style. The preferred alternative for these tags are the <strong> tag instead of the <b>, and the <em> tag instead of <i>. These two elements are more flexible and structurally based. For example, you can use the <strong> tag not only to make font appear bold, but to make it uppercase, and the effect is the same.
HTML5 has redefined the <b> and <i> tags to make them consistent with the semantic intent of HTML.
1 In the first paragraph of the Blend-O-Matic article, locate the first instance of the product name Blend-O-Matic 3000 and add the following code:
<p> All blenders are created equal right? Start with a base unit and a motor, blades to spin and chop, and a jar for your ingredients. Well not so fast. The <b>Blend-O-Matic 3000</b> gives you features...
The W3C specification states that the <b> element “represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.”
You can find more information at http://developers.whatwg.org/text-level-semantics.html#the-b-element.
2 Locate the last paragraph, find the phrase “Never, ever start the blender without the cover on!” and replace the <b> tags around the phrase:
<p>There is one major flaw with this blender. <strong> Never, ever start the blender without the cover on! </strong> In our tests...
The W3C specification states that the strong element “represents strong importance for its contents.” In this case, the content is a warning, so you can use this tag. The default styling for both tags is the same, so you will set a style for the <strong> tag to make it more conspicuous.
3 In your base.css file, add a new style at the bottom of your stylesheet as follows:
strong {
font-weight:normal;
color:red;
}
By setting the font-weight to normal, you override the default bolding, then you add the color red. All <strong> elements will now be styled the same way.
4 Save your HTML and your CSS file and preview in the browser.
The <strong> element is used to signify importance for the content.
The <i> element has been redefined in much the same way. The W3C states that <i> represents “a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.” This contrasts with the <em> tag, which “stress[es] emphasis of its contents.” A simple way to distinguish the two is that the <em> element changes the meaning of the word, while the <i> element does not.
5 Save your HTML and CSS files. You are done with this lesson.
Self study
1 There are additional HTML5 elements not covered in this lesson. Recall that the HTML5 specification will be finalized in the year 2014. For up-to-date resources, see http://html5doctor.com. For updates to the specification, see the primary sources for the HTML5 specification at http://developers.whatwg.org/.
2 You can also download the HTML5 outliner at http://code.google.com/p/h5o/ and install one of the bookmarklets if it is supported by your primary browser. Save a copy of the page and add new sections, articles, and different levels of headings to see how the outline changes.
Review
Questions
1 True or false; HTML5 allows the use of only one <header> and one <footer> element per page.
2 What is sectioning content in HTML5? Name the four elements grouped within this category.
3 Define the <aside> element and give examples of the two main ways it can be used.
Answers
1 False. The <header> and <footer> elements can be used multiple times on a page. For example, you can have a site-wide header or footer and a section header or footer.
2 Sectioning elements in HTML5 define the scope of headers and footers, and are used to logically divide the areas of an HTML document. Sectioning elements also start new sections within a HTML5 document outline. The four sectioning elements are <section>, <nav>, <aside>, and <article>.
3 The <aside> element represents content, often called the sidebar, when it is separated from the content around it and used in the main context of a page. When used within a <section> element, the aside presents content vaguely related to the surrounding content, such as a pull quote.