Enhancing Web Page Structure - HTML5 - page 245

<p>by Simon Stuffy, CEO of Good Stuff, Inc.</p>
<time datetime=”2011-03-31” pubdate=”pubdate”>March 31, 2011</time>
</header>
If the datetime=”2011-03-31T14:30:00-04:00” attribute in the <time> tag is used to define a date, the year-month-day format must
be used. Should you want to specify a time as well, you add the letter T to the date, followed by the
time in a 24-hour representation and end with a time zone, designated as an offset to Greenwich
Mean Time (GMT). For example, if I wanted to note the exact time it was published — say at 2:30
p.m. in New York (Eastern Standard Time) during Daylight Savings Time (-4:00 GMT) — I'd
change the code to this:
<time datetime=”2011-03-31T14:30:00-04:00” 2011-03-31T14:30:00-04:00 ” pubdate=”pubdate”>March 31, 2011 at
2:30 PM in NYC</time>
As you can see, the text within the <time> tag can be as precise or as subjective as you want.
You may be wondering about the pubdate attribute. When included within an <article> tag, the
pubdate attribute indicates that the <time> value is the publication date of the <article> , or — if
<time> is not in an <article> tag — the publication date of the document.
defining asides
Many printed pages contain a sidebar with content that is related to the primary subject matter, but
not critical to it. In HTML5, this additional content is best enclosed in an <aside> tag. Here's how
the example code, previously wrapped in a <div> tag with an id of sideContent , looks with the
<aside> tag:
<aside>
<h2>People Like Our Stuff</h2>
<p>Here's what people have to say about our stuff:</p>
<p>It's really great stuff!! <br /> - Joe Schmoe</p>
<p>Wow! Super stuff! <br /> - Jane Schmain</p>
<p>The best stuff at the best price! <br /> - Bob Schmob</p>
</aside>
Other elements that are outside of the main content of the page, such as pull quotes, would also be
appropriate choices for the <aside> tag. The <aside> tag can also be used to contain secondary
navigation lists and advertisements.
including Footers
The final semantically related HTML5 tag is the <footer> tag. As you might suspect, the <footer>
tag is typically placed at the end of your content. Typical material for this tag includes related links,
copyright information, and contact info. Here's the example code with the new <footer> tag in place:
<footer>
<p>Copyright &copy; 2011 Good Stuff, Inc.
</footer>