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.
Every HTML tag has browser default settings for how it will lay out on a page. Which is why a web site like motherfuckingwebsite.com (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.
Why is this important?
For more Box Model fun, there is a really good article by Shay Howe called Opening the Box model