Bien que son développement ait commencé bien des années auparavant, HTML5 a commencé à être utilisé couramment par les concepteurs / développeurs Web en 2010. Dès le départ, le langage était familier à de nombreux professionnels du Web car au lieu d'essayer de tout réinventer, HTML5 construit sur ce qui était venu avant. Tous ceux qui connaissaient HTML 4.01 ont rapidement constaté qu’une partie de cette version se trouvait maintenant dans HTML5.
Bien que HTML5 inclue de nombreux éléments en HTML depuis un certain temps, il a également introduit une poignée d’éléments nouveaux pour HTML5. Pour bon nombre de ces nouveaux éléments, une approche appelée "pavage des vaches" a été utilisée. C’est un terme couramment utilisé en informatique qui consiste essentiellement à regarder ce que les gens font déjà et à le faire. Dans le cas des concepteurs de sites Web, cela voulait dire qu'ils construisaient déjà des pages et fonder leurs décisions sur de nouveaux éléments basés sur ces activités. Par exemple, de nombreux professionnels du Web créeraient des sites Web avec des divisions utilisant les attributs ID ou Classe de "en-tête", "nav" et "pied de page". En tant que tel, HTML5 les a présentés comme de nouveaux éléments, permettant aux professionnels du Web d’ajouter plus de signification à leurs documents en utilisant des éléments de sectionnement dédiés au lieu de simples divisions. Cette combinaison de familiarité et d'une approche reconnaissant les pratiques actuelles a permis à HTML5 d'être rapidement adopté par le secteur de la conception Web.
Le Doctype HTML5
Premièrement, pour utiliser de nouveaux éléments HTML5, votre document doit inclure le doctype HTML5, à savoir:
Vous remarquerez peut-être que ce type de document ne mentionne pas spécifiquement "HTML5", mais indique simplement la version en tant que "html". En effet, ce doctype est ce qui est destiné à être utilisé à l'avenir pour toutes les itérations du langage.
En fait, HTML5 est censé être la dernière version numérotée de la langue, de nouvelles modifications étant ajoutées de manière cohérente dans le futur. En fait, certains éléments de la liste ci-dessous ont été ajoutés à la langue bien après cette poussée initiale en 2010!
Les balises HTML5
| Étiquette | Explication | |
|---|---|---|
| Ancre ou lien | ||
| Abréviation | ||
| Adresse ou auteurs du document | ||
| Carte d'image côté client | ||
| Article | ||
| Contenu tangentiel | ||
| Flux audio | ||
| Audacieux | ||
| Chemins d'URI de base pour les éléments du document | ||
| Algorithme bidirectionnel | ||
| Longue citation | ||
| Corps de la page | ||
| Saut de ligne | ||
| Bouton de formulaire HTML | ||
| Toile pour les graphiques dynamiques | ||
| Commentaire | ||
| Légende du tableau | ||
| Citation | ||
| Code de référence | |
| Colonne de table | ||
| Regroupement de colonnes de table | ||
| Commande ou action sur la page | ||
| Définition du type de document | ||
| Grille de données | ||
| Options prédéfinies pour d'autres contrôles | ||
| Liste de définition description ou étendue du discours | ||
| Texte supprimé | ||
| Informations supplémentaires à la demande | ||
| Définition | ||
| Conversation | ||
| Division logique | ||
| Liste de description | ||
| Définition terme ou dialogue | ||
| Accentuation | ||
| Elément incorporé pour les plugins | ||
| Groupe de contrôles de formulaire | ||
| La légende utilisée pour un | ||
| Figure avec légende optionnelle | ||
| Pied de page de la page | ||
| Forme | ||
| Titre de premier niveau | ||
| Titre de deuxième niveau | ||
| Titre de troisième niveau | ||
| Titre de quatrième niveau | ||
| Titre de cinquième niveau | ||
| Titre de sixième niveau | ||
| Chef du document | ||
|
| En-tête d'une page | |
| Groupe rubrique | ||
| La règle horizontale | ||
| Elément racine d'une page Web | ||
| Style de texte en italique | ||
| Cadre en ligne | ||
| Image | ||
| Élément de formulaire d'entrée | ||
| Élément de formulaire de bouton | ||
| Élément de formulaire de case à cocher | ||
| Entrée de couleur | ||
| Date entrée | ||
| Saisie globale de la date et de l'heure | ||
| Date et heure locales | ||
| Adresse email saisie | ||
| Élément de formulaire de téléchargement de fichier | ||
| Élément de champ de formulaire masqué | ||
| Élément de formulaire d'image | ||
| Année et mois de saisie | ||
| Nombre entré | ||
| Élément de formulaire de mot de passe | ||
| Elément de forme de bouton radio | ||
| Saisie de numéro imprécise | ||
| Réinitialiser l'élément de formulaire | ||
| Champ de recherche | ||
| Soumettre un élément de formulaire | ||
| Entrée du numéro de téléphone | ||
| Elément de formulaire de champ de texte | ||
| Saisie du temps | ||
| Entrée URL | ||
| Année et semaine | ||
| Texte inséré | ||
| Texte à saisir par l'utilisateur | ||
| Générer des clés sécurisées pour la gestion des certificats | ||
| Étiquette de formulaire | ||
| Légende du jeu de champs | ||
| Élément de liste | ||
| Lien vers des documents connexes | ||
| Zone principale de contenu sur une page | ||
| Carte d'image côté client | ||
| Texte marqué ou en surbrillance | ||
| Liste de commandes | ||
| Méta-informations sur le document | ||
| Jauge scalaire | ||
| Définir est une zone avec des liens de navigation | ||
| Contenu lorsque les scripts ne sont pas disponibles | ||
| Objet non standard | ||
|
| Liste ordonnée ou numérotée | |
| Groupe d'options dans une liste de sélection | ||
| Option dans une liste de sélection | ||
| Résultat d'un calcul de formulaire | ||
| Paragraphe | ||
| Paramètre d'un élément d'objet | ||
|
| Texte pré-formaté | |
| Indicateur de progression | ||
| Court devis en ligne | ||
| Parenthèse rubis | ||
| Texte rubis | ||
| Annotation Ruby | ||
| Texte barré | ||
| Échantillon de sortie | ||
| Les scripts | ||
| Section d'une page | ||
| Sélection ou liste de menu déroulant | ||
| Petite taille de police | ||
| Source de média | ||
| Conteneur de style en ligne générique | ||
| Forte emphase | ||
| Feuilles de style | ||
| Indice | ||
| Résumé du contenu de l'élément DETAILS | ||
| En exposant | ||
| Table | ||
| Rangées de corps de table | ||
| Cellule de table | ||
| Élément de formulaire multiligne | ||
| Rangées de pied de table | ||
| Cellule d'en-tête de table | ||
| En-tête de table | ||
| Définit le temps | ||
| Titre | ||
| Rangée de table | ||
|
| Liste non ordonnée ou numérotée | |
| Texte variable ou défini par l'utilisateur | ||
|
Vidéo ou film intégré dans la page |
