SimpleQuiz › Part VII › Order Up

This quiz focuses on element ordering, and is based on a suggestion from Paul Smith. When hyperlinks are coupled with inline phrase elements (such as strong, em, abbr, etc.) are there any consequences in regards to the ordering?

Q: Which of the following is more semantically correct, and are there advantages to either method?

  1. <a href="http://www.simplebits.com/"><strong>The Greatest Web Site Ever</strong></a>
  2. <strong><a href="http://www.simplebits.com/">The Greatest Web Site Ever</a></strong>

35 Comments

  1. Kevin Lawver says:

    Why would you do either when you could put a class on the link?

  2. Kevin, because class="strong" is not the same as <strong>

  3. Kaklz says:

    I would go with A, as IMHO the effect you’re trying to achieve is to say that the link is more important than the text .. so if we are talking about semantics – says, that the link is the important part .. whereas says that the link caption is the important one, not the link. I might be wrong, but that’s how I see it.

  4. Kaklz says:

    Sorry, didn’t notice tags are working .. and actually I missed the letter, .. so:
    B says, that the link is the important part .. whereas A says that the link caption is the important one, not the link itself. So I would go with B
    (sorry for my previous post)

  5. Scrivs says:

    I think it totally depends on what you are trying to bring emphasis to. If you are trying to emphasize the text then A would be the correct choice semantically, but if you are emphasizing the link then B would be the correct choice. However, I don’t like B because why would you emphasize this link over all the others? Is it more important than any other link you have on the site?

  6. QUiS says:

    I would also go with A. You are not, I presume, wanting to put any emphasis on the link, only on the text within it. What’s more, you might well be adding more text to the link, or only stronging part of it (e.g. The World’s Greatest Website). Thus, A is easier to modify…

  7. I’m not sure which is more semantically correct, but in terms of advantages and disadvantages, I think that there’s an advantage to using A. If you style your links as “font-weight: normal”, then having the <a> tag inside the <strong> tag would override <strong>’s “bolding.” Semantically, it would still be considered an important phrase, but visually, it would just look like a plain link. Therefore, A might be the better choice.

  8. Niket says:

    In this specific situation, both are equivalent. I say this because there I have had situations on my website when <strong> is nested within <a>:
    We consider <a>spectral factorization of <strong>multi-variate systems</strong></a> in the next section.
    and situations where its the other way round:
    <strong>Please <a>register</a> early to avoid disappointment.</strong>
    So to me, nesting of the two are semantically equivalent. I would however nest <strong> within <a> so that styles of <a> do not override those of <strong>

  9. Adam says:

    I choose A because, what if you wanted to emphasize something following the bold? Like, Omaal.com: The best damn, ever. With B, you would either have to write invalid code, <strong><a></strong><em></em></a>, or make it a bold emphasis, which we all know isn’t the same semantic meaning as plain emphasis.

  10. Adam says:

    Wow, if you type slow around here you get beat to the punch, eh? 5 minutes ago QUiS hadn’t yet stole my thunder :)

  11. Niket says:

    This comment deserves “its better to use Lorem Ipsum as a place holder” reply; anyway here it goes.
    The specific example that you have chosen does not warrant a strong emphasis in my opinion. A link visually and structurally stands out in a page. Thats what a strong is intended to do. Just as I won’t nest em and strong around a single phrase (note <strong&gtLorem <em>ipsum</em></strong> may be OK), I won’t nest strong and a either.
    I sound confused, don’t I???
    :-)

  12. Dave S. says:

    I don’t think either is more universally correct: it depends on the application. In both cases the caption is being … what’s the verb for <strong>? Stronged? In both cases the caption is being stronged. B additionally gives the link strength as well as the caption. I’d believe you if you told me there were good reasons to use either in certain scenarios.
    I’d chalk this one up to ‘decide your correct usage on the fly’ and leave it at that. Anything even more in-depth is too tedious for me.

  13. Anne says:

    From an XHTML2.0 point of view: B, definitely. The a element has as much semantic meaning as a span and should therefore be inside the strong element, which can contain a href attribute in the future.
    Choose: <strong><em>Better</em></strong> or <em><strong>Worse</strong></em>. Isn’t that hard is it?
    Real XHTML pain: http://www.annevankesteren.nl/archives/2003/09/19/invalid-after-validated

  14. eric says:

    I’d choose A for Adam Polselli’s reasoning, and also because it makes for slightly cleaner and easier to understand code – you see the

  15. eric says:

    gah – you see the <A> tag before you see the <STRONG> tag.

  16. A. I think of <a> tags as more generic than <strong> tags – they can be applied to all sorts of objects (img, text, what else?). <strong> is something you do to text.

  17. Ryan Parman says:

    I’d have to agree with Niket’s post above. It’s situation specific in the sense that if you have a string of text, and part of it is linked, and part of it is strong, then you use whichever you need to.
    However, in a case identical to the one posted, where the linked text is the strong text, I’d say you could use either interchangably. Unless you have a stylesheet that dictates that links use font-weight:normal;, in which case you’d nest the <strong> inside the link tags.

  18. Niket says:

    OK, how can <strong><em>something</em></strong> ever be right?
    In HTML 4.01 (yeah, I am antiquated), strong is defined as “strong emphasis”. Nesting em and strong should define “strong emphasis emphasis”. How can that be semantically correct?
    (or have I misread the recommendations?)

  19. i’d say B, for no other reason than the fact that in A the “strong” aspect seems to be made part of the link, which to me doesn’t make as much sense as B. difficult to explain in words…hope you get the idea though…

  20. “Why would you do either when you could put a class on the link?”
    well, that would imply that strong is used to trigger some specific visual effect (bold text)…in which case the whole discussion about “which is more correct” is irrelevant, as you’re perverting markup to get a certain styling. sure, if all you want to do is make it bold, then you should use css…but in this case it’s safe to assume that strong carries some SEMANTIC meaning…

  21. Dan R. says:

    I vote A, and here’s why:
    The example code above will look identical in a visual browser, and in a text reader (tested in Lynx). However: If you want to highlight a specific word contained within the link, only example A will suffice.
    Demonstration
    Code:

    <a href="http://superfluousbanter.org/">SuperfluousBanter isn't even <em>close</em> to the greatest site ever.</a>

    HTML:
    SuperfluousBanter isn’t even close to the greatest site ever.
    or
    Code:

    <a href="http://superfluousbanter.org/"><strong>SuperfluousBanter:</strong> Doesn't hold a candle to SimpleBits.</a>

    HTML:
    SuperfluousBanter: Doesn’t hold a candle to SimpleBits.
    Example B above doesn’t allow specific emphasis, and since (IMO) both are equally correct semantically, I’ll chose A for it’s flexibility.

  22. Jeff Croft says:

    I think some people are missing the point of the strong tag. People are seeing it as a way to bold text, when that is a STYLE, not a STRUCTURE. The strong tag is NOT exclusivey used on text, and can be styled any way you like. All you are saying by wrapping an element in a strong tag is that it is an important item. You could have strong text. Perhaps you style it in a different font, color, and weight. Likewise, you could have a strong image — maybe it gets a wider border, or a different color border. You could have a strong DIV, which maybe is styled with a specific background color. The point is, strong is not just for text, and not just for bolding, either. :)
    Jeff

  23. Niket says:

    I will have to disagree with Jeff. You can never have a division, a paragraph or several sentences with “strong” emphasis. Em and strong are necessarily “reserved” for words, phrases or in some cases – a sentence. But if you have a paragraph within <strong>, you should think again.
    (I am referring to <p><strong>A paragraph full of blah.</strong></p>)
    I was always reminded time and again that boldface should be used sparingly in technical documents. I was always told that you should emphasize at most a point or two on a presentation slide. If an entire block of information is to be highlighted, don’t emphasize the entire paragraph; instead empasize the heading or first line to indicate the importance of the paragraph to follow.
    I disagree with some people who seem to suggest that semantic propriety has nothing to do with style/display. I would like to argue that style is separate from semantic structure, the converse isn’t necessarily true. You do not have an emphasis if the emphasized phrase looks the same as the normal text or if it is spoken in the normal tone. Barring some exceptions that I can’t think of right now, a “structural” emphasis is also a “visual” (“stylistic”) emphasis; though a visual emphasis may not be a structural emphasis.
    Verbose as ever,
    Niket Kaisare

  24. David H says:

    Jeff, <strong> is inline, <div> is block-level. Inline elements can not contain block-level elements.

  25. Asapin says:

    I would go with B. The way I see it, a link is composed of its tag and text as a single entity, so the whole link should be emphasized. There are situations like Dan showed where you would want to use A for it’s flexibility in emphasizing only certain parts of the text contained within the link.
    Are there any positive or negative benefits to search engines with either method?

  26. Andre Leistner says:

    I like the conclusion from Niket’s first comment:
    “So to me, nesting of the two are semantically equivalent.”
    That’s it. If you leave out the link markup from the two options the text will not change its semantic meaning. It will still be just text with <strong> importance added. The question really is, whether links are semantic or not. To me, associating a word or a phrase with a link does not change its semantics (as Anne pointed out as well). It just adds that nice little connection on where to find additional or related information.

  27. Anne says:

    David H,
    I think you will be surprised after you read what is possible.

  28. I would go with B, assuming the intention is to emphasize the link. A link is not just a string of words, it is a string of words with an associated URL. The a tag neatly combines the words and the URL they are linking to in to a single unit. It is this whole unit that is being emphasized, not just the words within it.

  29. David H says:

    Anne, yea, and I lied too, there are at least three inline elements that I know of that can contain block-level elements. But let’s end this discussion here.

  30. If the link as a whole is the important thing, then the A tags should appear inside the STRONG tags. But quite frankly, I think it’s always going to be a pretty fine line as to whether the link is the important bit or the words forming the link.
    The difference in meaning is so subtle, that I can’t think have any situations where the tag order in the example would actually make any difference to anyone.

  31. Paul Yasi says:

    I think I would go with A since the text is being emphasized, and not the link – but in the end I don’t think it matters and I would probably end up typing something ugly like <a href=”http://www.simplebits.com/”><strong>The Greatest Web Site Ever</a></strong>

  32. Anne says:

    Indeed, that’s ugly and invalid ;).

  33. Dub Dublin says:

    The basic question (not really answered by any of the comments so far, is it?) is this:
    What does it mean to STRONG a link? STRONG *within* a (text) link is pretty clear, but STRONGing the link itself? Is that even appropriate, given (as mentioned above) that an A tag isn’t even necessarily a text element? I think this one has to be choice (A).

  34. Jeff Croft says:

    Well, I stand corrected. You guys are right…you can’t use STRONG on a DIV. However, my point, I think, remains intact. STRONG does not necessarily equal bold. :)

  35. Semantically, I agree with B if the entire link is meant to be emphasized, or A if only a portion of it is meant to be emphasized. But there is a browser bug in some versions of Mozilla/Netscape that should be addressed, which
    points to B as the best choice. The example given at this link referes to the em tag, not the strong tag, but I believe the principle is the same.