defending terrible things

I’m sure all this has been said before, but it’s a minor obsession of mine. Ignore HTML5 for a second, and all the interesting things happening with Javascript and CSS. I’d like to discuss the kids in leather jackets smoking cigarettes behind the gymnasium of web development: <b> and <i>.

And WordPress is going to make my first point for me. I’m typing this in their WYSIWYG and the buttons for bold and italic are a little b and a little i. When I toggle one on, it becomes /b or /i. And yet the HTML that gets inserted is <strong> or <em>. Why?

Point 1: The bold and italic tags do exactly what the fuck it says on the tin.

If you want something in a division on a page, there’s a tag for that. If you want something to be a heading, there’s a tag for that, too. These tags, like all others, accomplish what they do only through conventions of browser manufacturers, but can nonetheless be relied upon to get you some semblance of what you want even if your CSS should be mysteriously and tragically abducted in the middle of the night. Like the bold and italic tags, they tell you very little about text they contain. But nothing in HTML tells you about the text it contains. It does, however, sort of tell you what it’s going to look like in a webpage and describe the role it will play in the page’s structure.

Point 2: If you want semantic markup, use XML.

XML is a very handy little language that will let you describe your precious digitized text as precisely as you want. You can style it and present it on the web and get exactly the same thing you would from a document full of non-semantic <div>s and <span>s. Or, hey, put even more <span>s in and give them all seventeen class names and call it a microformat. I hope you have a really, really fun time doing that. If, on the other hand, you’re willing to consider that your consumable data and your pretty website need not be the same beast, you could just keep the XML somewhere else and if anyone ever actually wants to scrape all the air dates and titles of the Buffy the Vampire Slayer episodes you recorded on VHS, let ’em just grab that.

Point 3: Why this webpage is shouting at me!!

You know what strong and emphasis refer to? They refer to verbal inflections. You know what most peoples’ web browsers don’t do? Talk to them. You know what would annoy the shit out of me if I were using a screen reader to read a bibliography on the internet? Listening to a goofy-sounding computer voice try to emphasize every single word of Journal of the Study of Obscure and Mostly-in-Latin Canine Diseases Affecting Generally the Respiratory System but Also Sometimes the Lymph Nodes or something. I don’t know that this is still a problem, but the idea is ridiculous in and of itself. Italic does not always mean emphasis, nor does bold always mean MAKE THIS LOUD. Certain conventions of formatting require the use of bold or italics, but actual writing rarely does. If you need to place emphasis on something, you can do that with word choice. (Or anyway I hear it’s possible..)

Point 4: Character count

When I first started doing professional web development, lots of things weren’t digitized. Therefore I spent a lot of time marking things up, enough that I began to have those horrible almost-nightmares where you’re doing the same task over and over and you can’t stop doing it or thinking about it. If semantic markup had been a buzzword back then and every <b> had to be a <span style="font-weight:bold;">, I probably would have gone back to working at Chevron. The bold and italic tags are short. The emphasis tag isn’t bad, but the strong tag is way too long to be a good value per keystroke. This is to say nothing of what you should actually be doing if you want to keep your presentation and your tags altogether separate, using a span with a CSS class describing the content and not merely the fact that you want it extra heavy. I mean, sure, I will always use CSS to bold or italicize something if there’s already a tag around it. Nine times out of ten a bold or italic tag would be inappropriate there anyway as the font weight or style is purely decorative. On the other hand, if something needs to be weighted or styled differently and has no containing HTML element, fuck it, I’m using <b> and <i>. They’re shorter.

Point 5: Dirty tricks

I add <b> and <i> to things I don’t necessarily want bolded or italicized. I do it because they’re some of the shortest elements available and they provide a hook to style child elements in larger repeated widgets with very precise, complex layouts. If I have to wrap every word of text in a tag just to accomplish some goofy layout, I’m using the smallest thing available. Especially if the widget in question is something I’m inserting dynamically and I want to keep it in a string without spaces and still be able to sort of recognize what’s in it without needing four monitors just to view the whole thing at once. Again, if Something Better exists, I always do that first. But there are times when nothing you can do is going to be semantic, screen-reader friendly, or anything you’d want your mother finding out you’d done.

One of the most beautiful things about the web is its imperfections. We don’t write firmware for missile guidance systems, we write applications that let you pretend to steal your friends’ cartoon cows. There are places for flawlessness and obsessive semantic control, but this isn’t one. When you can write elegant code, it’s awesome, and I think most of the time everyone tries to. But it’s important to realize that at the end of the day, this is all kind a series of epic hacks, and sometimes the most sane thing to do is just embrace it.

Advertisements

