H2 - P2019

Développement web

Cours 03 - 2014-10-05

HTML5

Syntaxe

HTML5 est arrivé avec un certain nombre de nouvelles balises (tags) et plusieurs nouvelles règles dont le but d'apporter de nouvelles features et de simplifier le développement

Doctype

Avant


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
...

Apres


<!doctype html>
<html>
...

Fermer ou ne pas fermer

Sont appelées void elements les balises suivantes :

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

Pour ces balises, le / de fermeture est optionnel

Avant


<br />

Apres


<br>

Meta

Avant


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Apres


<meta charset="utf-8">

Link/Script

Avant


<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript" src="script.js"></script>

Apres


<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Balises sémantiques

Une séries de nouvelles balises ont pour but d'améliorer la compréhension de la structure sémantique de la page, notamment par les moteurs de recherche

Utilisez-les sans retenue

  • header : Entête/introduction d'une section (ou du site entier)
  • footer : Pied de page/conclusion d'une section (ou du site entier)
  • article : Contenu de type article
  • aside : Contenu à part du contenu principal
  • nav : Liens de navigation
  • section : Section

Compatibilité

Ces nouvelles balises ne sont pas compatibles avec IE6, 7 et 8. Il sera impossible de les créer en JS et elles auront un problème de style

Solution : html5shiv

Implémentation (avec commentaire conditionnel)


<!--[if lt IE 9]>
    <script src="src/js/libs/html5shiv.js"></script>
<![endif]-->

Il existe de nombreuses autres balises et évolutions que nous verrons plus tard ou que nous ne verrons pas car pas importantes

Templates HTML5

Il existe plusieurs générateurs de templates HTML5 utiles pour démarrer un nouveau projet

Aller plus loin

http://www.alsacreations.com/...