As long as this thread has been necro'd anyway, it's time to stop the madness.
You have A elements. Style
them. Better yet, get all of that junk out of the paragraph it's living in right now -- it is most assuredly
not a paragraph -- and put it into a list. And there is no good excuse for using inline styles on an (X)HTML page (although there may be -- I remain unconvinced, but it is a remote possibility -- an excuse for inline styles in text data stored elsewhere). For a single, stand-alone page (and for testing/development) putting the styling information into a STYLE element on the page is acceptable. For most purposes, though, a separate CSS file is a much, much better idea (it makes site-wide updates easier and the user only has to download it once, saving both you and your users bandwidth and time).
The menu is a list of links, so it should be a list. Specifically, it should be an unordered list (a UL element), with the ARIA landmark role of
menu. The items in the list should have the ARIA role of
menuitem. That makes the page much more accessible to users with disabilities --
and it makes it more accessible to search engines. (This, people, is where SEO starts.) You can style the list to appear as a menu bar rather than the default bullet list. There are many examples out there on the web (some actually correct); I will update this thread later with an example of how this page ought to look.
Speaking of accessibility (and usability), it's a really bad idea to change the link colours in body text. It's okay if your navigation areas (menus, footers) look different, but please leave the blue/dark magenta values alone unless your page background is something that would make the links difficult to see.
There is also no good reason to use XHTML anymore. It's a failed experiment, not "the wave of the future". XML isn't a document markup language, it's a data container, and free text doesn't fit the format. (Most sites/pages using XHTML would actually fail to display at all if the browsers really played by the rules. It's only
Postel's Principle that keeps most of the web working.) Use HTML 5 unless you need to support older browsers; if you need to support older browsers (IE7 and below), HTML 4.01 Strict is the right doctype.
HTML:
<!DOCTYPE html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>index</title>
<style>
body {
background-color: rgb(0, 153, 0);
color: rgb(0, 0, 0);
}
#nav {
list-style: none;
padding: 0;
text-indent: 0;
margin: 1em 0;
}
#nav li {
float: left;
}
#nav a, #nav span {
display: block;
padding: 0.5em 1em;
background-color: white;
text-decoration: none;
}
#nav:after {
/* This is a "clearfix" for the menu. */
/* It inserts an unfloated block-level element */
/* after the last list item */
display: block;
clear: both;
content: "";
}
</style>
</head>
<body>
<h1>Logo Goes Here</h1>
<!-- the main navigation menu has been transformed into a list -->
<ul id="nav" role="menu">
<li class="nav-entry" role="menuitem"><span class="nav-nolink">Home</span></li>
<li class="nav-entry" role="menuitem"><a href="about.html">About Us</a></li>
<li class="nav-entry" role="menuitem"><a href="products.html">Products</a></li>
<li class="nav-entry" role="menuitem"><a href="contact.html">Contact Us</a></li>
</ul>
<p>Text</p>
</body>
</html>
That's just a basic means of creating the menu-like structure on a stand-alone page. Ideally, you would want to identify the major structural parts of your page (the header, the main navigator, the footer, etc.) and mark them up properly. HTML 5 includes proper sectioning elements, HEADER, NAV and FOOTER, but older browsers won't know what they're for. You can make them act properly using JavaScript; there are examples out there on the web like
Modernizr. (The hipster web devs call it an "HTML5 shiv", which is wrong on so, so many levels. A "shiv" is a knife, usually homemade or illicit, used as a weapon rather than as a tool. This is a "shim"; something used to make parts fit together properly.)
The important part here is that your list of links is now a list of links, and it has been identified as a menu for screen readers and search engines. And you now have styling "hooks" to take control of all of them at thee same time. You would ordinarily want to use the :link and :visited pseudo-selectors to make menu items the same colour whether they've been visited or not (menus are special; all other links should appear different after they've been visited) and the :hover and :active pseudo-selectors to give the user some indication that they can click or have clicked on the menu items (touch pads don't do "hover").
