Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 623
emailq Avatar asked Jun 03 '10 15:06

emailq


People also ask

Is header HTML5 semantic elements?

Elements such as <header> , <footer> and <article> are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

Which semantic HTML5 element is used to specify a footer for a page or section?

HTML <footer> Element The <footer> element defines a footer for a document or section.

Why is it important to use HTML5 semantic tags?

One of the most important features of HTML5 is its semantics. Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.


2 Answers

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; }
like image 197
SLaks Avatar answered Sep 21 '22 20:09

SLaks


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

like image 23
vartec Avatar answered Sep 22 '22 20:09

vartec