Welcome to WebmasterWorld Guest from 54.205.115.177

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Substitution For Strong and Em Tags

Any thoughts?

   
6:27 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



Sort of looking for thoughts and a consensus...

Italic text on a computer screen stinks. I never use the <i> tag. Hardly ever use the <b> element.

I do, however, sometimes use strong or em but more often I'll use span with a class. And if I do use strong or em, I usually give it it's own style rule - mainly to avoid italic but also I've found that a slightly contrasting font with a bold weight works nicely for emphasis.

(For example, even in print-bound Word documents, I'll write the body text in 12 pt Times New Roman and use Arial Bold 11 pt for emphasis. Looks nice, to my eye, at least.

What do others do?
Do you share the same view of italic text?

6:37 pm on Aug 12, 2003 (gmt 0)

10+ Year Member



I used to use a span with a class but now I always use em and strong. I like to limit the number of unneccesary classes that I have in a document and using em and strong helps in that regard.

As for Italic, your right it doesnt always look that great but I generally only use it on a few words at a time(using em). Its still readable and gets the point across :).

6:59 pm on Aug 12, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I use <em> and <strong> but style them if necessary because:

Do you share the same view of italic text?

Yes generally, but it depends on the font being used (georgia, italic is OK, TNR isn't).. so as long as <em> is in the markup you can choose your/your clients preference

admittedly a span class would do the same job but <em> is screen reader/text browser friendly too..

Suzy

2:24 am on Aug 13, 2003 (gmt 0)

10+ Year Member



Do you share the same view of italic text?

Not really. If you have an anti-aliased font setup or use ClearType in Windows XP, italics look great.

That aside, sure italics can look a little untoward in regular aliased situations, but italics have a use and a meaning. Your idea of changing the style is good, since italics are meant to be 'different'. However, I would argue that using italics comes way above many of the usability/readability disasters people commit every day.. links without underlines, links that are the same color as the text, poor color text choices, tiny nasty Verdana text anyone over 40 can't read.. and so on.

2:41 am on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I use em for emphasis, strong to make a word darker, and dfn for scientific names.

I also put the main heading of each page in h1 tags, and give subheadings h2 tags etc.

Those tags were invented for good reasons, so use them! Don't use styled spans to make it look how you want, because the browser won't know what kind of content it's reading. Use the correct tags, and then tweak the styles of those tags to get the look you want.

12:43 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



sometimes use strong or em but more often I'll use span with a class.

Keep in mind the semantic meaning of the tags <em> and <strong>. How they really look is a question of layout, so <em> enclosed words don´t have to be in italics. But these tags do have a certain meaning in your hypertext document - don´t use <span style="font-weight:bold"> if the phrase´s meaning is emphasized.

Just my 2 cents,

Lars

1:25 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



Also, screen readers and such things deal with strong and em in the proper ways too, whereas styled spans are just dealt with as.. nothing unusual.

I don't want to sound anti-disablity, I'm not, but I admit that most of the time I am not worried about such distinctions .. but if you DO want to be totally accessible and friendly to netizens everywhere, this is a point well worth considering.

3:23 pm on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Use <big> and <small> too! Saves bytes rather than using <span>!
3:38 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



Not enough bytes to be worth breaking the standard though, Hester, IMHO. Those tags are not valid in XHTML. Creating a CSS class gives you more power, and doesn't add too many more bytes to the equation (if you arrange your CSS well, that is!).
3:43 pm on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



As for a CSS substitute for strong and em - there is none... well, unless you mess with volume, speed, etc in your aural style sheet. Still, that doesn't compensate for the fact that non-CSS capable screen readers need strong and em to do what they're supposed to...
3:45 pm on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



font-weight: bold;
font-style: italic;
text-decoration: underline;

Jordan

3:53 pm on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Those tags are not valid in XHTML.

Are you sure about that? I can't find anything in the XHTML 1.0 spec that says <big> and <small> aren't to be used.

4:06 pm on Aug 13, 2003 (gmt 0)

10+ Year Member



Before you replied, I was thinking about that myself. I decided to check the XHTML 1.0 Strict DTD itself, and discovered that these elements ARE valid, when not used within PRE tags. So, your point stands.

However, I am rather disappointed in this, since the philosophy of XHTML/CSS is that the content goes into the XHTML, the presentation details into the CSS. SMALL and BIG are a bit too 'presentation' related for my liking to be in a purely content related file, but if the DTD allows it, so be it :)

