3

I am using an anchor tag, and the text that is displayed in the hyperlink is supposed to be italicized. When using the anchor, do I use the italics tags on the text itself or do I italicize the entire anchor tag? Which is the correct syntax?

Example:

<a href="http://www.google.com/"><i>Google</i></a>

Or:

<i><a href="http://www.google.com/">Google</a></i>
Beau Smith
  • 33,433
  • 13
  • 94
  • 101
Kevin Andrew Fogg
  • 43
  • 1
  • 7

2 Answers2

4

Both are completely valid. See the HTML5 Specification where the semantics and usages of the tags are explained. On the a element:

4.5.1 The a element

[...]

Contexts in which this element can be used

  Where phrasing content is expected.

Where the context in which an element can be used is where the element is valid and can be used1. Phrasing content is defined as such in the specification:

Phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs.

a abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite
code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark 
math meter noscript object output progress q ruby s samp script select small span strong 
sub sup svg template textarea time u var video wbr text

Thus, phrasing content means the text of the document or elements that mark up the text, such as a for hyperlinks or i for italicization. Any of the above listed elements are applicable. If you look at the i element:

4.5.17 The i element

[...]

Contexts in which this element can be used

  Where phrasing content is expected.

From the specification, it says that a and i can be used in the same context, phrasing context. Thus, we can conclude:

  • An a element inside an i element is fine because an a element can be used in phrasing content. i is phrasing content so it's valid.
  • An i element inside an a element is fine because an a element can be used in phrasing content. a is phrasing content so it's valid2.

With validity aside, which way you choose is totally up to you, one is not more valid than the other.

1 This is usually determined if the element is block-level or inline but HTML5 has since removed these types in favor for a few more descriptive categories, read more at MDN.

2 Note that even though a is phrasing content, you cannot have an a nested inside another a. This is because a's content model does not for interactive content. Other restrictions might apply for other elements.

Andrew Li
  • 55,805
  • 14
  • 125
  • 143
0

Both are valid. I'd personally use:

<a href="http://www.google.com/"><i>Google</i></a>

because this implies that the text in the <a> tag is special.

Cassidy
  • 3,328
  • 5
  • 39
  • 76
  • Basically what you're saying is that it is a preferential thing? Which is what I figured. Thanks! – Kevin Andrew Fogg Mar 07 '17 at 22:48
  • @KevinAndrewFogg kind of. It's more of a context thing than anything. Again, if it's the text within the link that you want to emphasize, then it should get that tag. If some links are special and some are not (regardless of text), then you might want to put the `` tag around the `` tag. – Cassidy Mar 07 '17 at 22:54