HTML and CSS Reference
In-Depth Information
Q:
We are doing a lot of work to add
elements to the page, and it looks exactly
the same as it did before! Tell me again
what all this is getting me?
A:
We've replaced a few elements and
added a few elements, and in the process,
we've added a lot of meaning to our
pages. The browser, search engines, and
applications for building web pages, can
—
if
they want
—
be a lot smarter about how they
handle different parts of your page. And
your page is easier for you, and other web
developers, to read. Even though your page
looks the same, it's a lot more meaningful
under the covers.
Q:
What's the difference between a
<section> and an <article> again? They
seem similar to me.
A:
It is easy to get confused about which
element to use, so we're glad you asked.
The <section> element is more generic than
<article>, but it's not as generic as <div>. For
instance, if you're just adding an element so
you can style the page, then use a <div>. If
you're adding an element to mark up content
that forms a well-defined section of related
content, then use <section>. And if you
have some content that can be reused or
distributed independently from the rest of the
content on the page, then use <article>.
Q:
Should every <section> and every
<article> always have a <header>?
A:
Most of the time, your <section>s and
<article>s will have a <header>, or at least a
heading (like <h1>). Think about it: content
within an <article> element can be reused
elsewhere, so chances are, that content will
need a header for descriptive or introduction
purposes. Likewise, content with a <section>
element is a group of related content in your
page, so it will typically have some kind
of header to separate and introduce that
section of content.
Q:
Should we use <header> only when
we've got more than one thing to put in
it? What if we've only got one heading
and nothing else?
A:
You can use <header> even if you
have only one heading to put in it. The
<header> element provides extra semantic
meaning that separates the header of a
page, a section, or an article from the rest
of the content. However, it's not required
that you always put your heading content in
a <header> element (that is, the page will
validate if you don't).
A quick interview with <div>
<div>'s feeling a bit left out…
Head First:
Hey
<div>
, we heard you've been feeling
really down lately. What's up?
come along that are simply for creating generic structure.
Head First:
Right! All these other new elements are
specifically for adding semantic meaning to pages, and
you're much more general purpose. You're what everyone
falls back on when they need table layout, for instance.
<div>:
In case you haven't noticed, I'm being made
mostly redundant! They're replacing me all over the place
with these new elements,
<section>
,
<nav>
,
<aside>
…
Head First:
Hey, Element-up; after all, I still see you
in Starbuzz handling the “tableContainer” and the
“tableRow”.
<div>:
That's so true!
Head First:
If you ask us, you were way overworked
before these new elements came along…isn't it time you
start enjoying your reduced workload?
<div>:
They haven't gotten rid of me completely yet,
but if they keep inventing new elements, it won't be long
before it's game over, man.
<div>:
You know, you make a good point. Maybe I
should close down shop for a while and see the world;
after all, I racked up a lot of frequent flyer mileage flying
around the Internet.
Head First:
The last time I looked, you were still in the
HTML specification. Web developers have all sorts of
special needs for adding structure to their pages and the
standards guys (and gals) have no interest in inventing
zillions of new elements.
Head First:
Hold on now, you can't just disappear; most
of the Web is relying on you…
Head First:
Hello?
<div>
?
<div>:
That's true, and I haven't seen any new elements
