Forum Moderators: open
While browsing through some of those resources, I came across a very heated debate concerning the use and misuse of presentation markup and structure markup. Mainly, the use of italics, bold, emphasis and strong emphasis.
After reading for hours through the various interpretations of the guidelines, I ended up at the WAI (Web Accessibility Initiative) which in my mind would be the authoritative resource on the use of these elements. I also spend a lot of time there too. ;)
How do you interpret the use of these elements?
Here is my perception based on the debates I've been reading...
Now, doesn't it make sense that we would use all four elements in presenting both visual and structural design? Am I confused? :)
[edited by: pageoneresults at 8:11 pm (utc) on Dec. 27, 2004]
Now, doesn't it make sense that we would use all four elements in presenting both visual and structural design?
"i" and "b" win!
Guess which ones I use when coding by hand?
Low blow! Yes, I will agree that there is a character shortage in using <b> vs. <strong>. But, it is not a valid argument for using one over the other. ;)
As I try to seperate presentation from semantics as best as possible I use font-weight:bold or font-style:italic on the container element if that effect is meant purely for presentation.
I too make use of this method. Not as much as I probably should, but I do.
What about inline elements? Are you wrapping those in a <span class=""></span> for visual presentation?
Couldn't you also just use <b> and <i> based on their true presentation meaning of being bold or italic?
Otherwise, I usually am using Dreamweaver, set to use <strong> and <em> automatically.
I have to wonder if we as users of WYSIWYG editors have it all wrong. From a semantic standpoint, you would not use <em> and <strong> that frequently unless of course you want to shout at someone while they are viewing the entire page. ;)
Imagine a screen reader running through your page. What would it sound like?
<em><strong><b><i>One good thing about
<b><i><span>She has a certain je ne sais quoi, don't you think?You could write this as follows:
<p>She has a certain <span lang="fr">je ne sais quoi</span>, don't you think?</p>However, to visually distinguish the different language, you would need to add a class name (due to browser support issues, but CSS 3 will fix this). However, if you do this:
<p>She has a certain [b]<i lang="fr">[/b]je ne sais quoi[b]</i>[/b], don't you think?</p>The style is taken care of even if CSS is absent. If you don't like the italics, you can simply over-ride it in the stylesheet, and you're still saving 6 bytes at least in any case!
It's not just for distinguishing language either - in many cases, when using a
<span><b><i>
Marking something up as bold or strong/italic or emphasis means nothing semantically, and has no effect whatsoever on accessibility.
Use what you want. Not one single person will be affected by your decision, either way.
Marking something up as bold or strong/italic or emphasis means nothing semantically, and has no effect whatsoever on accessibility.
Interesting comment. Can you confirm that? I mean, everything I've researched to date states that screen readers do treat these things differently. Please, do tell more...
Now, doesn't it make sense that we would use all four elements in presenting both visual and structural design?
Yes and no. On a theoretical level, I would say no. HTML should not handle presentation and I mostly try to write code that way. So, in order of preference, least desirable to most:
1.
This is a <i>book title</i> in italics
2.
This is a <span class="i">book title</i> in italics
span.i {font-style: italic;}
3.
This is a <cite class="book_title">book title</i> in italics
cite.book_title {font-style: italic;}
#3 is far and away the best, because if I were to create separate style sheets for separate media (browsers, print, screen readers, mobile phones), the "title" class would always make sense, whereas "italic" would only make sense in two of the four, perhaps three depending on the mobile phone's capabilities.
#2 is hardly an improvement over #1.
#3 is a huge improvement over #2.
As for the accessibility issue, that's debatable. I think the OP meant that in the worst case, the italics is simply not rendered and therefore can't be considered an accessibility problem. In fact, though, it is. If the italics has a semantic meaning (which it does, as I'm using it for a book title in this case), it's not clear that the cue to the screen reader is as it should be. So whereas the person viewing the page in a browser will know that it is a citation, the person on the screen reader may not.
So I've started using <b>s and <i>s--if I'm not going to do it the proper way, I'm at least going to do it the lazy* way.
* "Efficiency is merely intelligent laziness."
However, I've tested all the popular screen readers and audio browsers and they don't. I've yet to hear of any reader or browser that treats them differently (Emacspeak perhaps?).
To all intents and purposes, <strong> and <em> are simply aliases for <b> and <i>. They're "structural" tags used as direct replacements for presentational tags.
Ironically, there are accessibility benefits to having the togglable ability to announce bold and italic font styles in screen readers. And screen readers can skip by bold text to scan the document content, similar to sighted users visually scanning a page. Note that this does not require any shouting, nor any distinction between what is seen/read and what is heard/read.
<b> and <i> tags appeared sometime in the early days of HTML "1" (1993 or earlier - they certainly weren't introduced by Netscape or Microsoft). <strong> and <em> were approved in HTML 2 (rfc1866) in September 1995 (they were around earlier - Mosaic added support in 1994).
WCAG 2.0 is set to keep this ten-year debate going for some inexplicable reason - see HTML Techniques for WCAG 2.0 point 5.1 - but I'm reasonably sure there isn't actually a debate here.
Why is this relevant? Well, I presume that style sheets for screen readers could be defined to treat <b> as <strong> etc, therefore the whole argument is nonsense. There is no right and there is no wrong - although, I suppose, that people who believe there is a wrong are themselves wrong. There's a nice irony to that.
Kaled.
I try to mark up elements in documents according to the role they play in the document, and stay away from visual instructions... I would go as far as to say that using markup to give visual instructions for elements is going beyond the boundaries of what html is meant to be used for.
So, if I have a short quote in the middle of the paragraph which I wish to italicise I will use <q> </q> and style q as:
q {font-style:italic;}
It strikes me that an element can (arguably) have a role as emphasized information or strongly emphasized information, but it cannot have a bold role or an italic role... those two instructions are simply descriptions of the visual appearance of the element, so they might as well go in the style sheet.
The result of this position is that I very occasionally use <strong> and <em> but mostly use font-style:italic; and font-weight:bold;
I never use <i> and <b> and would (in 2005, at any rate) argue against their use as much as I would argue against using <font size="-2"> or <body bgcolor="#FFAA00">.
I never use <i> and <b> and would (in 2005, at any rate) argue against their use as much as I would argue against using <font size="-2"> or <body bgcolor="#FFAA00">.
Moving font sizes and background colours into CSS reduces page size: a clear benefit. Replacing <b> and <i> with <strong> and <em> doesn't make your pages more accessible, more structural or more compatible with the Semantic Web. The only effect is an increase in page size: a clear drawback.
<span class="italic"> is the same as <span class="red">...
What happens if you style the first paragraph of each article using an italic font and then one day you decide to change it to a small bold font?
If you called your class "firstpara" you wouldn't have much of a problem. But a class called "italic" which is styled as small and bold doesn't make too much sense.
I think there's a substantial argument for getting rid of <b>, <strong>, <i> and <em>.
It is the same - it's a visual instruction.
<span class="italic"> is the same as <span class="red">...
What happens if you style the first paragraph of each article using an italic font and then one day you decide to change it to a small bold font?
If you called your class "firstpara" you wouldn't have much of a problem. But a class called "italic" which is styled as small and bold doesn't make too much sense.
The developers of speechreaders etc would probably love it if everyone used these four elements properly and their beta likely did render them differently.
Doubtful, imho. It would be a support nightmare, generating support calls to developers asking why their screen reader doesn't find some piece of bold text when searching for bold text (because it's marked up as bold not strong... or vice versa). Braille displays get along just fine using only bold and italic. As does every other field of human endeavour... ;)
We (or, perhaps more accurately, the w3c) really should not be trying to force meaningless syntax babble on people with visual impairments who afaik never asked for any of this in the first place. Any person going through the process of losing their sight has more than enough to cope with already.
I use <strong> at work and <b> at home.
Why?
because I have different versions of dreamweaver at home and work. One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.
*shrug*
One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.
lol, that made my day! That has to be one of the top reasons why people use both. ;)
Why? I liked the shorter tag and I thought the the whole <strong> and <em> thing was a tempest in a teapot - worse than many "politically correct" name changes in the popular press, some of which do make practical sense.
If there is ever a coherent and uniform address to the situation and definitive support from screen reader user agents, then I will probably pay attention. For now, I just save small bits of bandwidth.
because I have different versions of dreamweaver at home and work. One, by default, uses the <b> tag when I go to bold text in the WYSIWYG editor and the other, by default, uses the <strong> tag in the same scenario.
There a option for this. Edit/Preferences/General... Check or uncheck depending on desire. :)
But again, personal preference. :]
Although, since this was mentioned earlier,...
803b compliancy states that the <strong> and <em> tag are the acceptable tags. Always remember, the <b> and <i> tags were introduced by the browsers (IE & Netscape), not by the W3C.
I'm curious if there are browsers that don't recognize <i> and <b>.
The words "emphasis" and "strong emphasis" can mean anything. "Italics" is italics and "bold" is bold
That's the whole point though, isn't it?
All <i> and <b> can ever mean are two dimensional visual instructions. Which is not very much use to anyone except human readers with sight. It's not much use to computers and it's not much use to non-visual user agents.
How does a speech synthesizer say a word with <i>talics? (With difficulty, I imagine... I don't know humans who can do it either). )If you want to say a word with <em>phasis, however, that's fairly straightforward.
Look at another scenario... what happens if you want the <strong>ly emphasised phrases in your article to be in italics?
It makes sense to style strong with:
strong {font-weight:normal; font-style:italic;}
How are you going to do that with <i> and <b>?
Dominant browsers have traditionally displayed <strong>ly emphasised elements as bold and <em>phasised elements as italic, but that's nothing more than a default pattern.
