Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

Sémantique HTML5

Dans ce tutoriel, je vous propose d'aborder la notion de sémantique en HTML5.

Qu'est ce que la sémantique?

Le HTML sémantique est l'utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c'est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence). Le HTML sémantique est traité par les navigateurs courants, mais aussi par de nombreux autres agents utilisateurs. Le langage CSS est utilisé pour suggérer la forme sous laquelle il sera présenté aux utilisateurs humains.

Par exemple, les spécifications HTML récentes déconseillent l'utilisation de la balise <i>, qui indique un style de police italique, au profit de balises sémantiquement plus précises, telles que <em>, qui indique une mise en valeur. C'est la feuille de style CSS qui spécifie ensuite si cette mise en valeur est représentée par un style italique, un style gras, un soulignement, une prononciation plus lente ou plus forte, etc. L'utilisation de l'italique ne se limite en effet pas à la mise en valeur. Il est également utilisé pour citer des sources, et pour cela, le HTML 4 propose la balise <cite>. L'italique peut également être utilisé pour les mots ou expressions en langue étrangère, ainsi que les emprunts. Les concepteurs de sites web peuvent utiliser les attributs intégrés au langage XHTML ou spécifier leur propre balisage sémantique en choisissant des noms appropriés pour la valeur de l'attribut class des éléments HTML (par exemple, class="emprunt"). Le fait de baliser la mise en valeur, les citations et les emprunts de manière différente permet aux agents Web (ou user-Agent) tels que les moteurs de recherche et autres logiciels d'évaluer précisément l'importance du texte.

Wikipédia

Balises sémantiques en HTML5

Ces balises ont pour but de définir quelle est la fonctionnalité et le rôle de l'élément pour les machines..

Nom Détails
<section> Section générique regroupant un même sujet, une même fonctionnalité.
<article>

Articles contenus dans les sections.

<nav>

Cette balise est utilisée pour afficher les liens de navigation et avant tout pour indiquer qu'il y a un menu.

<aside>

Cette balise est utilisée pour afficher des compléments d'informations, ou des contenus pas forcément en relation avec la page, par exemple dans le cas où vous affichez une publicité ou encore un menu de navigation secondaire.

<header> En-tête de page
<footer> Pied de page
HTML5
Balises sémantiques en HTML5

Exemple

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- Permet l'adaptation de la surface aux tablettes et mobiles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Facultatif, permet de désactiver le mode de compatibilité d'IE-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Titre de ma page</title>
<meta name="description" content="Description de ma page">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Si la version du navigateur est inférieure à IE 9, on charge ces Javascripts -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>

<header>En-tête de mon site</header>

<nav><a href="index.php" title="Accueil">Accueil</a></nav>

<section>
    <article>Article 1</article>
    <article>Article 2</article>
</section>

<aside>
    <nav><a href="test.php" title="Autres liens à droite">Autres liens à droite</a></nav>
</aside>

<footer>Pied de page</footer>

<!-- Fichiers Jasvascripts, positionné en fin de document pour optimiser les temps de chargement-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>