Surrounding all content in div with span - why?

Question

In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.

I know the difference between spans and divs, but I cant figure out why the code looks like this:

<div class="forgot-password"> 
    <span><a href="/forgotpassword/">Forgot password?</a></span> 
</div> 
...
<div> 
    <span>Sign in</span> 
</div>

Instead of just:

<div class="forgot-password"> 
    <a href="/forgotpassword/">Forgot password?</a>
</div> 
...
<div> 
   Sign in
</div>

I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?

Edit: Here is the CSS for the forgot-password part:

div.forgot-password
{
    float: left;
    width: 145px;
    height: 22px;
    margin-left: 3px;
}

div.forgot-password span
{
    display: block;
    float: left;
    padding-top: 3px;
    padding-left: 0px;
}

div.forgot-password span a
{
    color: #C5C5C5;
    text-decoration: none;
}

Answer 1

To me it looks like overly complicated code. It would make sense if the code was:

<div class="forgot-password"> 
    <span> some text </span> <a href="/forgotpassword/">Forgot password?</a>
</div>

So that you can discriminate text and links in CSS or jQuery.

Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.

Answer 2

To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".

I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.

Answer 3

Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing

<span><a..>text content</a></span>

From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.

Answer 4

It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.