Can a <span> be made into a clickable link?

Question

To make a span into a clickable link.

I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.

Is this viable?

<div id="logo">
  <a href="[absolute url]"> 
    <span></span>
  </a>
  <h1>page name</h1>
</div>

It works on my computer, with Chrome, IE11 and Opera. Will it work universally?

Answer 1

While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).

<a href="[absolute url]"> 
  <span></span> <h1>page name</h1>
</a>

But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.

---

What's the point of image replacement techniques and why using an empty <a> tag is bad?

The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.

However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.

And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.

Answer 2

wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.

<div id="logo">
   <a href="[absolute url]">
      <span>this span is now like link text.</span>
   </a>
   <h1>page name</h1>
</div>


<div id="logo">
     <span onclick="myFunction()">this span is now like link text.</span>
   <h1>page name</h1>
</div>

<style>
span:hover{color:red;}
span:active {color:green}
</style>

The css one isn't really click stuff.