Comments on: css: style an element with the span tag http://www.dynamixlabs.com/2009/04/21/css-style-an-element-with-the-span-tag/ Wed, 15 Jun 2011 05:03:14 +0000 hourly 1 http://wordpress.org/?v=3.1.2 By: Marcus Carab http://www.dynamixlabs.com/2009/04/21/css-style-an-element-with-the-span-tag/comment-page-1/#comment-3203 Marcus Carab Thu, 07 Jan 2010 20:53:21 +0000 http://www.dynamixlabs.com/2009/04/21/css-style-an-element-with-the-span-tag/#comment-3203 I disagree with this method. Semantic tags are always preferable, and since the effect in question is to emphasize text, the appropriate tag - em - should be styled inside the DIV, not a meaningless tag like span. It's bad to think of "em" and "strong" as simply the new "i" and "b". There is an important difference: i means italic, em means emphasized. Italic is the *default styling* for emphasis, but you can override it should you wish to emphasize differently (say by adding bold to emphasized phrases as well, as in this example) Similarly, the "strong" tag is for "strong text" - essentially a different type of emphasis. Use these two tags as you will, but use them semantically - only use a span when there is no tag with the appropriate meaning. A simple test is this: consider someone reading the raw code. Good HTML will still make perfect sense to them, since good HTML is structural and semantic. When the code-reader hits that span tag, they won't know how it looks OR what it means (maybe it's being used to hide text or to create some effect with JavaScript - they wouldn't know without going through the CSS). If they are reading and encounter an em tag instead, they may not know how you have chosen to style it, but they know that it is intended as emphasis. I disagree with this method. Semantic tags are always preferable, and since the effect in question is to emphasize text, the appropriate tag – em – should be styled inside the DIV, not a meaningless tag like span.

It's bad to think of "em" and "strong" as simply the new "i" and "b". There is an important difference: i means italic, em means emphasized. Italic is the *default styling* for emphasis, but you can override it should you wish to emphasize differently (say by adding bold to emphasized phrases as well, as in this example)

Similarly, the "strong" tag is for "strong text" – essentially a different type of emphasis. Use these two tags as you will, but use them semantically – only use a span when there is no tag with the appropriate meaning.

A simple test is this: consider someone reading the raw code. Good HTML will still make perfect sense to them, since good HTML is structural and semantic. When the code-reader hits that span tag, they won't know how it looks OR what it means (maybe it's being used to hide text or to create some effect with JavaScript – they wouldn't know without going through the CSS). If they are reading and encounter an em tag instead, they may not know how you have chosen to style it, but they know that it is intended as emphasis.

]]>