HTML and CSS Reference
In-Depth Information
Listing 15-8.
Correct Document Wrapper
<body>
<div id="wrapper">
<!-- Page content -->
</div>
</body>
Overuse of header
Some web designers incorrectly use
header
elements as containers of headings (Listing 15-9).
Listing 15-9.
Too Many Headers
<article>
<header>
<h2>Blog post title</h2>
</header>
<!-- Article 1 content -->
</article>
<article>
<header>
<h2>Blog post 2 title</h2>
</header>
<!-- Article 2 content -->
</article>
Code optimality can be achieved by omitting the header container around headings (Listing 15-10).
Listing 15-10.
Headings Without
header
<article>
<h2>Blog post title</h2>
<!-- Article 1 content -->
</article>
<article>
<h2>Blog post 2 title</h2>
<!-- Article 2 content -->
</article>
Wrap All Lists in nav
The
nav
element is ideal for major navigation blocks only and should not be used as a container of all unordered lists.
Incorrectly Used figure Elements
Some web designers incorrectly use
figure
elements as containers of
img
elements. However, image such as
logos are not figures, and a figure can be not only an image but also a piece of prose, a code block, a chart in SVG,
and so on.
Search WWH ::
Custom Search