Is it <p><a> or <a><p>?

Such a newbie question - I know!!

If I have text in a box that I want to turn into a hyperlink, which is correct…

Option #1:

<p><a href=''>Call for an appointment</a></p>

Option #2:

<a href=''><p>Call for an appointment</p></a>

Thanks.

Option 1, as a is an inline tag and p is a block tag.

2 Likes

Okay, thanks.

Would the same logic apply if < p > was replaced with < h1 > ?

Yes.

Thanks!

In html5 either are valid as ‘a’ elements can now contain flow-content as well as phrase content (but not interactive elements like other anchors or objects etc ).

Again context is the key and if you have a text block that needs to be a link you can do this.

 <a href="link.html">
	<h3>A heading</h3>
	<p>Something to do with the heading lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet.</p>
	<p>Read more</p>
</a>

(If you use the above method its best to set the anchor to display:block to help older browsers).

If you just have the one phrase then just put the anchor around the phrase.

   <p> <a href=''>Call for an appointment</a></p>
4 Likes

If you are not sure about this kind of thing, or even if you think you are sure, try validating your pages.
It will soon tell you if you nested any elements wrongly, as well as anything else that’s wrong.

2 Likes

Anchors are now the only inline element allowed to house a block element. So…normally inline cannot house a block element, but since this is an anchor this is an exception to the rule.

Edit-Oops - didn’t see Paul posted…

Seems completely wrong to permit that big of a block to be a link, but I get why they did it.

It does feel dirty but it is sort of useful. I ain’t complaining :slight_smile: .

Figures it would be right up your alley… I need a shower now.

1 Like

Yes I was really against it at first (mainly because it broke all the browsers at the time) but I’ve come to terms with it now:)

2 Likes

I would have preferred the now abandoned XHTML 2 solution of allowing any tag to be converted to a link by adding an href attribute to it. That would have been a far more semantic solution to the one they chose.

2 Likes

Am with Stephen on this one.

In any case, do be careful if you chose to wrap the Anchor tag around a block(s) of text that such text does not contain other anchors! This may sound like basic common sense, but if your content is automatically created or pulled from a DB/CMS… then you may end up with inadvertendtly nested links

1 Like

… or other interactive content like forms, or objects.

2 Likes

I call it “paving the cow pats”. People were doing it anyway, so there seemed to be a need/desire for it.

A few browsers wouldn’t choke when it came up, but there wasn’t universal support.

TBH making it work without nesting is a huge PITA. Aka I’m not complaining.

Well, yeah, both ways are Ok.

However, option #2 (<a href=''><p>Call for an appointment</p></a>) has usability issues: Selecting the text can be difficult.

Try selecting the paragraph in this demo: http://jsfiddle.net/z0mx0yqv/1/

This happens when trying to support older browsers by making the link a block element. It also happens if there’s a block element inside the link.

The only way to select the text is by carefully aiming the mouse to the left edge of the container and select. However, this is not intuitive so the users may think that it’s just impossible to select the text at all.

I prefer method #1 if conditions allow it.

1 Like

Option #1: is correct…

Both are now ‘correct’ - option 1 is the better one