Emphasized Links: What comes first, the a or the strong?

It all started quite harmlessly. I was working on a couple new pages and realized I’d never given much thought to how I handled the occasional bold link. Now, these isn’t presentational bold. I actually wanted to use emphasis on the words that are linked. We’re talking <strong>, not <b>, folks.

I tweeted:

When you place strong emphasis on a link, do you put the <strong> inside the <a> or the <a> inside the <strong>? I think I’m inconsistent.

I had been putting the the <a> outside of the <strong>. Like this:

<a href="http://mailchimp.com/"><strong>MailChimp</strong></a>

My reasoning was that if you take away the link, I would still want the phrase to be emphasized.

However, Matt brought up some good points. His first was that I’m linking the phrase, not the emphasis. I can buy that. Also, he brought up the point that putting the <strong> outside is cleaner for semantic web scraping stuff.

I assumed this was minor and no big deal. But I’m happy to see that there are others who also care about this stuff. So, what do you do? What’s your reasoning?

13 Comments

  1. On March 6th, 2009 at 10:27 pm Chris Bloom said:

    OK, so the webscraping bit makes sense.

  2. On March 6th, 2009 at 10:31 pm Hilary Mason said:

    What a good question — I haven’t given it much thought before now.

    I tend to put the <strong> tags inside the <a> tags because there are some occasions when I want only a single word in a link to be bold, and I like to maintain consistency.

    For example: <a href=”http://www.darowski.com”>Adam’s <strong>excellent</strong> blog</a>.

    I think both are correct, but it’s interesting what leads someone to make one choice over the other.

  3. On March 6th, 2009 at 10:49 pm Rich Thornett said:

    I was born to overthink things like this. Matt makes some good points. Here are my thoughts:

    * His first was that I’m linking the phrase, not the emphasis.

    I disagree. Remember that <strong> is a *semantic* tag. If you were just linking the phrase and wanted it to appear bold, you’d style the link to achieve this. But by adding <strong>, you’re not just making it bold, you’re emphasizing it in a semantic sense. I believe the hyperlink should respect the semantic emphasis and thus include it within.

    * Also, he brought up the point that putting the <strong> outside is cleaner for semantic web scraping stuff.

    True, but you could have any number of tags within a hyperlink, e.g. <a href="boston"><span class="locality">Boston</span></a> . To be robust, a scraper has to deal with tags in hyperlinks anyway.

    I reserve the right to be entirely wrong about all of this.

  4. On March 6th, 2009 at 11:03 pm Adam Darowski said:

    Yeah, this definitely revolves around the <strong> being semantic. The argument seems to be:

    1. The <a> should capture emphais
    2. The <a> should only link the raw phrase

    I gotta admit, not sure which side I stand on yet. The emphasis isn’t necessarily what’s being linked (though in Hilary’s case, the <strong> does need to be inside inside the link).

  5. On March 6th, 2009 at 11:12 pm Rich Thornett said:

    Remember that by placing the <strong> around the hyperlink, the link itself is now semantically emphasized. Not to be a hopeless semantic, but this seems wrong.

  6. On March 6th, 2009 at 11:25 pm Adam Darowski said:

    Hm, I think I’d rather have the link capture the semantic value of the phrase (what Rich proposes, and what I was originally doing) than have the anchor itself be strangely emphasized. You may have switched me back, you wry coder, you.

  7. On March 7th, 2009 at 7:32 am Dave Tufts said:

    I keep the [a] on the outside for consistency.


    Visit our Support Site
    Download via FTP
    Foo & Bar

    It wouldn’t feel right in the first example, if I decided the entire link should be bold, that I’d have to change the order to [strong][a]Visit our Support Site[/a][/strong]

  8. On March 7th, 2009 at 7:37 am Dave Tufts said:

    I tried to have the tags print out in the example above, but it didn’t work. My examples were:

    [a]Visit our [strong]Support Site[/strong][/a]
    [a]Download via [acronym title=""]FTP[/acronym][/a]
    [a]Foo [em]&[/em] Bar[/a]

    strong, em, span, acronym – are rarely applied to the entire link. In cases where they’re not, they HAVE to be the inner element. Therefore — to avoid thinking too much — they should ALWAYS be the inner element.

  9. On March 7th, 2009 at 8:35 am Adam Darowski said:

    Yes! There’s an argument that makes it fairly obvious. Thanks, Dave. Okay, I’m sticking with my original approach! I’ve been convinced! :)

  10. On March 7th, 2009 at 8:52 am Jeff L said:

    Just to play devil’s advocate here, Dave’s argument could be reversed. What if you only wanted to link one work inside a phrase that had a [strong] tag around it, etc?

    [strong]Visit our [a]support site[/a][/strong]

    So, I think the question here can only apply when the there is only one word in question, or when the entire phrase in question would be surrounded by both tags.

    However, having said that, I’d probably put the [a] tag on the outside as well.

  11. On March 7th, 2009 at 9:07 am Joe Alba said:

    I’m with Matt on this one, but I can see an exception.

    Visually emphasizing parts of a link description looks pretty 1997 to me. But if you are adding semantic value to parts of a link description (microformats), the added tags in the description don’t really bug me.

  12. On March 7th, 2009 at 9:43 am Art Lawry said:

    Like any good web developer’s wife should, Leanne filled me in on this discussion so I thought I’d weigh in.

    To add emphasis, there has to be non-emphasized content. Not technically. You could put your entire page in a strong tag, but logically, you are emphasizing some content over other content.

    Also, when using strong tags you are emphasizing content, not structure… words, not their behavior or appearance.

    So for me, I would put the strong tag first as you are emphasizing text in the larger context (paragraph, list item, etc) and not emphasizing all text in a link (which has non non-emphasized text).

    Just the way my brain works.

  13. On March 7th, 2009 at 10:14 am Adam Darowski said:

    @Jeff:

    Just to play devil’s advocate here, Dave’s argument could be reversed. What if you only wanted to link one work inside a phrase that had a [strong] tag around it, etc?

    Right, I think in this case, the link definitely comes inside the <strong> tag. It’s pretty easy when part of a link needs emphasis or part of the emphasized phrase needs a link. It’s when they’re both the same that it… really could go either way, I suppose.

    @Joe:

    Visually emphasizing parts of a link description looks pretty 1997 to me.

    I’m not worried about this. If something inside a link deserves emphasis, that’s the way you semantically mark it up. Can’t really be worried about the cosmetics of it.