Behaviour of semantic tag <main> in IE not as expected

HTML & CSS
1

Having noticed on the Can I Use? page for HTML semantic tags that no versions of IE support the use of the <main> tag, I thought I’d go and test it out for myself, and just see what behaviour I should expect when IE had to deal with a page with them in.

I was somewhat surprised to find that IE11 handled the tag perfectly well, and behaved in the same manner as did Chrome, Firefox, and Edge. What’s more, it carried on handling it correctly under IE10 and IE9 modes, only ignoring it once I’d dropped the mode to IE8.

Not surprisingly, I’m now wondering what caniuse really means when it says a feature isn’t supported in a particular browser. Can anyone off me any clues on what I’m witnessing?

The HTML looks like this:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>Block of header text</header>
        <main>
            <p>Hello world! This is HTML5 Boilerplate.</p>
            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>
        </main>
        <footer>Block of footer text</footer>
    </body>
</html>

and the CSS like this

header, main, footer {
    max-width: 960px;
    margin: auto auto;
}
2

You aren’t seeing a difference because you are setting ‘main’ to display:block and thus it behaves as expected. Try this code and then see the difference in IE.

test
<main> hello this is the main </main>

In IE9+ it will be on one line

IE doesn’t recognise ‘main’ and so it gets no UA styling and thus exists as an inline element (as the display of all elements are by default). Setting it to display:block will make it behave correctly as a block element.

IE8 and under don’t recognise new elements at all and won’t style them either unless you should the shiv.

Note that IE edge does recognise ‘main’.

1 Like
3

Is that implied by me including the <p> tags within ‘main’ then, because I’ve not explicitly set it anywhere?

4

I assumed you were using the standard ‘normalise’ css which sets main to block by default.

The p element will make the text start on a new line but of course will do nothing for the width that you applied to .main unless .main is display:block (or one of the other block layout values).

5

Ah! I’d not looked in there.

Edit: And it does indeed make a difference :blush:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.