CODEWITHSUNDEEP
htmltagsnested
Naoise Golden
Naoise Golden

Reputation: 8913

<strong><a> or <a><strong>?

Which is the best practice when nesting inline and anchor tags?

<strong><a href="">link</a></strong> or <a href=""><strong>link</strong></a>

Surprisingly enough I haven't found the answer here or googling it.

Upvotes: 24

Views: 12170

Answers (7)

user254875486
user254875486

Reputation: 11240

There is a difference, for instance if your stylesheet defines:

a {
    font-weight: normal;
}

If you put the <a> within the <strong> element the link will not be bold, if you put the <strong> tags within the <a> it will. In my view <strong> should be inside <a>.

EDIT: Please note that I'm not advising anyone to do this, I'm just pointing out that there are cases in which the order of the tags does make a visible difference. As Mihalis Bagos pointed out; I think it will be best to omit the <strong> tag if the entire link will be bold.

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

Other things being equal, <strong><a href="">link</a></strong> is slightly better, since then the innermost markup is for a link and this helps to keep link appearance consistent. Some day, someone might want to set a color for strongly emphasized texts, i.e. for <strong> elements. A simple color assignment would then not affect the color of strongly emphasized links, letting link colors prevail – and things like different colors for visited, unvisited, hovered, and active links can be essential to usability.

But if you nest them the other way around, you just need to be more careful in styling.

Upvotes: 2

Ulrich von Poblotzki
Ulrich von Poblotzki

Reputation: 456

My interpretation of the HTML 2 standard is, that <a><strong></strong></a> would be correct:

5.7. Phrase Markup

Phrases may be marked up according to idiomatic usage, typographic appearance, or for use as hyperlink anchors.

Upvotes: 17

Mihalis Bagos
Mihalis Bagos

Reputation: 2510

None is correct.

If it's just a matter of styling the entire <a> tag in bold, do it using CSS and leave the <strong> tag where it would have a significant semantic meaning.

<a> tags have a specific meaning and just bolding them all up won't change that meaning.

Upvotes: 23

dash
dash

Reputation: 91550

The answer is, either is fine, really as they are inline elements.

However, if you want to make the contents of the entire anchor bold, I would but it outside; this is more of a scope thing - I am making it clear I want any children of this element to be bold.

I would put strong tags inside the link only when I wanted to embolden a part of the link (perhaps click here) for example.

Upvotes: 4

David
David

Reputation: 435

It depends if you want to change the content of the link later with javascript. Putting the strong around the a will make sure the new content is displayed strong too.

Upvotes: 1

Saic Siquot
Saic Siquot

Reputation: 6513

from the SEO point of view, both are bad, the correct form is:

<a href="">in a relevant phrase a <strong>relevant</strong>link</a>

Upvotes: 8

Related Questions