Are HTML5 tags not block level elements?

Question

If I have an HTML <header> element and apply some fields to this HTML5 element via CSS as:

 header{ margin:10px 0; } 

The <header> element is not 10 px from the rest of the elements. But if I change my CSS rule as shown below:

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

then the <header> element is spaced accordingly.

So my question here is that I need to manually set display:block; to set fields / paddings for HTML5 elements like <header> ?

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

Answer 1

The specification 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 yet complete, it’s clear that user agent providers do not automatically block them. Therefore, you just need to set a rule so that those html 5 elements that were defined as a block specification are display:block; .

Answer 2

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

I would stick with HTML 4.01.

You can style elements for rendering as blocks in some browsers.

In older versions of IE, you will need to do something in the lines of document.createElement('header') so that the browser can even recognize it for styling (and this will fail if JS is disabled).

Answer 3

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

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

And there is a really useful CSS Reset from Rich Clark that includes HTML 5 elements:

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

I use HTML5 in many of my projects for various reasons, primarily because I like new toys! (this also helps to reduce code size at a small level, and I prefer more semantic elements)

Answer 4

Yes.

At least in the current browser environment.

Edit: The spec states that “typical by default” is a block, but this is not like for current browsers.