Thanks for making me check this out, however.

4:06 pm on Aug 13, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



[w3schools.com...]

Looks like they are still around.

Jordan

2:42 pm on Aug 14, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



font-weight: bold;
font-style: italic;

That is not a CSS substitution for <strong> and <em>. They are substitutes for <b> and <i>!

How is a screen reader going to interpret a font's style or weight? More importantly, how is the information carried to a screen reader with no CSS support?

6:35 pm on Aug 14, 2003 (gmt 0)

10+ Year Member



thanks for the input.

Hadn't given the screen reader angle enough consideration.
Maybe I should stick to just styling em and strong to my liking and skip span with a class.

Good to hear that italic text stinks less on flat-panel displays but most of us are still stuck with CRTs and the jaggies for the moment.

Where are those high-res monitors that are supposed to be a near-substitute for print on paper that I've been hearing about for years? A good flat-panel is a nice improvement, but it's still not a sub for printed text.

(Of course, the trade-off is color without any additional cost and that's a major thing. The glass is half-full!)

rich

10:05 pm on Aug 14, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It is, of course, possible to use "class" with <em> or <strong>. Thus you could have

<p>This <strong>stands out</strong> and this <strong class="stronger">stands out even more</strong></p>

and in your CSS


strong.stronger {font-size:105%;}

(or you could change the colour, or whatever)

I'm not sure I would want to do it myself, but there may be reasons in specific cases. Doing this would seem to be preferable to using <span> for the reason given by DrDoc.

11:50 pm on Aug 14, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Most screen readers don't understand aural prompts, no matter whether they come from CSS or HTML. The only one I know of that does is Emacspeak (using MBROLA). So I personally don't worry about aural prompts and only concern myself with visual prompts (which is what the question was about).

Jordan

12:07 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Jordan, I think you're wrong to only consider visual prompts.

Use of appropriate tags (<em>, <strong>, <dfn>, <h1>, <h2> etc) enhances the content's meaning.

By all means define visual styles for those tags, but don't just think visually - partly because there may be future xhtml-compliant screen readers that do take notice of tags, but also because using appropriate tags is a really simple, neat, efficient way to code!

12:45 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Purple_Martin:

Fair enough. :)

Ps. I don't necessarily agree (I'm kind of undecided on the matter), but some people would argue that phrasing tags like <em> and <strong> should only be used in conjunction with font styling tags (<i> and <b>) or CSS styling, not as a replacement for them. I.e., <span class="strong"><strong>...

Jordan

1:08 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That's an interesting idea, but why would it be better than this?

strong { font-weight: bold; etc }
...
<strong>content</strong>

I think that you were trying to say that CSS, not (X)HTML, should be used for styling, and I agree, but that's exactly what this does: the content and it's meaning is given with (X)HTML, and the visual styling is given with CSS. Surely this is the most efficient and most appropriate way? If it's not, I'm looking forward to learning why it's better to do it another way :)

1:26 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Purple_Martin:

Actually, that does look like the best way to go about it for the CSS saavy. No extra tags needed that way. I didn't understand what you were meaning earlier, my bad. :)

Jordan

9:02 am on Aug 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think we need to look at this from a semantic point of view. If the viewer has CSS then they get whatever style has been added. But if the document is viewed without CSS, it should still have meaning. So <strong> and <em> still give the relevant meaning to the text.

If you just use span, the meaning is lost without the CSS.

4:55 pm on Aug 15, 2003 (gmt 0)

10+ Year Member



I think we need to look at this from a semantic point of view. If the viewer has CSS then they get whatever style has been added. But if the document is viewed without CSS, it should still have meaning. So <strong> and <em> still give the relevant meaning to the text.

If you just use span, the meaning is lost without the CSS.

Excellent point Hester. There is more to it than just the visual or even aural presentation. At the basic level strong and em give meaning to their contents.