12 Responses to “defending terrible things”


  1. 1 pigsonthewing June 20, 2010 at 10:47 am

    In taxonomy, names like Homo sapiens must be italicised. Not emphasised; italicised. Regardless of whether CSS is parsed or not.

  2. 2 jeremyclarke June 20, 2010 at 5:35 pm

    The bold and italic tags do exactly what the fuck it says on the tin.

    Massive +1 on this. Back in the dark ages of table-based layouts and <font> we were pushed to accept all the changes proposed by web standards as a group that would change our lives. Clearly it did and the important parts have improved the universe of human information drastically. Looking back though the arguments for em and strong were always some of the weakest out there (along with self-closing tags, which are dying with HTML5).

    We accepted em and strong because they came with so much useful stuff, and also (at least in my case) because it was presented as a non-optional part of validation going forward. I remember being told that one day my sites wouldn’t validate if they had b and i, so might as well switch now.

    Fuck that. I’m back to b and i, especially when I actually have to type them. They are faster and describe better what people are actually doing. When developing CSS we should always assume that b/strong and i/em will be present in the dynamic content (i.e. .post/.entry on a blog), but not what they should look like. IMHO each should offer distinction from the normal text and preferably a hint at the inflections provided by the standard presentations. But regardless of which you choose there is no way to know how people will use the tags and the distinction between bold and strong is worthless when deciding on presentation.

  3. 3 Mathias June 20, 2010 at 7:53 pm

    Great article! Very, very true.

    It’s interesting to note that in HTML5, the strong element no longer implies strong emphasis, but rather importance.

  4. 4 garann June 20, 2010 at 9:50 pm

    @pigsonthewing – Excellent example. That made me think of adopted foreign words, too, and how completely douchey your computer would sound reading out je nais c’est quoi or something with added emphasis, all like “Ooooh, look at me, I’m a computer and I speak French.”

    @jeremyclarke – Yeah, fight the power! 😉 Seriously, I think you’re on to something. For a while there, it felt like you couldn’t question any part of the new web standards or you were standing in the way of the revolution. I think you bring up a damn good point about user-generated content, too.. Structural elements like lists, divs, and tables should be controlled and applied by the site itself. But you have to leave those inline/typographical elements exposed to the content creators, and if someone asks for bold, you should give them bold.

    @Mathias – Wow, really? Kind of confused by that. I think of <strong> as a tag you find embedded in content, and I’d think if something needed to be flagged as important it would be in its own container, like a disclaimer at the beginning of some text – frequently a bolded first paragraph. There is a lot of really pimp stuff in HTML5, but some of the things they’re doing around tags and semantics really bug me. There are certain areas (<article>, <aside>, what you’ve just mentioned) where I think HTML5 is creating a bigger mess and more confusion..

  5. 5 David Hund June 21, 2010 at 8:04 am

    Good points. In HTML5 the <b> and <i> elements ‘return’ and are actually given a different meaning (Mathias already mentioned the difference with <strong> and <em>).

    I understand why they would want to do that, but it does make it, imho, even more confusing.

    For example: the b element stands for “stylistically offset” text instead of bold text. The i element stands for text in an “alternate voice”… (see: http://html5doctor.com/i-b-em-strong-element/)

    It seems they simply have added (confusing) semantics…

    Obviously there are uses for this, but most people will continue to use <b> and <strong> incorrectly.

  6. 6 garann June 21, 2010 at 4:40 pm

    @David – The post you linked just about made my head pop off. It’s frustrating that these standards seem to be defined by information scientists, yet are intended for a medium where the bulk of the implementation is done by computer scientists..

  7. 7 xanthir June 21, 2010 at 6:39 pm

    @garann That’s just a long-winded way of saying “ and make things bold and italic, ffs.” while paying a token homage to making everything have semantic meaning. Just keep trucking like you already are, and you’ll be okay.

  8. 8 xanthir June 21, 2010 at 6:40 pm

    Sigh. Post reproduced below, with less mangling due to unescaped angle brackets:

    @garann That’s just a long-winded way of saying “<b> and <i> make things bold and italic, ffs.” while paying a token homage to making everything have semantic meaning. Just keep trucking like you already are, and you’ll be okay.

  9. 9 oliboblet June 23, 2010 at 7:52 am

    @garann I’m terribly sorry to have made your head pop off. I hope it reattached without too much bother 😉

  10. 10 garann June 23, 2010 at 2:54 pm

    @xanthir – Not sure if you mean my post or one of those linked, but trucking continues unabated. 🙂

    @oliboblet – Yeah, it’s back on now. Was just a little stunned by the variety of ways to mark something up that is bold or italic (vs. marking it up to be bold or italic) and the realization that even with everything you covered, there are probably more yet-undiscovered scenarios out there.

  11. 11 Andrew Dupont June 24, 2010 at 8:15 pm

    Late to the party, but Joe Clarke’s i let u b u is always worth a link when people talk about this shit.

    In general, b and i are useful for any situation where there are implied typographical semantics that aren’t covered by an actual semantic tag in HTML.

    For example, in English we italicize phrases borrowed from foreign languages, like je ne sais quoi, but there’s no foreignphrase tag in HTML, nor does a foreign phrase deserve the semantics of emphasis or citation or any of the other tags that just happen to italicize.


  1. 1 Jstn Ryan's Webpage Trackback on June 20, 2010 at 11:07 am

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




RSS Recent posts on the live version of this blog

  • An error has occurred; the feed is probably down. Try again later.

%d bloggers like this: