Links on list items or anchors?

[justbobf]

Since HTML 5 and CSS 3 allows us to put links on list items, or indeed, around any number of items, and we can change the hover state oh the list item, should we consider putting links around list items now, instead of on the text?

For example, I created a simple unordered list and applies this CSS to it:

* { margin:0; padding:0; }
ul {
list-style-type: none;
margin: 20px 0 0 20px;
}
ul li {
float:left;
padding: 15px 30px;
text-decoration: none;
color: #000;
background-color:#7EE;
margin-right: 2px;

}
ul a {
text-decoration: none;
}
ul li:hover {
background-color: #F9F;
}

It works just as well as when a link, padding, and all the rest is applied to the text. Does anyone know which browsers this would be compatible with? It is with the current Safari and Firefox. Any reason not to style a navigation list this way?

[TheDoc]

I’m not really sure what you’re asking. It sounds like you’re trying to do this:

List Item

Which will not validate, even under HTML5.

[furrball1383]

I think what he means is that he wishes to put the styling onto the list items themselves instead of on the links. not put the list within the link

[joshuanhibbert]

@furrball1383 I read it as @TheDoc did, and he is correct; it won’t validate and it isn’t semantic.

[Author]

Posts