Getting Started - CSS3 Foundations - page 20

The header <header> is given the ID header , the class group and the role banner . IDs, classes, roles, and
other additional information within element tags are known as attributes . In CSS, you can select elements based on
their attributes.
The role attribute lets screen readers (software used by people with disabilities such as visual impairment) know that
this particular section of the page is a banner, defined as being “a region that contains mostly site-oriented content,
rather than page-specific content” ( www.w3.org/TR/wai-aria/roles#banner ). The roles model is another
specification being developed by the W3C, which aims to improve the accessibility of web pages for persons with
disabilities. For more information, see www.w3.org/TR/wai-aria/ .
The header also contains the Cool Shoes & Socks logo and site navigation.
Underneath the header is a product showcase :
<div class=”showcase”>
<img src=”images/banner-trainers.jpg” alt=”Some of our cool trainers” />
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
</a>
</div>
The product showcase contains one large image and a call to action that links to more information about the product.
A call to action (CTA) is an area of the page that aims to grab the attention of web page visitors and lead them
through to achieving a particular goal. The product showcase is the place where Cool Shoes & Socks can show off
its best products and latest offers; the CTA aims to lead visitors through to finding out more information about the
products and potentially buying some shoes or socks. Employing calls to action is a classic technique used across
many sites on the web. A CTA often stands out from the rest of the page to draw visitors' eyes to it, leading them to
complete an action. Using CSS, you can make this button stand out from the rest of the page to achieve that goal.
After the product showcase is the main content of the page. First, look at the main structure of this section:
<div id=”main” class=”group”>
<div id=”content” role=”main”>
...
</div>
<div class=”sidebar” role=”complementary”>
<aside>
…
</aside>
</div>
</div>
The line <div id=”main” class=”group”> contains the content of the page as well as a sidebar that holds
customer testimonials, the latest blog posts and a newsletter sign up form. The preceding code shows only the struc-
ture of this main section. As you make your way through CSS3 Foundations , you learn how to create columns, pla-
cing the content on the left, with the sidebar to its right. Again, this code uses role attributes to assist screen readers.
Finally, prior to the closing of the </body> and </html> tags, you see the pages footer:
<footer id=”footer” role=”contentinfo”>
<ul class=”container”>