Use or deprecation of the Span tag

[quack]

Is the Span tag actually deprecated or just not considered good form?

I recently had someone rewrite a small 10 year old site for me using XHTML and CSS2 with the sole intention of modernizing the code and updating some graphics. What I received included a CSS file but also extensive use of the span tag along with excessive use of tables.

After doing a little reading, it looks like the span tag isn't actually deprecated so I don't know how to quantify or specify 'good code' vs. what I feel is 'old code'.

Thanks for any direction you can give me.

[Fotiman]

Is the Span tag actually deprecated or just not considered good form?

Neither.
The span element is used as a generic inline container. It's often used as a means of attaching a "hook" for CSS. There is nothing wrong with using span. A good example of using span:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

The above example is an example of the hcard [microformats.org] microformat, and might be displayed on the page as:

home: +1.415.555.1212

Now, excessive use of tables can arguably be a bad thing. In general, I'm not really opposed to "single-layer" tables used for layout, but when you start nesting tables to achieve some overly complicated layout, I consider that to be a bad use of tables. Your mileage may vary and others may not feel the same way. Just my 2 cents.

[quack]

Thanks Fotiman.

Part of my problem is that I don't know how to phrase the question and going back, I think that my referencing the span tag didn't reflect the real or whole problem.

Here's some of the code that, to me, clearly reflects what someone wouldn't want but is what I received:

 <td align="left" valign="top" bgcolor="#000000"><table width="600" border="0" cellspacing="1" cellpadding="1">
  <tr>
  <td width="120" height="25" align="center" valign="middle" class="tableHeading"> Apply to: </td>
  <td width="120" align="center" valign="middle" class="tableHeading"> Title: </td>
  <td width="120" align="center" valign="middle" class="tableHeading"> Viewing Size: </td>
  <td width="120" align="center" valign="middle" class="tableHeading"> Time: </td>
  </tr>
  <tr>
  <td height="20" align="center" valign="middle" class="tableText"> ver 5 </td>
  <td align="center" valign="middle" class="tableText">  <a href="docs/CratePro5GettingStarted.pdf">Crate Pro Getting Started </a> </td>
  <td align="center" valign="middle" class="tableText"> 620Kb </td>
  <td align="center" valign="middle" class="tableText"> PDF</td>
  </tr>
  <tr>
  <td height="20" align="center" valign="middle" class="tableText">ver 5 </td>
  <td align="center" valign="middle" class="tableText"> Inventory </td>
  <td align="center" valign="middle" class="tableText"> <a href="inventoryvideo.html" class="tableText">6.1Mb </a> </td>
  <td align="center" valign="middle" class="tableText"> 22:38 </td>
  </tr>
  <tr>
  <td height="20" align="center" valign="middle" class="tableText"> ver 5 </td>
  <td align="center" valign="middle" class="tableText"> Diagrams </td>
  <td align="center" valign="middle" class="tableText"> <a href="diagramsvideo.html" class="tableText">14.7Mb </a> </td>
  <td align="center" valign="middle" class="tableText"> 34:38 </td>
  </tr>
  </td>

When I run this through an HTML 4 validator, I don't get any errors other than alt attributes, etc. It appears that many, if not all, attributes are not actually required to be in the stylesheet and are allowed in the tag. I'm hoping that there's a simple way to say that all attributes have to be in the stylesheet but I don't know CSS well enough to know if all attributes CAN be in a stylesheet.

The code above clearly seems to be poorly written in 2010 but how can I say that it's wrong?

Thanks again.

[Major_Payne]

The alt attributes go into the image tag and some image map tags. They are required when validating with a XHTML doctype. I would have also used the title attribute in the link tags for the nice little mouseover tooltip.

You are right. The code is not only poorly written, but use of tables for layouts went out in the late 1990s. They should be used for their intended purpose...tabular data presentation.

Might help...

Tableless Web Design: [en.wikipedia.org...]
Why tables for layout is stupid: [hotdesign.com...]
How to convert manually your HTML tables to CSS: [table2css.com...]
Images, Tables, and Mysterious Gaps: [developer.mozilla.org...]

[Fotiman]

Yeah, that is way overkill on the tables, and also a ton of presentational attributes that should have been set using CSS instead.

[milosevic]

The code above clearly seems to be poorly written in 2010 but how can I say that it's wrong?

