Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Lidija Novakovic
Lidija Novakovic
6,634 Points
Posted by Lidija Novakovic
Lidija Novakovic
6,634 Points

OK to wrap block elements inside inline?

Just a quick question and maybe the answer will show itself later on - but is it really ok to wrap block elements with an inline? <a href="#"><h2>Lorem</h2></a>

1 Answer

Dino Paškvan
PLUS
Dino Paškvan
Courses Plus Student 44,108 Points
Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

In HTML5 it's perfectly fine to wrap block elements inside inline elements. In fact, HTML5 doesn't differentiate inline from block elements (CSS does). In HTML5, different element types fall under new categories —Content Models.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Dino,

I'm not sure that it is ok to do it with all inline elements. I know for sure the a element is allowed but not sure about the others.

If you take a look at the phrasing content section:
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#phrasing-content

There's a note Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

So I'm not sure that a span could contain a div for example.

So far, the a element is the only one that I've been able to confirm for sure.

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Of course, this can be rendered somewhat moot by changing the display property of a div to inline in CSS, and AFAIK, most HTML rendering engines would still render it the way it was intended, even if it's strange to the point of being wrong.

But I do get your point. I probably should have phrased my answer a bit differently, I meant that it was perfectly fine in the context of the question.

While something can be done (validators might complain, but with the rate at which the standards are evolving and with browser prefixes, validators complain about things all the time) that doesn't mean it should be done, and both logically and semantically it doesn't make much sense to wrap a div inside a span.