Are HTML5 tags are not block level elements?

Question

If I have a HTML element <header> and apply some margins to this HTML5 element through CSS as:

header{
  margin:10px 0;
}

The <header> element is not spaced 10 px from rest of the elements. But if I modify my CSS rule like below:

header{
  margin:10px 0;
  display:block;
}

then the <header> element is spaced accordingly.

So, my question here is that do I need to manually set display:block; in order to set margins/paddings to HTML5 elements, like <header>?

PS: to clarify, this is not part of the production code/live website. I'm just experimenting with HTML5 tags. :)

Answer 1

Yep.

At least, in the current browser environment.

Edit: The spec says the "typical default" is block, but that doesn't seem to be the case for current browsers.

Answer 2

The spec seems to list header as a block level element, http://www.whatwg.org/specs/web-apps/2007-10-26/multipage/section-documents0.html#block-level0

But since HTML5 is not finalized yet, it's understandable that user agent vendors don't automatically make them block-level. So you should just make a rule setting those html 5 elements defined as block by the spec to be display:block;.

Answer 3

They are block level — just not widely supported by browsers. This is the price of trying to use features from an unfinished, bleeding edge, draft specification.

I would stick with HTML 4.01 for the time being.

You can style the elements to render as blocks in some browsers.

In oldish versions of IE you will have to do something along the lines of document.createElement('header') to get the browser to even recognize it for styling (and this will fail if JS is disabled).

Answer 4

To allow you to use HTML 5 elements in older browsers which don't support them, you can use a shiv script by Remy Sharp which basically 'creates' those elements utilising javascript.

http://remysharp.com/2009/01/07/html5-enabling-script/

And there's a really useful CSS Reset by Rich Clark which encompasses HTML 5 elements:

http://html5doctor.com/html-5-reset-stylesheet/

I use HTML5 in many of my projects for a variety of reasons, foremost because I like new toys! (it also helps reduce code size on a small level and I prefer the more semantic elements)