What Major_Payne said. Plus (I don't know if the links talk in detail about this) table based layouts aren't as good for SEO because there is less control over source ordering and it's more difficult to present content semantically.

For me though the biggest issue is when some poor sod has to make major changes to the site in future, but most people who want sites to be built don't understand or care about that.

[enigma1]

It looks like tabular data the table contains. In which case use of a table is correct but there was no reason not to simplify it with CSS.

You would expect to see something like:

<div id="data_table"><table>
<tr>
<th>Apply to:</th>
.....
</tr>
<tr>
<td>ver 5</td>
.....
</tr>
</table></div>

and any required style can be setup with CSS. There is no reason to repeat the various table element properties.

[milosevic]

enigma1 is right, that if it's tabular data then tables are OK.

It shouldn't need anything more than <td></td> though with decent use of CSS, none of that attribute soup.

The use of document relative (rather than site relative or absolute) links is pretty shoddy practice too imo - if someone was building this site for me I would see that as more of a sign they don't know what they're doing than the table set up.

I'd suspect the person making this site has used Dreamweaver or similar WYSIWYG and didn't bother looking at code behind the scenes.

[quack]

Thanks to all for the feedback. Now that I think you can see the problem, my question is, how do I avoid this in writing a bid request? This is a small site and doing it the way I want is just barely out of my skill level so I need to be able to put what I need into words without sounding negative by saying, 'I don't want...' or making the bid request 10,000 words long.

Thanks again.

[rocknbil]

What I received included a CSS file but also extensive use of the span tag...

As you read along, note that <span> is a generic inline element. IMO, it should only be used when no other semantic element will do. Example:

Not semantic.
.bold-text { font-weight: bold; }

<span class="bold-text">I am bold.</span>

semantic (and, no CSS required:)

<strong>I am bold.</strong>
<b>I am bold.</b>

The same is true of <div>. It is a generic block container, used to divide page elements, when no other container applies semantic meaning. Often it is grossly abused.

semantic:

<p>I am a block of text.</p>

<div>I am a block of text. Am I a paragraph, a heading, a list item? Who knows, the search engines won't. :-)</div>

My point is, "excessive" may not always be bad, but often, it's not better.

... along with excessive use of tables.

Following the ideas of semantic markup, for tabular data, yes, as mentioned. For layout . . . do not agree, and the code you posted is not an improvement.

Your developer should know the difference between deprecated, and for what document type, and understand that tables are for tabular data. This is not that big of a challenge. But part of the problem is often that the client doesn't set the standard (see below.)

While your data itself might be tabular data, this

<td align="left" valign="top" bgcolor="#000000"><table width="600" border="0" cellspacing="1" cellpadding="1">

indicates a nested table, which is a bad idea for accessibility reasons. Second, all those deprecated attributes - align, valign, bgcolor - should all be pulled out of your markup and css applied. Sheesh, they have classes, why not . . . .

#data-table-container {
/*
or better yet, assign the style to the table itself.
No need to specify align left unless some previous selector assigns margin:auto or text-align:left.
*/
background: #000000;
}

#data-table-one {
width:600px;
border: none;
}

/* classes may be better, see below */

#data-table-one td,
#data-table-one th {
padding:1px;
text-align:center;
width:120px;
}

#data-table-one th {
height:25px;
}

#data-table-one td {
height:20px;
}

<div id="data-table-container">
<!--
tables have poor cell spacing and valign support - someone will correct me on this. :-) Often you can get away with no valign at all, as data is vertically aligned center by default.
-->
<table id="data-table-one" cellspacing="1">
<th>
<td> Apply to: </td>
<td> Title: </td>
<td> Viewing Size: </td>
<td> Time: </td>
</th>
<tr>
<td> ver 5 </td>
<td> <a href="docs/CratePro5GettingStarted.pdf">Crate Pro Getting Started </a> </td>
<td> 620Kb </td>
<td> PDF</td>
</tr>
... etc.

See how much cleaner that is? Separates content from presentation, makes your pages lighter?

Caveat: It's really probably better to use class selectors

#data-table-one .tableHead,
#data-table-one .tableText {

rather than tag selectors as I've shown it here

#data-table-one td,
#data-table-one th {

Reason: I've recently discovered (and should have long ago) that pages will actually render faster using specific selectors over tag selectors.

Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.

Use efficient CSS selectors [code.google.com]

The difference may be trivial on a smaller site, but as your site grows, everything adds up.

Your developer should know most of this stuff. You asked for an upgrade of the code, this is not an upgrade IMO. Part of that responsibility really does lie with you - you have to set the standard for what you want. In fact, maybe you can do a little homework, reference some of the documentation from the link above and others like it in your RFP, which will simplify your RFP tasks.

As a recently retired freelancer, venturing a thought - not saying you are one of these, but beware: if you hope to get something done cheaply, remember always that you get what you pay for. Unfortunately there are many sharks on both sides of the Internet freelancing fences, investigate your providers well, and expect to pay more than you'd think. You will find someone who can give you quality work.

[milosevic]

Great post rocknbil! I think I'm saving this thread to bookmarks! Interesting that classes are faster than attribute selectors - something I wasn't aware of.

If I were you quack, I might consider giving the designer a link to this thread. It depends on where you stand with them I guess, I'd expect most designers to take serious offence, but there are people out there who would actually take interest and be glad to see where they could further their skills. For me the former kind of designer wouldn't be worth keeping hold of anyway.

The advantage to this approach is that you aren't the one who is saying bad things about their work, it's the people in this thread, and you can say you "weren't sure about it but you asked some other designers/developers and you've been told that the work isn't up to the standard that was required".

Otherwise, I feel it unlikely that he would come around to wanting to improve their code - if they are coding like this now, they likely do not know any better, and they would most likely try to persuade you that your concerns are not relevant or significant, and if forced to work the way you want you could easily see petulant dragging of feet to run up costs or similar.

If your working relationship is too formal/awkward to consider this approach, my rather cynical advice would be to lose them as painlessly as possible and find a new developer.

[quack]

Thanks to both for the feedback. After reading the posts, I decided to do an online CSS course and it was a big help in understanding.

The info on the descendant selectors (rocknbil) is interesting. I was very impressed by the course instructor and the real-life thoroughness of the information but he didn't get into rendering speed. Considering the recent changes by Google, I'm trying everything possible to get the page loading time down.

I've already had this job redone. It was very small (less than $100 - both times) which was part of why it was difficult to define the requirements. The RFQ had to be a reasonable length for the size job.

Thanks again!

[milosevic]

Good to hear! Just a quick clarification on what you've said, I don't believe that Google takes the time taken to render CSS into consideration when measuring page speed - since that depends more on the client than the server/network.