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:
<h1>Site Title</h1>
<nav><h1>Main Navigation</h1></nav>
<section><h1>Featured Content</h1>
<article><h1>An Article</h1>
<section><h1>Other News</h1>
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