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 trialLidija Novakovic
6,634 PointsOK 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
Courses Plus Student 44,108 PointsIn 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
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsDino,
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 adiv
for example.So far, the
a
element is the only one that I've been able to confirm for sure.Dino Paškvan
Courses Plus Student 44,108 PointsDino Paškvan
Courses Plus Student 44,108 PointsOf course, this can be rendered somewhat moot by changing the display property of a
div
toinline
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 aspan
.