Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.
En HTML5, Tout est devenu plus simple !
<!doctype html>
Ce qui faut en retenir :
Il faudra en mettre un dans chaque page HTML que vous allez créer. Le doctype se met avant la balise <html>
En HTML5 , nous allons toujours ouvrir et fermer nos balises pour indiquer le début et la fin comme en HTML4 ou XHTML.
Exemple
<html> : balise entrante
</html> : balise sortante
Comme pour les anciennes version de HTML, nous ajoutons le caractére " /" pour indiquer la fin d'une balise.
Il y aura toujours des exceptions à cette règle comme par exemple le saut de ligne (<br>), vous pouvez noter qu'il s'écrira comme en HTML4 et non pas comme en XHTML (<br />)..
Exemple selon la version
| HTML4 | XHTML | HTML5 | Fonction |
| <br> | <br /> | <br> | Permet d'insérer un saut de ligne |
| <hr> | <hr /> | <hr> | Permet d'insérer une ligne horizontale |
| <meta name="robots" content="nosnippet"> | <meta name="robots" content="nosnippet" /> | <meta name="robots" content="nosnippet"> | Balise meta qui indique aux robots des moteurs de recherche de suivre les liens contenus sur la page. |
| <meta name="Description" content="Je vous propose de découvrir les bases du HTML, notamment la structure d'une page dans ce tutoriel"> | <meta name="Description" content="Je vous propose de découvrir les bases du XHTML, notamment la structure d'une page dans ce tutoriel" /> | <meta name="Description" content="Je vous propose de découvrir les bases du HTML5, notamment la structure d'une page dans ce tutoriel"> | La description que vous trouverez dans votre moteur de recherche préféré sur votre site est correctement référencé. |
| <input type="text" name="fonction" size="30"> | <input type="text" name="fonction" size="30" /> | <input type="text" name="fonction" size="30"> | Permet d'insérer un champ de texte que l'on retouve dans les formulaires. |
<!doctype html>
<html lang="fr"> <!--Début de ma page HTML -->
<head>
<!-- Contenu du head -->
<meta charset="utf-8">
<title>Titre de ma page</title>
<meta name="description" content="Description de ma page">
<link href="feuille_de_style.css" rel="stylesheet" type="text/css"> <!-- Lien vers la feuille de style -->
<script src="effet.js"></script> <!-- Appel à un fichier Javascript externe -->
</head>
<body>
Contenu du body
</body>
</html> <!-- Fin de la balise html-->
La syntaxe est simplifiée
Le doctype est bien plus simple à mémoriser.
Nous précisons lang="fr"dans la balise html
La définition de l'encodage est de même plus simple : <meta charset="utf-8">
Plus besoin de préciser type="text/javascript" pour insérer un fichier Javascript.