OK To Wrap Block Elements Inside Inline? (Example) - Treehouse

🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Curious which AI tools Treehouse developers love? ⚙️ Check them out!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

• Treehouse Logo

• Plans Chevron
  • For Individuals
  • For Businesses
  • For Schools
  • For Libraries
  • For Military
• Library Chevron
  • All Courses
  • Tracks
• Techdegree Chevron
  • Overview
  • Front End Development
  • Full Stack JavaScript
  • Data Analysis
  • UX Design
  • Python
• Community Chevron
  • 100 Days of Code
  • Live Sessions
  • Code Adventures
  • Discord
  • Forum
  • Success Stories
  • Treehouse Links
• Resources Chevron
  • Career Toolbox
  • CodeForward
  • Free Treehouse Near Me
  • Jobs
  • Blog
  • Support
  • About
• Plans For Individuals For Businesses For Schools For Libraries For Military
• Library All Courses Tracks
• Techdegree Overview Front End Web Development Full Stack JavaScript Python Development Data Analysis UX Design
• Community 100 Days of Code Live Sessions Code Adventures Discord Forum Success Stories Treehouse Links
• Resources Career Toolbox CodeForward Free Treehouse Near Me Jobs Blog Support About
• Sign In
• Free Trial

Instagram Twitter Facebook YouTube LinkedIn

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

• Watch Video

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

Lidija Novakovic

6,634 Points Posted March 26, 2014 1:33pm 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

PLUS

Dino Paškvan

Courses Plus Student 44,108 Points Dino Paškvan

Dino Paškvan

Courses Plus Student 44,108 Points March 26, 2014 2:39pm

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

Courses Plus Student 94,610 Points Jason Anello

Jason Anello

Courses Plus Student 94,610 Points March 26, 2014 11:06pm

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

Courses Plus Student 44,108 Points Dino Paškvan

Dino Paškvan

Courses Plus Student 44,108 Points March 26, 2014 11:17pm

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.

Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.