HTML and CSS Reference
In-Depth Information
Now you can expand the sample page with
<section>
elements to produce the output
shown in Figure 1-6:
<body>
…
<article>
<header>
<hgroup>
<h1>Our first new Article</h1>
</hgroup>
</header>
<section>
<h1>Section 1</h1>
<p>Some details about section 1</p>
</section>
<section>
<h1>Section 2</h1>
</section>
</article>
…
</body>
FIGURE 1-6
Using the
<section>
element within an
<article>
element
When you view this page in the browser now, you might notice something quite interesting.
The
<h1>
elements inside the
<hgroup>
elements are rendering differently from the previous
<h1>
elements in the same article. Considering that you haven't applied any styles to this
page yet, you might expect that all
<h1>
elements would render in the same style (for ex-
ample, the same font size) as the
<h1>
element in the
<article>
element. However, when you
render the page in the browser, you can see that this isn't the case. This is because of the way
the document parser in the browser works through the document to determine the implied
hierarchy of the headings, also called the document outline. You see more of this when you
learn about screen readers later in this lesson. For now, focus on the
<aside>
element.
Search WWH ::
Custom Search