Degradation issues for HTML5 semantic tags (article, footer, header)

html cross-browser

12,751

Solution 1

As long as you use html5shiv to handle IE, it will work fine.

The browser will treat all unknown tags (including HTML5 tags) as normal inline elements.
You should include the following CSS rule:

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

Solution 2

For presentation you'll use CSS anyhow, so doesn't really matter if browser understands the tag itself.

12,751

Author by

emailq

Updated on June 03, 2022

Comments

emailq about 2 years
How well do the new layout tags in HTML5 degrade? What are the hazards in using them? (I'm not talking about <video>--I've seen specific fallback code for it).

Specifically, in the case of something like
```
<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>
```
Would using <header>, <article>, or <footer> cause any browser problems? Do they degrade to <div> in unsupporting browsers automatically? Or if I include them, should I only include them for semantic meaning, and not for CSS styling or DOM scripting?
emailq about 14 years

so, if I style footer { display:block; background-color: pink;} it'll work across browsers, even ones that don't really know what footer is?
vartec about 14 years

"not knowing the tag" basically means "not knowing how to display tag by default", if you override that with custom CSS, they browser will know how to display. Note, that CSS works even with XML, where you can have totally custom tags.
SLaks about 14 years

Yes, it will work, as long as you add html5shiv.googlecode.com/svn/trunk/html5.js
newyuppie over 13 years

But then there's the problem of whether the user has JavaScript enabled or not...
SLaks over 13 years

@new: IE users are not likely to disable Javascript (except for ESC).
patad almost 13 years

you need to create the elements otherwise IE won't style them
james.garriss over 11 years

Tested, and it works (IE9/Win7). Question: What are the advantages of this script over html5shiv?
Admin over 11 years

If a person uses IE on purpose and has javascript disabled on purpose, their subpar internet experience is their own fault. It's like turning off your monitor and expecting to still be able to see your mouse cursor.
DylRicho over 10 years

@james.garriss IE9+ supports the semantic tags without this JavaScript hack. This code is for IE8 and below. To answer your question, the HTML5shiv and this do exactly the same thing - 'create' the elements using the createElement argument. With JS disabled, this won't happen, but JS is almost relied upon these days.
Drenai almost 7 years

Normalize.css will do this for you - just as an fyi