Errors regarding empty elements.

For technical support for all editions of CSS HTML Validator. Includes bug reports.
Post Reply
User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Errors regarding empty elements.

Post by RSteinwand » Wed May 15, 2013 10:22 am

Hi Albert,

I have this code, which generates 3 warnings:

Code: Select all

<div id="logo"><a href="/" title="Click to go to the home page"><span class="link"></span></a><span></span></div><div id="logoimg"></div>
The "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

This "span" element is empty and may be useless. Consider removing this element or placing text (or something else) in it. (First empty span.)

This "span" element is empty and may be useless. Consider removing this element or placing text (or something else) in it. (Second empty span.)
Here's the markup for that:

Code: Select all

#logo{height:65px;background:#00144a url(/images/cssimages/sprite_blue.png) right 0 no-repeat;border-bottom:1px solid #fff}
#logo span{display:block;height:65px;width:200px;background:#00144a url(/images/cssimages/sprite_blue.png) 0 0 no-repeat}
#logo .link{height:65px;width:300px;float:right;background:transparent}
#logo a:hover{cursor:pointer}
It's not uncommon to have empty <span>s used for styling links, tabs or buttons. The sliding doors technique is commonly used to create buttons on links, using two images, one for the link and the other using the span.

The code I list above gives me a link on our web page logo to return to the home page. The logo is just a background image, but it resizes to look good with screen widths between 430px and 880px.

I know I can disable the messages. I just wanted to point out that empty spans inside links often are intentional.

OTOH, I use this code at the top of a div to create rounded corners. I started using it long before border-radius CSS3 was available.

Code: Select all

<b class="ftop-nh"><b class="f1"></b><b class="f2"></b><b class="f3"></b><b class="f4"></b></b>
I can see where empty <b> tags should generate a warning, especially since they aren't often used for styling. FWIW, I get 5 warnings for the top (displayed above) and 7 for the bottom section. Of course I disabled that message first chance I got. I just now saw them again using your OnlineWebCheck.
Rick

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3451
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Errors regarding empty elements.

Post by Albert Wiersch » Wed May 15, 2013 11:44 am

Thanks Rick.

I've change the empty "span" element message to a regular (not warning) message and the text to this:
This "span" element is empty and may be useless if it's not used with CSS or JavaScript.
I'll leave the warning about "b" as it is, but perhaps improve the text to also say "may be useless if it's not used with CSS or JavaScript".

Please let me know if I missed something and you think I should make another change/improvement.
Image
Albert Wiersch

User avatar
RSteinwand
Rank VI - Professional
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: Errors regarding empty elements.

Post by RSteinwand » Wed May 15, 2013 12:15 pm

Sounds good.

Thanks.
Rick

Post Reply