HTML Tags: An Opposite to Emphasis?

Posted April 29, 2010 * Comments(9)

I thought I’d write a quick post about something that always seems missing when I’m marking up content for a web project.  HTML provides us with plenty of tags that increase the importance/weight of text, but very few (if any) to decrease the weight.  If you want to emphasize text, you have a number of reasonable options:

  • <em> – meaning “emphasis”
  • <strong> – meaning “strong emphasis”
  • <b> and <i> – deprecated, but accomplish similar goals
  • <h1> … <h6> – headers, usually larger fonts
  • <big> – may mean size, may mean importance

But where do I turn if I’d like to deemphasize text.  There are lots of situations where I’d like to semantically define some content as less important than the surrounding content.  Typically, I just use a <small> tag, but I feel like that’s not ideal… I don’t necessarily want to make the text smaller.

Here are some ideas I’ve brainstormed… I’m looking for short words that won’t interfere with legibility of inline content:

  • <de> – meaning “depreciate” or “deemphasize”
  • <dim> – meaning “diminish”
  • <dp> – meaning “downplay”
  • <ig> – meaning “ignorable”
  • <less> – meaning “lessen” or “less important”
  • <min> – meaning “minimize”
  • <un> – meaning “unimportant” or “unnecessary” or “understate”
  • <weak> – the opposite of <strong>

What do you think?  Would there be any value to an HTML tag that allows us to semantically de-emphasize text?  Do you have any ideas

9 Comments so far

  1. John Young on April 29th, 2010

    I thought “surely this already exists”, but two minutes of Googling convinced me that you’re right!

    Of your ideas, I like “dim”, but that seems to be stepping on presentation’s toes, and is not a purely semantic tag. So I would pick “weak” as the best alternative, especially because it already has a counterpart in “strong”

    I think this could be very useful for helping a screen-scraper or other service figure out what to knock off from a ball of presentation it had fetched – like the “member since” stuff that’s typically next to a username in lists.

  2. Saul on April 29th, 2010

    As long as we’re blue-skying why not a hierarchical tag (like heading tags) for non heading content – Contextually Important, Contextually Insignificant

    Just a thought..

  3. Saul on April 29th, 2010

    Hmmm my contextual ‘c1′ and ‘c6′ tags are missing from my comment.

  4. Jason Tremblay on April 29th, 2010

    Sorry Saul… WordPress probably stripped out the tags. I presume you meant <c1> and <c6>. Not a bad idea, although it’s a bit more than I’d need in any of the cases I’ve run into.

  5. Jason Tremblay on April 29th, 2010

    My friend Marc on Facebook wrote:

    “Interesting idea. However, I think it begs the question, if something is contextually unimportant, should it even be there in the first place?”

    My friend Jim on Facebook writes:

    “HTML aside, how is this accomplished normally? what sort of style gets applied to de-emphasized text?”

    “I mean, any type of style applied to text that doesn’t match its context automatically sets it apart, right? and being visually different in and of itself “emphasizes” it, doesn’t it?”

  6. Jason Tremblay on April 30th, 2010

    To be perfectly honest, I’m having trouble coming up with a good example. Best one I can think of at the moment: I was marking up a table of contents, and each list item consisted of a chapter number and a chapter name. For example:

    Unit 2: Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb (continued)

    That entire thing is the title of the chapter, but different parts are arguably more important than others. Depending on my mood, I could make a case that any of the following should be deemphasized:

    “Unit 2″
    “or: How I Learned to Stop Worrying and Love the Bomb”
    “(continued)”

    The reasons vary, but I think any of them is a good candidate. If I think of a better example, I’ll post that too. I simply think that we should have the option to go either way.

    To Jim, I’d say that you’re mistaking style for semantic markup. HTML isn’t a style language, it’s a markup language. The whole point of HTML CSS is that the presentation style should be separated from the meaning of the markup. You shouldn’t be tagging something with <em> just because you want it to appear emphasized… it’s a subtle distinction, since emphasis nearly always implies a visual difference as well.

  7. Jason Tremblay on May 3rd, 2010

    Further Facebook conversation:

    Marc:

    I see where you’re headed. In that particular case, I think you just as easily emphasize “Dr. Strangelove” and leave the rest.

    Either way, I’m enjoying the intelligent discussion of the subject ;-)

    Me:

    Yep, that’s typically what I’d do. Typically there’s a resonable alternative. It’s just one of those things… I never knew I wanted it till the day it first occurred to me (who knows what the original circumstance was). After that, I found myself spotting other circumstances where it could be useful.

    Thanks for humoring me Marc, and my appologies to all my friends who don’t give a hoot about this.

    Jim:

    I understand the difference between semantics and style, but from a practical perspective, if you’re going to have N distinct number of ways to markup text, shouldn’t there be *at least* N ways to style them (assume we’re talking about the richest presentation format available). I think we simply don’t have enough styles to de-emphasize text to justify the number of tags you’ve presented.

    I’ll look at your example later from home, as your website is blocked from my office.

    Me:

    First of all, the list of tags were a set of ideas. I’d only look for the addition of one or two at most.

    Regarding justification of added tags, it’s not based on number of styles available. Even if we chose to style an entire text the same way (visually), the markup could still be useful to other systems accessing the document… such as … See Morejavascript or a search engine spider.

    Regarding number of styles available… we already have practically unlimited variations of style available. To begin with, # of available colors * number of available point sizes * number of available font faces. Any deemphasis would be a variation in importance from the surrounding context (in terms of meaning, not style).

    So a big, bold red page title might want to have a lighter gray subtitle part. The two should be marked up as the same HTML header (<h1>), but part of the header should be diminished in importance.

  8. Jason Tremblay on May 3rd, 2010

    Update: Looks like this has been discussed previously by the WHATWG…

    See: WHATWG Archive search for “de-emphasis”

    One responder posited a tag called <dem> Most of the responses seemed to oppose the addition of such a tag… nobody gave any really good examples of a good usage. One odd thing was that they all seemed to assume that the markup would be withing the body copy of a text, rather than in a header/footer/sidebar/table, etc.

    Doesn’t seem like they came to any conclusions, so I guess I’m stuck with using “small”… but I’m definitely going to bee keeping my eye out for an example of why this tag would be a good addition to HTML.

  9. Freddie on June 9th, 2010

    I found this post as I’m currently trying to find a way to de-emphasize the importance of some footer text on a site. Since the footer text with stuff like ‘copyright’ and ‘all rights reserved’ is included on all pages of the site Google ranks them as pretty strong keywords, where they in fact doesn’t say anything about the site. That’s an obvious example, for SEO purposes, that I can think of…

Leave a reply