Tiffany B. Brown

a mish-mosh of stuff

XHTML, validity <b> and <i>

Imagine my surprise, when (after getting called-out in the comments of a blog posting) the following code — with an XHTML 1.0 strict DOCTYPE no less — passed the W3C’s validation test:

<p><b><i>howdy</i></b></p>

¿Que? So to the specification I go. Sure enough, there’s no mention of either the <b> or <i> tags being so much as deprecated, let alone removed. In fact, both elements are still a part of the XHTML 1.1 presentation module.

So, as it turns out, instead of using <span class="bold"> in places where semantic validity isn’t important, you can still use <b> and <i> in your XHTML documents.

However, if you are using <b> and <i> for emphasis (rather than purely for appearances) <strong> and <em> are the way to go.

Technorati-ism: , , ,

  • Danny

    the (underline) tag is also deprecated in XHTML 1.0 strict. No new tag is introduced, so either don’t use it ore usse CSS. Also deprecated and <strike>, use instead. But on validating they pass…

  • Danny

    the (underline) tag is also deprecated in XHTML 1.0 strict. No new tag is introduced, so either don’t use it ore usse CSS. Also deprecated and <strike>, use instead. But on validating they pass…

  • http://www.tiffanybbrown.com/ tiffany

    Yes: <u> and <strike> are deprecated. <b> and <i> are not. You should use CSS for the former.

  • http://www.tiffanybbrown.com/ tiffany

    Yes: <u> and <strike> are deprecated. <b> and <i> are not. You should use CSS for the former.

  • http://www.rashidmuhammad.com/ Rashid Z. Muhammad

    I don’t know why, but I cringe at the idea of using spans and classes for emphasis. I’d rather just restyle the em and strong tags due to better intrinsic semantics.

  • http://www.rashidmuhammad.com Rashid Z. Muhammad

    I don’t know why, but I cringe at the idea of using spans and classes for emphasis. I’d rather just restyle the em and strong tags due to better intrinsic semantics.

  • http://www.tiffanybbrown.com/ tiffany

    See, in my defense, I actually thought that bold and italic were dead or at least deprecated elements, which is why I used <span> (and I know I ain’t the only one who thought that).

    But is every bold-faced or italicized item semantically significant?

    For example, when I bold “Technorati-ism.” To me, there’s no reason to emphasize it, except that it looks pretty on a page or screen. It’s not text that you’d want a screen reader to read at a louder volume. In fact, it’s probably one of the least important items on the page. But because it is a different kind of content, I prefer to set it apart in some way; I could easily have used a paragraph border.

    In that case, using <b> or <span class=”b”> is totally appropriate, (although, semantically-speaking, <span class=”technorati”> would probably be best).

  • http://www.tiffanybbrown.com/ tiffany

    See, in my defense, I actually thought that bold and italic were dead or at least deprecated elements, which is why I used <span> (and I know I ain’t the only one who thought that).

    But is every bold-faced or italicized item semantically significant?

    For example, when I bold “Technorati-ism.” To me, there’s no reason to emphasize it, except that it looks pretty on a page or screen. It’s not text that you’d want a screen reader to read at a louder volume. In fact, it’s probably one of the least important items on the page. But because it is a different kind of content, I prefer to set it apart in some way; I could easily have used a paragraph border.

    In that case, using <b> or <span class=”b”> is totally appropriate, (although, semantically-speaking, <span class=”technorati”> would probably be best).

  • http://benramsey.com/ Ben Ramsey

    <strong> and <em> actually have semantic meaning to me, and, like you, I assumed that <b> and <i> were being removed particularly because they fail to describe the kind of data they hold and are purely for asthetics, while I can see how <strong> and <em> actually describe the data. Using a span with a “bold” class is completely unsemantic (is that a word?), though, because you’re not describing the data at all, and the class name of “bold” (and I’ve seen class names representing colors and font sizes, etc.) is a very poor way to describe the class. CSS gives you the unique ability to change your design by modifying something in one place and effecting change across your entire site. What if you decide that “bold” should be italicized or that “red12pt” should now be green? You don’t want to update all your code where the class name is used, but now the class name doesn’t mean anything.

  • http://benramsey.com Ben Ramsey

    <strong> and <em> actually have semantic meaning to me, and, like you, I assumed that <b> and <i> were being removed particularly because they fail to describe the kind of data they hold and are purely for asthetics, while I can see how <strong> and <em> actually describe the data. Using a span with a “bold” class is completely unsemantic (is that a word?), though, because you’re not describing the data at all, and the class name of “bold” (and I’ve seen class names representing colors and font sizes, etc.) is a very poor way to describe the class. CSS gives you the unique ability to change your design by modifying something in one place and effecting change across your entire site. What if you decide that “bold” should be italicized or that “red12pt” should now be green? You don’t want to update all your code where the class name is used, but now the class name doesn’t mean anything.

  • http://www.tiffanybbrown.com/ tiffany

    Using a span with a “bold” class is completely unsemantic (is that a word?), though, because you’re not describing the data at all, and the class name of “bold” (and I’ve seen class names representing colors and font sizes, etc.) is a very poor way to describe the class.

    The point is whether you think the data is semantically significant. I only use classes like .bold or .italic when semantics isn’t important, and when the data would almost always be bold, or could just as easily not be bold.

    Honestly, though, I have never experienced a redesign that didn’t also involve a massive re-code. Most web sites are still visually designed. And you always have to make a compromise between aesthetics and semantics. So in practical terms, I don’t think <span class=”bold”> is that big of a deal.

    Plus having a bold class (which I usually call .b to save a couple of bytes) gives some added flexibility when you want to make one member of a particular class bold.

    For example, rather than having .title and .title-bold you can just combine those classes in your span <span class="title b">.

  • http://www.tiffanybbrown.com/ tiffany

    Using a span with a “bold” class is completely unsemantic (is that a word?), though, because you’re not describing the data at all, and the class name of “bold” (and I’ve seen class names representing colors and font sizes, etc.) is a very poor way to describe the class.

    The point is whether you think the data is semantically significant. I only use classes like .bold or .italic when semantics isn’t important, and when the data would almost always be bold, or could just as easily not be bold.

    Honestly, though, I have never experienced a redesign that didn’t also involve a massive re-code. Most web sites are still visually designed. And you always have to make a compromise between aesthetics and semantics. So in practical terms, I don’t think <span class=”bold”> is that big of a deal.

    Plus having a bold class (which I usually call .b to save a couple of bytes) gives some added flexibility when you want to make one member of a particular class bold.

    For example, rather than having .title and .title-bold you can just combine those classes in your span <span class="title b">.