HTML and CSS Reference
In-Depth Information
As you can see, pseudo-classes—along with careful configuration of ids or classes, can
be a powerful tool for a Web developer.
One of the advantages of using CSS for page layout involves the use of semantically
correct code. Writing semantically correct code means using the markup tag that most
accurately reflects the purpose of the content. Using the various levels of heading tags for
content headings and subheadings, or placing paragraphs of text within paragraph tags
(rather than using line breaks) are examples of writing semantically correct code. This
type of coding is a step in the direction to support the Semantic Web. Leading Web
developers such as Eric Meyer, Mark Newhouse, Jeffrey Zeldman, and others have
promoted the idea of using unordered lists to configure navigation menus. After all—a
navigation menu is a list of hyperlinks—semantically speaking it's a much better fit than
coding hyperlinks in separate paragraphs or using the
display:block
property on
anchor tags. Configuring navigation with a list also helps provide for accessibility. Screen
reader applications offer easy keyboard access and verbal cues for information organized
in lists, such as the number of items in the list.
Focus on Accessibility
WWW
Figure 7.8 shows the top portion of a revised twocolumn.html (the page you created
in Hands-On Practice 6.6). In this version the CSS declaration for the
navBar
class
was changed (
display:block
and
margin:15px
were removed), the left column was
widened a bit, and the navigation links were coded in an unordered list. An XHTML
code snippet follows:
<div id="leftcolumn">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="spring.html">Spring</a></li>
<li><a href="summer.html">Summer</a></li>
<li><a href="fall.html">Fall</a></li>
<li><a href="winter.html">Winter</a></li>
</ul>
</div>
Figure 7.8
An unordered list to
configure the
navigation menu
Search WWH ::
Custom Search