Proper HTML link formatting - can two inline block spans be inside of one anchor tag?

Question

I'm making a website that utilizes spans with a background-image:(so basically a picture) with a span nested in that that will display text over the picture.

The text and picture spans are both links that would go to the same place. I want my users to be able to click anywhere on the text or picture to navigate away from the page.

Instead of using using two tags that will link to the same thing in the same line of code, I noticed that I can put two spans, both the picture and the text, inside of the same tag and Chrome allows it.. but I don't know how support is on this kind of thing in other browsers.

Here's an example of what I'm doing:

<a href="https://theartofmikeyjoyce.com/">
  <span class="cell E4">
   <span class="text">MIKEY<br/>
       <p>IN THE CLUB II</p>DIGITAL COLLAGE
   </span>
  </span>
</a>

Now normally I'm aware that anchor tags shouldn't have inline elements so I set display:inline-block' on the span tags. I'm also using HTML5, and the documentation I found on this was vague at best. The code seems to work on all modern browsers I've tested, but is this really canon?

You mention that you're using `span`s, but you have `div`s in your example. — Klors, Jul 25 '14 at 02:35
"anchor tags shouldn't have inline elements" Did you mean "block elements"? `span` has always been allowed in `a` - there is no reason for it not to. In fact, the question seems quite confusing, spans are inline by default anyway so you shouldn't need to change anything to avoid breaking the layout. — BoltClock, Jul 25 '14 at 03:43
`span` inside `a` is acceptable if not strict dtd but `p` inside `a` is not good practice. — MarmiK, Jul 25 '14 at 05:18

score 4 · Answer 1 · edited May 23 '17 at 12:11

HTML and CSS are two separate things. HTML5 defines which elements may and may not be nested in which other elements, and while it also suggests how they should be displayed, how this display is implemented is specified by CSS.

Changing the CSS display mode of an element does not change where it may appear in an HTML document, since HTML doesn't know how an element is being displayed using CSS (if at all).

In HTML 4, the a element may only contain other inline elements. Note that HTML 4 has its own definition of "inline" and most if not all inline elements correspond to display: inline in CSS, but again, the two languages are separate.
In HTML5, the a element has a transparent content model, which means any element can appear as a child of the a element provided that element can appear as a child of the parent of the a element. So for example, while a section > a can have a div as a child, a p > a cannot, because a div may appear within a section, but never within a p.

These are rules given by the HTML standard, but as you can see they say nothing about whether an inline element can contain inline-block elements. You will find that information in the CSS standard instead.

In summary, inline-block elements are similar to block boxes, except that they are laid inline, just like regular inline elements. That's all there is to it. Assuming your a element is an inline element, browsers should have no problem rendering inline-blocks along the same line(s) as the a element (as its children, of course).

On the other hand, if your a element were to contain block-level elements (i.e. display: block), the behavior, while still pretty well-defined, becomes less predictable thanks to browsers like Chrome.

score 0 · Accepted Answer · edited May 23 '17 at 12:34

0

I think this is what you are looking for.

HTML 5 states that the element "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)".
Usually no, but if set to display: inline you should be fine.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 25 '14 at 02:01

StevieB

67
4

Proper HTML link formatting - can two inline block spans be inside of one anchor tag?

2 Answers2