HTML and CSS Reference
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
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
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
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
<!-- Page content -->
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).