Grow your CSS skills. Land your dream job.

Last updated on:

Standard List Navigation

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Clients</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>

Comments

  1. Permalink to comment#

    Saving an extra step so you won’t forget to add title text:

    <a title="Home Page" href="#" rel="nofollow">Home</a>
    <a title="About Page" href="#" rel="nofollow">About</a>
    <a title="Clients Page" href="#" rel="nofollow">Clients</a>
    <a title="Contact Page" href="#" rel="nofollow">Contact Us</a>

    • Nick
      Permalink to comment#

      The title attribute makes annoying tooltips pop up saying the same thing the text says, it’s ugly, and it’s really not needed. It’s for information in addition to what’s there, using the title attribute here doesn’t provide any additional information. It’s used mostly for input and form elements.

    • Nick,

      the title attribute is annoying but essential – Google PR algorithms (and search engine) really “appreciate” websites that incorporate it in every < a > tag, especially in your main menu.

      Same goes for < img > tags and the “alt” attribute, though this case is different since it has an important functional role, replacing the image in case it does not load.

  2. Mike Sborer
    Permalink to comment#

    Please, how can I get this centered?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".