Tutoriel HTML5

HTML5

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

HTML CSS Dreamweaver Bootstrap PHP

Structure d'une page HTML5

Dans ce tutoriel sur HTML5, nous allons voir quelle est la structure de base d'une page en HTML5.

Définir le type de page, le DOCTYPE

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>

Les balises

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.