Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS Sections : Démo HTML5

Mise à jour : 2017-01-22
L'utilisation de nouvelles balises viennent en renfort des actuelles "div" pour la structure du document.
En ajoutant un aspect sémantique, elles renforcent l'indexation par les moteurs de recherche et renforcent l'accessibilité.
Les éléments peuvent être imbriqué et ainsi rendre compte d'une hiérarchie du document.
Par exemple, on peut imbriquer les éléments "section" et utiliser conjointement les niveaux de titre (<h1>...<h6>) pour apporter une hiérarchie et du sens.

Les balises

Structure HTML5 => Structure HTML5
© Lachlan Hunt

Notes sur le tuto


Exemple de code HTML5

<div style="float:left;">
	<div id="myHeader"><h4>&lt;div id="header"&gt;</h4></div>
	<div id="myNav">&lt;div id="nav"&gt;</div>
	<div id="myArticle" style="float:left;">
		&lt;div id="article"&gt;
		<div id="mySection">&lt;div id="section"&gt;</div>
	</div>
	<div id="myAside" style="float:right;">&lt;div id="aside"&gt;</div>
	<div id="myFooter" style="clear:both;">&lt;div id="footer"&gt;</div>
</div>
<div style="float:left;"><br><br><br><br><br><br>=></div>
<div style="float:left;" id="demo">
	<header><h4>&lt;header&gt;</h4></header>
	<nav>&lt;nav&gt;</nav>
	<article style="float:left;">
		&lt;article&gt;
		<section>&lt;section&gt;</section>
	</article>
	<aside style="float:right;">&lt;aside&gt;</aside>
	<footer style="clear:both;">&lt;footer&gt;</footer>
</div>
<div style="clear:both"></div>

Démonstration du résultat HTML5


<div id="header">

<div id="nav">
<div id="article">
<div id="section">
<div id="aside">
<div id="footer">






=>

<header>

<article>
<section>
<footer>

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)
<script src="_html5detect.js"></script>
<script>
	isTagSupported("header");
	isTagSupported("nav");
	isTagSupported("article");
	isTagSupported("section");
	isTagSupported("aside");
	isTagSupported("footer");
</script>		

Can I Use html5semantic? Data on support for the html5semantic feature across the major browsers from caniuse.com.