HTML and CSS Reference
In-Depth Information
The new
<article>
element is used to represent a self-contained section of a web page. A good example
of this is a blog post. You can use the
<article>
element to wrap each of the separate posts that are displayed on
a blog home page, for example. The idea behind the
<article>
element is that if you removed all other content
on the page, the content within the article element should still make sense standing alone.
The
<article>
element can also have a
<header>
and a
<footer>
element nested within it. In the follow-
ing example, the article title is placed within the
<header>
element and the author's name is placed within the
<footer>
element.
<article>
<header>
An Example Article
</header>
<div>
Some text content that makes up the body of the article.
</div>
<footer>
By Joe Balochio.
</footer>
</article>
The
<section>
and
<article>
elements are fairly similar, and it's easy to get confused about when to use one
over the other. A simple rule is that you should use the
<article>
element if it would make sense for the content
to be syndicated in something like an RSS feed. If your content doesn't meet this rule, use a
<section>
element
instead.
An
RSS feed
is a standardized format used to distribute frequently updated content such as blog posts or news
headlines. Computer programs such as Google Reader or the popular app Reeder can read these feeds, enabling
users of these programs to be kept up to date with the latest content.
So far in this chapter, you have been working on building the parts of your page templates that users will actually
see. In the next section, you learn how to embed information in your templates that is solely for use by web browsers
and other computer programs—the under-the-covers stuff.
Extending the <head> with Metadata
Chapter 1 explained the
<head>
element and how it can be used to specify information about the page, such as the
page title. You can provide a lot of other information to computer programs in the
<head>
, using the
<meta>
ele-
ment. In this section, you learn some uses of the
<meta>
element, adding metadata to your page templates as you
go.
Working with <meta> Elements
