Use <div> as backup tag for HTML5 semantic elements

Question

I plan on using some of the new HTML5 semantic elements, but it looks like some of them aren't well supported even on newer browsers (main isn't supported in IE11 as far as I can tell) is there a way to have them be treated as a <div> if they aren't supported, as the HTML5 semantic tags I plan on using are currently basically the same as divs AFAIK (header, footer, main are the ones I currently plan on using, also canvas but there isn't a good alternative tag to do what canvas does).

Currently if I use one of the unsupported tags in IE it seems to be treated as an unstyled tag but the issue is I can't set the width or height of it in css. What can I do for it to be treated as a and apply all styles that I put in css to that element using the name of the tag as the selector as though it were a <div> .

main
{
    width: 100px;
}

does not work in IE11, if it was IE7 or something I wouldn't be too worried but quite a lot of people still use more updated versions of IE and I don't want the website to display improperly to them.

Answer 1

You need the HTML5 shim for supporting older browsers but using just the HTML5 shim does not fix IE11 see: http://jsfiddle.net/jbowyers/n3qZp/ . So you also need a CSS reset that includes the 'main' element such as normalize . Or you can just add the CSS reset directly to your project as mentioned by others

    main { display: block;}

Answer 2

The html5shiv will allow you to style the main element in IE 11 (and less). There's an explanation of what it does (actually a breakdown of its entire history) here .

Money quote:

Btw, if you want CSS rules to apply to unknown elements in IE, you just have to do document.createElement(elementName). This somehow lets the CSS engine know that elements with that name exist

NB. You should probably be using the shiv as a matter of course if you're using HTML5 and plan to support anything less than IE 9.

Answer 3

I think I have found a solution.

In my css file if I do:

main /*or any other unsupported tag that you want treated as a div*/
{
    display:block;
    other-property:other-value;
    other-property:other-value;
    ...
}

It seems to act identical to a <div> tag. I haven't thoroughly tested or researched this solution (tested several attributes including color, width and text-decoration on IE11 and google chrome with tag named <asdasd> and it worked exactly like a <div> ) so if anyone knows any problems with it please let me know.

Answer 4

I'm not sure what the question really is, but the title “Use <div> as backup tag for HTML5 semantic elements” is a good answer to the question “How can I use the HTML5 main , header etc. tags to that my page also works on browsers that do not support them?”

For example, instead of having just <main>...</main> in HTML and main { ... } in CSS, you would have

<div class=main>
<main>...</main>
</div>

in HTML and

.main { ... }

in CSS.

This may look redundant, and you get almost the same browser coverage by using polyfill like html5shiv and explicitly declaring main { display: block } if the polyfill doesn't do that. But in this approach, you do all the styling in an old robust way and use the new elements only for their semantics. (In reality, the “semantics” means nothing, but maybe some day some programs will recognize main , article etc. and deal with them in some special way.)