HTML5 and CSS3, Second Edition

(singke) #1
To put it another way, a <section> is like the sports section of a newspaper.
The sports section has many articles, each one able to stand on its own. Each
of those articles may again be divided into its own bunch of sections.

Some sections of a web page, like headers and footers, have proper tags. A
section is a rather generic element you can use to logically group content.

Each of our articles will have a header, some content, and a footer. We define
an entire article like this:

html5_new_tags/index.html
<articleclass="post">
<header>
<h2>How ManyShouldWe Put You DownFor?</h2>
<p>Postedby Brianon
<timedatetime="2013-10-01T14:39">October1st, 2013 at 2:39PM</time>
</p>
</header>
<p>
The firstbig rulein salesis thatif the personleavesempty-handed,
they'relikelynot goingto comeback.That'swhy you haveto be
somewhataggressivewhenyou'reworkingwitha customer,but you have
to makesureyou don'toverdoit and scarethemaway.
</p>
<p>
One way you can keepa conversationgoingis to avoidaskingquestions
thathaveyes or no answers.For example,if you'resellinga service
plan,don'teverask “Are you interestedin our 3 or 5 year
serviceplan?”Instead,ask “Areyou interestedin the 3
yearserviceplanor the 5 yearplan,whichis a bettervalue?”
At firstglance,theyappearto be askingthe samething,and while
a customercan stillopt out,it'sharderfor themto opt out of
the secondquestionbecausetheyhaveto say morethanjust
“no.”
</p>
<footer>
<p><ahref="comments"><i>25 Comments</i></a>...</p>
</footer>
</article>

We can use <header> and <footer> elements inside of our articles, which makes
it much easier to describe those specific sections. We can also divide our
article into multiple sections using the <section> element.

Asides and Sidebars


Sometimes you have content that adds something extra to your main content,
such as pull quotes, diagrams, additional thoughts, or related links. You can
use the new <aside> tag to identify these elements.

Chapter 2. New Structural Tags and Attributes • 20


Download from Wow! eBook <www.wowebook.com> report erratum • discuss

Free download pdf