Semantic HTML best practices question

I have a question about semantic HTML. I have this list below

<ul id="globalnavsprite">
    <li id="globalnavlink1"><a href="#"><span>Link</span></a></li>
    <li id="globalnavlink2"><p><span>Active State</span></p></li>
    <li id="globalnavlink3"><a href="#"><span>Support</span></a></li>
    <li id="globalnavlink4"><a href="#"><span>Restoration</span></a></li>
    <li id="globalnavlink5"><a href="#"><span>Contact Us</span></a></li>
    <li id="globalnavlink6"><a href="#"><span>Careers</span></a></li>
  </ul>

I didn’t provide the CSS because I don’t think it’s necessary for the question, but let me know if it helps. I am using the sprite technique for my rollovers, and noticed that for the active state, all I needed was an empty <p> tag for the active state to be in effect.

But I wanted text in the list for SEO. So I wrapped those in a span tag which is defined in the CSS to throw the text off the screen with “position:absolute” and “left:-9999.” Note: I don’t have the link name added yet, so I know that “active state” isn’t going to be good for SEO in the final product.

My question is, for semantic purposes, am I supposed to make that a class, so that it can be added to the span as a class and the HTML will therefore “describe” what is happening?

I would suggest not moving text off screen, but covering it over by absolutely placing the spans over the text and having the images there. I also wouldn’t use the <p> for the current state, but just set the rollover state to appear when that link is current.

As Ralph said the Gilder Levin is a more accessible image replacement technique.

As far as styling the current item I usually use a strong element as it provide more emphasis (even if you don’t want it bold) and unlike using an a anchor it means the current item is not a link - which it shouldn’t be as that is bad for usability (no one likes clicking a link and loading the same page that they were already on).

Paul,
I used this technique A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

The tricky part in using that method was that the <ul> starts with the before image, and the <li>s mask in the rollover state. Unfortunately, the problem with that technique is factoring in the third non-clickable state. Simply leaving it empty, reverts the first state.

I used <p> to style the third state, but I didn’t like that, because semantically it is not really a paragraph. I like your solution of using <strong>, but what about <em>? Semantically, it definitely is an emphasis right?

In my original question I think I misunderstood the concept of semantics to mean that the class name needs to be there to describe what is happening. As I understand, semantically it is ok to use <span> to throw the text, isn’t it?

With regard to the topic of the post: CSS does NOT describe anything; It styles. So adding removing classes doesn’t serve to “describe” anything semantically, only visually to the end user and perhaps, if your class/ID names arent cryptic, to furture coders updating your work.

adding a replacing the anchor with any other tag ( regardless of what class you give it) changes the semantics. For starters, its no longer a link and it wont have any of it s attributes for SEO. Paragraph tags represent a paragraph. There is some debate as to what exactly constitutes a paragraph, some folk say one word alone is not a paragraph, but I myself am not of that school of thought.

Using a tag like <strong> or <em> ( you can use CSS to remove the default bold or italic styling) adds yet a different semantic meaning from P or A(only a link is a link!). For some reason I favour this, just as Paul said. I also like the fact that you aren’t replacing an inline (A) element with a block element (P). Tho that has nothing to do with semantics. Semantics only as to do with USING THE TAG that most closely resembles the INTENDED meaning of the text it contains.

If you are going to do the exact thing to EVERY anchor or span you should follow this pattern:
.globalnavsprite li{ your rules for LIs}
.globalnavsprite a {your rules for anchos}
.globalnavsprite a span{your rules for the span inside the anchor}

BTW chances are that the you are seeing menu roll over differently because the CSS rules were written to target the direct children of the anchors, of course when you switched an anchor for any other tag you broke that rule and voila different behaviour.

Another thing that has been touched on in the responses to this topic ( agin not about semantics)… is “image replacing text”

As Ralph said the Gilder Levin is a more accessible image replacement technique.
Which works great if the images that you are using DO NOT HAVE transparent BG.

JUST SAW your reply…

yes SPANs are OK to use to move the text if you find your self in a where you have to add extra mark up as they are SEMANTICALLY NEUTRAL. The problem with the technique you use is that if images are off but CSS is on then the user will not see the text… thus the accessibility issue.

As Ralph said the Gilder Levin is a more accessible image replacement technique.

Is the Gilder Levin technique better than the one at A List Apart in your opinion?

That’s perfect, thank you! I was under the impression that semantic markup means that the classes and id naming describe the purpose of the HTML between the div etc that styles them.

I see what you mean. I guess I could use nested paragraphs, but that just seems ugly. This being a restructuring project, I am bound to use the images, but I would like to start employing CSS3 and avoid images in the future. Damn those legacy browsers.

Go to the list apart article demo and then in Firefox disable all images and see what you get. (To be fair the article mentions that you should add your favourite image replacement technique to the methods anyway.)

Go to my page here and disable images or disable css or disable both and then make your own mind up to which is best :slight_smile:

Adding my humble opinion: So far I have found no that is PERFECT. GL beats all other contenders and is perfect EXCEPT for images with transparent BG ( as non opaque images show the text underneath) .

In that specific scenario ( since the transparent text replacement made me have to lose the text anyway :frowning: ) I USED TO lean towards the Phark mehtods, except I have read that some search engines confuse this with methods used for keyword spamming and thus penalize your ranking. Consequently I have started using AP similar to that mentioned in ALA. Still, I wonder how long it will be until that too becomes a method for key word spamming and google gets pissed.

There is one neat “upgrade” I like to do when I use the GL method which saves me the extra span in the mark up…


.globalnavsprite a:after, .globalnavsprite strong:after, .globalnavsprite span.aft {
content:""; 
/* the rest of the rules which you would have used in your span go here
} 

And to make IE happy I put this in my IE specific stylesheet which is loaded with a conditional comment:


.globalnavsprite a , .globalnavsprite strong{
  zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('afterBegin','<span class="aft"></span>')
	);
}


this simplifies your markup for the GL method to:


<ul id="globalnavsprite">
    <li id="globalnavlink1"><a href="#">Link</span></li>
    <li id="globalnavlink2"><strong>Active State</strong></li>
...
</ul>

Which I think is rather graceful.

Very nice. I’m gonna give that a try. Thank you! :slight_smile:

I just tested it and yup, my version, no text, your version, text. I like text. It’s funny though, I turned off images and went to Google. No logo. No text. No nothing. :lol:

Off Topic:

Maybe that’s why they call me Nobody. :lol: If I want to be sure that I’m on the page I think I’m on, it’s handy to be able to click the link to confirm it. Some sites are not very good at making it clear what page you’re on.

lol -but that’s a separate design issue :slight_smile:

For Firefox you can leave the element as an anchor and use pointer events:none to stop clicking.

Sometimes you can work around it by adding the page background into the mix so that it sits on top of the text but matches the background beneath. Or occasionally you can do tricks like this :slight_smile: