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

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.