Nav Links... do I use <UL> or just <a>'s?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
FunkyDude
Forum Newbie
Posts: 8
Joined: Mon Dec 15, 2008 5:19 pm

Nav Links... do I use <UL> or just <a>'s?

Post by FunkyDude »

I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE.

My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>?

Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop)

Code: Select all

<html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
 
<body>
<div id="links">
    <ul>
        <li><a href="#">links</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">three</a></li>
    </ul>
</div>
 
<div id="links2">
 
        <a href="#">links</a>
        <a href="#">link 2</a>
        <a href="#">three</a>
 
</div>
</div>
</body>
</html>
Attachments
bullet.jpg
bullet.jpg (365 Bytes) Viewed 617 times
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Nav Links... do I use <UL> or just <a>'s?

Post by kaszu »

I do it because it is a list and usually I need that extra element.
User avatar
nor0101
Forum Commoner
Posts: 53
Joined: Thu Jan 15, 2009 12:06 pm
Location: Wisconsin

Re: Nav Links... do I use <UL> or just <a>'s?

Post by nor0101 »

It's done for several reasons. One of these is the desire to use XHTML as semantically as possible. Marking up your content as a list communicates the grouping of your data. Another reason is out of consideration for those who experience the internet via adaptive technology like screen readers and the like. For some organizations (such as publicly funded educational institutions) these considerations are mandated by law. A good question to ask is: "If I were to view my site without CSS or images, would it still make sense?"
Post Reply