Semantic HTML / SEO Question

On a couple of my sites, I have a bunch of links with images as a background. Is it semantically incorrect / bad SEO to just list a bunch of anchor tags without putting them inside of an unordered list?

If I skip the ul>li it saves me a bunch of markup and in some cases allows me to vertically center nested images via display:inline-block which saves me having to use javascript.

Here’s a couple of examples of what I’m talking about:

1. On the Sound Rezn site at the bottom where it says "Got A Question", the buttons underneath the "Got a Question" area are simply anchor tags displayed as block elements with nested h2 and p tags (visible text is actually embedded in the image, I just added h2 an p text for SEO).

2. Here’s a similar situation on our Ratio Christi site. In this case, in the "Ratio Christi Chapters" section, by using only anchor tags I was able to use display:inline-block in combination with vertical-align to center the images vertically in the links. When I initially had it setup with ul>li I had to use javascript to center the images vertically.

What do you guys think? Should all groups of links be placed in ul>li, or is it ok to just group them together outside of a list structure?

Also, does nesting p’s and h2’s in an anchor/link make sense semantically? Is it good for SEO?

-matt

For h tags I really don’t think they should be used in anchors, I personally use the h2 as the page title, h3’s as the sub titles and h4’s as the sub h3 titles.

To do it semantically if it is a list item ( IE: how you have it ) then it should be in a list item, same as if it’s tabular data it should still be displayed in a table.

As for the SEO I’m no expert but my understanding of it is that if you use h1 it is the most important part of the page, h2’s the second most, h3’s etc etc, google put’s some weight into correctly coded pages but I’m not sure how much.

All in all you can still achieve what you want in a list item by giving them different classes and setting the class to display the background image, correct it is a little more markup but well worth it ;o)




OHHHH and don’t take my word for it, I might be some loony who knows nothing ;o)

Lists or no lists have nothing to do with SEO. Inside of lists or no, you can still use inline-block and vertical-align to position links and images.

<h> tags are for headers, and search engines expect them to be such. Whether having one inside of <a> tags has an effect I don’t know, but it doesn’t make much sense. Same with <p> tags inside of <a> tags. I’m not even sure if that will validate. And while validation isn’t a one-to-one correlation with SEO effectiveness, it’s a good rule to follow.

Hey guys thanks for the responses. A couple of questions. How would you guys handle these specific scenarios?

On the above mentioned Sound Rezn page, each button (Today’s Show details", "Featured Resource" etc.) has legitimate h2 level text - these are primary items on the page. There is also additional text that needs to be included in the buttons that is semantically subordinate to these headers (i.e. "Learn More"). Also, the entire link-box has to be clickable.

If I do ul>li, how do I differentiate between "Featured Resource" and "Today’s Feature" to show that one line of text is more significant than the other? If I remember correctly, some versions of ie choke on certain non-li tags in a ul.

There is a similar scenario with "The Apologetics Bookstore" link. The text in the top section (white) should have markup that makes it stand out (like an h2) whereas the text in the blue area is more of a paragraph-level type of text.

Second, on the above mentioned Ratio Christi page, how would you handle vertical-align on the various chapters? These images are generated dynamically by users with the only parameters being that the images must be 103px width max and 50px height max. With a bunch of a’s and display:inline-block this is easy. However, when placing these images inside ul>li, the only way I could figure to center the images vertically was with javascript. Thoughts?

Thanks for the input!

I have no answers to your questions, but a hint: Did you ever look at the Sound Rezn site using a 1024px-wide (or even smaller) viewport? You then have to scroll to the right to see all the content. But on the left, there is much unused space...

Funny you should mention that - I just happened to notice that issue last night when testing on Adobe Browser Lab. I was getting so mad because it (Adobe Browser Lab) was rendering FF 3.0 on XP differently than FF 3.0 on one of my desktops at home. At first I thought Adobe’s service was just screwed up, but then I finally realized it was the resolution.

I stayed up all night trying to fix the issue but couldn’t make it work. This afternoon when I woke up I finally figured out a solution. Try it now and let me know if it’s still an issue.

The thing that’s driving me nuts now is FF 3.0 on Mac. It’s the only browser/OS that’s messing up my main menu.

BTW - on the Ratio Christi site, I did figure out a way to use links in combo with ul>li and still use display:inline-block vertical align, so I was able to utilize better semantic markup plus remove a javascript dependency.

Try it now and let me know if it’s still an issue.

It’s okay now (Firefox 3.6.3 under Windows).
(Sorry that I didn’t check it earlier.)

Semantic, valid markup is mostly independent of SEO but SEO can benefit from good markup as it makes it easier for bots to parse the content. Anchor tags are inline elements so placing a block element in an inline element is not correct but I don’t know what impact it would have on the SE score. In a list of links where one is more important than the other from a semantic POV you could add a class to make it more or you could put the H3 element inside the LI since Li is a block element and it can contain whatever you want.

As for savings on markup you could go with HTML4.01 and omit all the non-required closing element tags.

Personally I don’t worry too much about shaving markup since it won’t make a significant overall difference if it is pretty clean.

Worth looking at lists from an accessibility point of view. Screen readers have 2 ways of navigating a page, 1 is jumping through headers, the other is jumping through lists.

If your nav is a list, screen reader users can jump straight to it. If its just floating randomly somewhere on the page, they have to listen through the entire page (which believe me is horribly painful!).

Thats why navigations should be put into lists and then styled appropriately via CSS.