I have seen examples where people use images within UL/OL LI tags. I have noticed the use of this method a lot in Jquery.
I’m attempting to build a site geared quite heavy towards SEO, crafting as many key phrases and words within the content body as possible.
In SEO making full use of header texts is a given, but I was wondering if using headers within a li tag is deemed acceptable not only by search engines such as Google, Bing etc but also in the eyes of web standards.
Any feedback is welcomed.
Thanks
To clarify…
Most important to me are web standards. So if I put header tags (h1,h2, etc) within list (li) tags would this code be valid and correct markup?
H1 tags should be used sparingly. In fact I use it only once for my header or logo at the top as link text and assign a background to that h1 tag.
Not sure why you’d want to use header tags in a list. I thought the new Google algorithms said link text is just as important these days. Alt tags and title tags as well.
So if you are using your list for navigation I would avoid using any header tags. I would think the benefits you are seeking via the header tag hierarchy is minimal.
Save them for what they are intended for. Headers.
But as Gary said they should validate if used correctly.
Also remember that inundating a page with keywords and SEO text may penalize you. Google these days is looking for helpful and relevant content on a site, not a bizzillion keywords on a page.
Headers are used quite a bit in the so-called Mega dropdowns. Those usually have a large submenu with groups of sub-lists, and often those sublists have headers.
You don’t need a div, but I tend to use them:
<li><a href="somewhere">main-level link</a>
<div>
<h#>Foobars</h#>
<ul>
... a list of foobars...
</ul>
<h#>ManChoos</h#>
<ul>
... a list of manchoos...
</ul>
...etc
</div>
</li>
The div is really just an extra hook for images or whatever.
Heading tags mark the start of a section… So I don’t really see anything wrong with that so long as there is a section to be started…
Using it inside nested LI’s though I kind of question it as it’s not so much a section of content as it is the nesting of a list - so I would question the need for using the extra tags in the first place. This would be particularly true of a dropdown menu where it would make little or no sense - and from a SEO perspective uprank words that might have little relevance to the CONTENT of the current page.
Honestly, I’d avoid doing it on the grounds of being a waste of markup, the possibility of unintentionally upranking words in the search engines that you don’t want to uprank, and that logical heading orders could end up very broken if you don’t make EVERY LI content a heading tag… which makes it completely inappropriate.
I REALLY wouldn’t do it if in source order your lists would appear before the heading tags on your primary content!
Remember the basic rules of heading tags - One H1 per page and each lower order tag should be the start of a subsection of content to a higher order tag preceding it. If there is no content below it, it probably shouldn’t be a heading tag. See the dumbasses who do things like “H1>h2>h2>P” over and over for things like a news item.
<h#>Product List</h#> (as opposed to the main site menu list, the By Price list, whatever other lists)
<ul>
<li><a href="">DOGS</a>
<!--div optional sandbaggery-->
<h#>Beds</h#>
<ul>
<li><!--convoluted example-->
<h#><a href="">Poochie Peach 30" plaid bed</a></h#>
<p><img src="thebedphoto" alt=""> Product description, size, pattern, colours, price, made in India</p>
</li>
...5 different makes/models for big dogs
</ul>
<ul>
...several rat-dog beds...
</ul>
<ul>
...hippy-friendly hypoallergenic hemp doggie beds...
</ul>
<h#>Bowls</h#>
<ul>
..stainless steel dog bowls...
</ul>
<ul>
... bowls with stupid cartoon dogs on them...
</ul>
<h#>Collars</h#>
<ul>
...13 different coloured Parid-Hilton sparklie doggy collars to embarrass your dog...
</ul>
<ul>
...etc...
</ul>
<!--/div optional sandbaggery-->
</li>
<li><a href="">CATS</a>
...
</li>
..etc...
</ul>
I don’t use headers in simple lists, but if the lists are large chunks of content with more lists inside then they point out groupings instead of having to call stuff “Dog Beds” “Dog Bowls” “Dog Collars” then “Cat Beds” “Cat Bowls” “Cat Collars” and so on.
Well, structurally you have made CATS content of COLLARS… which is why CATS would end up needing to be inside a equal level heading tag to DOGS, which should also be a heading tag to group the tags below it… Which would end up one hell of a lot of heading tags on list… when they are line items and their sub content. Saying LI basically SAYS it’s the item in the first place and any tags are subsections of the text - so you don’t NEED heading tags in the first place.
To be brutally honest… I wouldn’t be USING list tags on that at all… excepting perhaps the innermost elements and even then.
To me list items are for short bullet points, single small elements - NOT as wrapping containers for entire blocks of multiple block-level tags. If you are using headings you are already implying ALL the semantic meaning you need on those.
<h2>Product List</h2>
<h3><a href="\\dogs">DOGS</a></h3>
<h4>Beds</h4>
<h5><a href="\\dogs\\beds\\30plain">Poochie Peach 30" plaid bed</a></h5>
<img src="thebedphoto" alt="Poochie Peach 30" plaid bed" />
<p> Product description, size, pattern, colours, price, made in India</p>
<h5><a href="\\dogs\\beds\\80suede">Fatass Brown 80" suede bed</a></h5>
<img src="thebedphoto" alt="Fatass Brown 80" suede bed" />
<p> Product description, size, pattern, colours, price, made in India</p>
<h4>Bowls</h4>
<!-- same h5/img/p format -->
<h4>Collars</h4>
<!-- same h5/img/p format -->
<h3><a href="\\dogs">CATS</a></h3>
Provides ALL the semantic meaning you need without the extra tags. You can take the meaning of a “LIST” too far, and applying headings to the list is usually a good indication it shouldn’t be in a LIST tag in the first place. (I MIGHT be tempted to throw some DIV around the innermost, but that would just be to contain the IMG which I’d probably be floating)
I mean, think about what a screen reader would do to your example… think about how that looks when CSS isn’t present or what LYNX would do it it. You turn off CSS your example ends up pure gibberish.
But that’s part of what makes my approach to coding different from others, I start out pretending CSS and presentation doesn’t even exist when making my markup.
If I WERE to use a list, I’d be wrapping my above code in the lists for each level… But frankly I think that’s a waste of markup and applying non-semantic meanings through tag abuse.
Gary, my bad. I didn’t look at your example. I was making an assumption that he wanted to use the headers in a list:
<li><h#><p>blah blah
I do use them in FRONT of a list.
<h#>blah
<ul>
<li>...
but I tend to leave the inside of the list alone. Though it isn’t necessarily wrong I agree with Shadow that it makes for extra bloated and unnecessary code.
that he wanted to use the headers in a list: