HTML and CSS Reference
Each of these tags is intended to identify a specific type of content. The tags all work together; you
can have one or more <article> tags within a <section> , each of which might have a <header>
and a <footer> tag. The following sections take a close up look at each of the major HTML5 tags.
In addition to the major semantic tags, there is another tag that is less structural
in nature, but which is intended to be used with highly targeted content: <time> .
This tag is discussed in the section on the <article> tag.
The <section> tag is designed to designate a grouping of related content. If you were working with
books, a chapter would be a section. A web page can have several sections, such as an introduction,
current news, and special announcements. Use the <section> tag to separate major portions of
your web page.
In the earlier example code, the <section> tag would be used to replace the <div> tag with the
mainContent id , like this:
<h1>Welcome to Our Company Website</h1>
<p>We Make Great Stuff</p>
<p>Our stuff is the best stuff around. Nobody makes stuff like our stuff.
Best of all, our stuff is the least expensive stuff you'll ever see -
which makes our stuff a terrific value.</p>
<p>When you need stuff, come see ours! You'll be glad you did!</p>
If you need to identify a <section> tag for CSS styling purposes, you're free to use
an id or
class attribute, as with this example: <section id=”mainContent”> .
For related content, whereas <h1> tags were generally advised to be used once per page, <section>
tags allow each content group to have its own hierarchical headings — and, as you see later, its own