Do you REALLY know HTML?

When I’m interviewing potential addition to our front-end team, there is one question which seem to trip up almost everybody. No matter if they managed to recite all the array object methods, and all jQuery functions, and can type a regex blindfolded, there one basic question I’ve seen dozens of (otherwise) talented get wrong.

What are the differences between the DIV, SPAN, and P tags?

It’s become sort of a FizzBuzz for layout.

For once don’t try to think outside the box. It’s all about the Box Model. The Box Model was published by the W3C around 2001 to help browsers display more advances layouts.

Every HTML tag has browser default settings for how it will lay out on a page. Which is why a web site like (which is hilarious btw) looks properly formatted even without any custom CSS. Knowing the browser default settings for key elements is essential to quickly laying out a page.

The key concerns on their difference are as follows:

  • Their Box-Type
  • How much margin (if any)
  • Semantic properties

The P tag

A P a block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. It can be the only thing on the line-box of the lines within it’s container. The P also has a bit of margin on it by default. 10px on Chrome.

The DIV tag

Like the P, the DIV is a also a block-level element. But it has no margin by default. This makes it ideal for laying out large page elements.

The SPAN tag

The SPAN is an inline-level element. This means it does not line break, and can share the same line-box as other elements. This makes it the goto tag for in line (inline) formatting.

The P also has a semantic quality about it, telling search engines the content inside is a paragraph. In HTML5, they introduced semantic tags such as ARTICLE, NAVIGATION, and FOOTER. They also offer a semantic value, but they are treated as block line elements. They are essentially DIVs with more context.

Box Model

Why is this important?

Most of what we do on the web boils down to these three tags. All that Ruby, and Mongo, and Javascript, and everything else eventually turns into those tags, or tags laid out by them. It’s probably important to know everything about them.

For more Box Model fun, there is a really good article by Shay Howe called Opening the Box model

Category: Product #: Regular price:$ (Sale ends ) Available from: Condition: Good ! Order now!
Reviewed by on. Rating: