HTML and CSS Reference
In-Depth Information
Next, the “Article Synopsis” would not make sense on its own and is related to the
article it's nested inside, so it is best wrapped inside an
aside
. Lastly, despite the con-
cerns about using multiple
h1
tags, we'll convert all headings to
h1
so you can see what
that looks like.
The end result looks like this:
…
<body>
<h1>Site Title</h1>
<nav><h1>Main Navigation</h1></nav>
<section><h1>Featured Content</h1>
<article><h1>An Article</h1>
<aside><h1>Article
Synop-
sis</h1></aside>
</article>
</section>
<section><h1>Other News</h1>
<article><h1>Another
Article</h1></article>
</section>
</body>
…
Much better! This markup is now much less generic. The navigation can be easily
identified; we see there is a featured article on the page, a brief synopsis on the side, and
another article in another section of the page. At the moment, there is no content (para-
graphs, figures, and so on) other than the headings in the separate sections, but there
easily could be! This is just establishing the outline of the document.
Note
In this example, the
aside
has been nested inside an
article
, which is fur-
ther nested inside a
section
. If the aside had instead been directly in the
body
ele-
ment, it would be expected to be related to content on the whole page, not just one part.
For a web page with minimal content, that may be OK, but on a web page filled with
content, grouping and/or nesting
aside
s together with their related content will most
likely be necessary.
Search WWH ::
Custom Search