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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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