47
exaMpLe
HTML5 LayouT
444
HTML5 LAYOUT
The header and footer of the page sit inside
<header>
and
<footer>
elements. The courses are grouped together inside a
<section>
element that has a
class
attribute whose value is
courses
(to
distinguish it from other
<section>
elements on the page). The sidebar
sits inside an
<aside>
element.
Each of the courses lives inside an
<article>
element, and use the
<figure>
and
<figcaption>
elements to contain an image. The
headings for the courses have subheadings, so these are grouped inside
an
<hgroup>
element. In the sidebar, the recipes and contact details are
placed inside separate
<section>
elements.
The page is styled using CSS. The only difference is that our selectors
are using the new HTML5 elements to allow us to create rules that
target those elements. In order for the CSS to work in versions of IE
before Internet Explorer 9, the HTML5 page contains a link to the
HTML5 shiv JavaScript (hosted on Google's servers) inside a
conditional comment.
This example shows a cooking site built using
new HTML5 elements to describe the structure
of the page (rather than just grouping items
using
<div>
elements).
