HTML and CSS Reference
In-Depth Information
Incorrect Structure
Incorrectly used elements often violate the DOM model. Required elements should be provided, and nesting rules
should be followed. Moreover, the document structure should be maintained by using correct containers and
elements in the proper manner. Take a look at the code in Listing 15-5.
Listing 15-5.
List Items Without Structure or Semantic Meaning (Incorrect)
- first item <br />
- second item <br />
- third item <br />
Since the previous rows are items of a list, they evidently should be collected into an unordered list (Listing 15-6).
Listing 15-6.
The Correct Markup for Listing 15-5
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
The default bullets provided by the
li
elements can be changed in CSS to an arbitrary character or image
(see the section “Styling Lists”). CSS completely separates presentation from structure; thus, any elements can be
arbitrary styled.
Incorrect HTML5 Structuring
Many of the new structuring elements of HTML5 are often used incorrectly, partly due to code distribution in blog
posts that are not standard-compliant, and described elements and attributes before the finalization of the HTML5
specification.
Using section as Wrapper
With the introduction of
section
and
article
, there is a misbelief that the
div
elements should be completely
eliminated (Listing 15-7).
Listing 15-7.
The
section
Element Used Incorrectly as Document Wrapper
<body>
<section id="wrapper">
<!-- Page content -->
</section>
</body>
In fact,
div
is still the right element to be used as the document wrapper as well as the generic wrapper of
separate document parts (Listing 15-8).
Search WWH ::
Custom Search