Span will work. But usually when your trying to get a point across you should use strong tag instead. So just put the class on that. If you simply want it bold then just use b. always helps to imagine a screen reader is reading it to someone. If the reader should emphasize it and/or say it louder then strong should be used. Span is basically used for when there is no other tag to do the job.
As Eric said and as you said yourself - if you want emphasis then use em not span. Or use strong for important content and even as Eric already said if you want bold text just as a decoration but with no added meaning then use “b”. If none of the above fit the criteria then use span as the last resort.
I have created a series of CSS Classes to style my text.
For example, in a lot of the articles on my website, I use bold, red font to get my points across.
They are not really ideal class names (apart from .error) because they rely on presentation (color) to convey meaning and should at a later date you decide that layout needs blue text as the stand out item then you are stuck with class names in your html that say .redtext but are really blue!
You should use a class name so that it doesn’t matter what rules it holds like your .error example. If you decide .error should be blue then it still makes sense in the html.
If you are using classnames for varying degrees of importance you could say something like.
.hot{}
.warm{}
.cold{}
I’m sure you can think of something better
Classes like .warning are much better than saying .redText as they don’t imply presentation.
Just a wee reminder not to rely on colour alone to convey meaning, because it won’t work if your user is colour-blind. I’ve been teaching computer skills to an elderly friend with this problem, so I’m particularly aware of it. (Me: “Click the blue icon. Next to the orange one.” My friend: “I can see two green ones and a brown one. Shall I just go for the second green one?” Great fun!)
Graphic design aside ( more color is not always better…). And Paul kinda beat me to this point, but your CSS should make sense semantically. Without any jargon, what I am trying to say is that the “best way to style” is a way which allows you to change styles WITHOUT touching the markup.
For example… if, similar to what you proposed, you used <span class=“redHighlight”>This is important</span> and .redHighlight{color:red;} and a year later you had a change of heart and wanted important things to be purple you would essentially need to change your markup which mean MORE WORK FOR YOU, kinda defeats the purpose doesn’t it?
Now, if you had used something more semantic, say: .concept{}. You would gain 3 advantages. <span class=“concept”>This is important</span>
1)This would be a semantic label, permanent in the mark up, which mean you’d not have to edit your HTML just to change the look of it
2) From a graphic logic point of view you create a unified pattern…a palette… all your CONCEPTS are one color. As you users navigate your site the they will learn to associate that particular color with “important concepts” [ the same way “blue and underlined” is immediately assumed by 99% of users to mean LINK-CLICK HERE] and your point will come across better . This is why you dont want to use TOO many colors, besides it just looks more professional.
3) Expounding on #2, you can make more elaborate palettes by targeting : #mainContent .story .concept {color:red;} and #sidebar .story .concept {color:green;}.
(Againg keep in mind that limited color palettes look better) now you still have some logic to your color scheme, but have 2 colors for highlighting concepts on the main content and on the side bar and that just an example.
Finally … smile like you MEAN it. What would happen if the viewer had their styles turned off? If something needs emphasis then the appropriate EM/ STRONG tag should be used in the HTML ( and the your CSS could be simplified to #mainContent .story em {color:red;}, for example. You can still style it with a SPAN as suggested earlier, if all you want is to highlight it for no reason. But, this often makes me stop and thin… if there is no reason to highlight this concept WHY am I highlighting anyway??
These points have probably been made my previous posters. I saw this thread last night and was too sleepy to respond. But I hope my explanation serves as a guide as to HOW to choose as well as WHY.
So, what is the difference between <em> and <strong> ??
They are not really ideal class names (apart from .error) because they rely on presentation (color) to convey meaning and should at a later date you decide that layout needs blue text as the stand out item then you are stuck with class names in your html that say .redtext but are really blue!
Agree mostly…
Yes, I am using Red, Bold Text to get across the key points of my articles, so I could make those <em>.
However, I used Pink for Pink Cadillac, so what else could I do there? (Probably a one-off style, but if I have Pink Cadillac, Pink Poodle, and Pink Panther throughout my website that it seemed like a handy style?!
If you are using classnames for varying degrees of importance you could say something like.
(Againg keep in mind that limited color palettes look better)
Well, for my articles I just use 1.) Plain Black, 2.) Bold Black, and 3.) Bold Red maybe a few times in an article of 5-8 pages.
I think I’m doing okay on the color thingy, BUT I’m certainly more liberal in my use of colors than, say, the New York Times!!
Finally … smile like you MEAN it.
You’ve lost me?! :-/
What would happen if the viewer had their styles turned off? If something needs emphasis then the appropriate EM/ STRONG tag should be used in the HTML ( and the your CSS could be simplified to #mainContent .story em {color:red;}, for example. You can still style it with a SPAN as suggested earlier, if all you want is to highlight it for no reason. But, this often makes me stop and thin… if there is no reason to highlight this concept WHY am I highlighting anyway??
Very true!
These points have probably been made my previous posters. I saw this thread last night and was too sleepy to respond. But I hope my explanation serves as a guide as to HOW to choose as well as WHY.
If I create a class like .factoid{} or .statistic{} or .concept{} do I still lose the semantic benefits since those are not recognized semantically like an HTML <strong> or <em> would be?
Emphasis is the difference; apart from the default visual rendering STRONG indicates stronger emphasis than EM. If you are purely using visual styling and cues that’s the realm of CSS, emphasis differs to style and doesn’t have a colour.
You might want to use a tool like the Colour Contrast Analyser to check your colours. It will give you a quick check as to whether there is sufficient contrast between foreground and background colours for both normal vision and various types of colour-blindness. It also has a facility to display a small section of your page as it would appear to someone with a particular type of colour-blindness, so you can check whether they will be able to see a difference between one kind of high-lighting and another. (e.g. between pink and red.)
As far as your class names go, I wouldn’t think so <em class=“factoid”> just gives an extra layer of meaning which is valuable. It’s like saying, “I am giving emphasis to text which is a factoid.” To me that is semantically solid.
