Use
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.

score 2 · Answer 1 · answered May 14 '14 at 15:38

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;}

net.uk.sweet · Answer 2 · 2014-03-19T01:25:50.307

1

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.

edited Mar 19 '14 at 01:25

answered Mar 19 '14 at 01:20

net.uk.sweet

12,444
2
24
42

That seems like it could work but I think I have found an easier solution. When I do `main{display:block}` in css the main tag SEEMS to be treated just like a
. But I have not found any official documentation of this, it works with `width:***px;` and with `text-decoration:underline;` which is all I have tested so far.
– semicolon Mar 19 '14 at 01:35
Easier than including a reference to a library which will ensure that all the new HTML5 tags can be styled in IE? – net.uk.sweet Mar 19 '14 at 01:46
Well... Yes... Considering I was already going to do something like: `main{width:500px;text-decoration:underline;}` or whatever stylings I choose, so adding `display:block;` to my css file takes approximately 2 seconds and like 10 bytes of bandwidth and storage vs an entire library. – semicolon Mar 19 '14 at 01:53

score 1 · Accepted Answer · edited Mar 19 '14 at 02:19

1

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.

edited Mar 19 '14 at 02:19

misterManSam

24,303
11
69
89

answered Mar 19 '14 at 02:12

semicolon

2,530
27
37

A combination of both this and the html5shiv as mentioned in another answer is the ideal solution. – misterManSam Mar 19 '14 at 02:18
Is it necessary to have both? If so why is it necessary? – semicolon Mar 19 '14 at 02:20
There are only a small percentage of users who have javascript disabled, but if providing support for those users is as simple as ensuring your html5 elements have the property `display: block;` - One. Single. Line. Then why not add it? I have this fallback in my CSS reset stylesheets so I don't even think about it. – misterManSam Mar 19 '14 at 02:43
Also, the HTML5shiv will only be loaded for the browsers that require it, so the additional overhead loading the javascript will only be added to browsers that have no other choice. It also adds support for a range of CSS selectors lacking in some IE version such as `:nth-child` and `:hover` on HTML elements other than ``. – misterManSam Mar 19 '14 at 02:48
I meant is it necessary to have HTML5shiv, couldn't I just use "display: block;" what does HTML5shiv do on top of setting the correct display for elements? – semicolon Mar 19 '14 at 02:52
Actually, I am thinking of Modernizr. See this question - [Here](http://stackoverflow.com/questions/5667076/modernizr-html5shiv-ie7-js-and-css3-pie-which-to-use-and-when) – misterManSam Mar 19 '14 at 02:56
I think I am just going to go with the "display:block;" thing seeing as from the looks of it HTML5shiv is designed for below IE9 and doesn't seem to work with IE11 as my
tags are still displayed inline for some reason and my tag won't display at all. And as for below IE9 I am not too worried about as the website is for my
– semicolon Mar 19 '14 at 04:16

score 1 · Answer 4 · answered Mar 19 '14 at 06:24

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.)

Use as backup tag for HTML5 semantic elements

4 Answers4

Use
as backup tag for HTML5 semantic elements