Blog
Aller au contenu

Guillaume Duverger

Développement & graphisme


Accueil » Développement » Apprendre HTML » Apprendre HTML5

Sommaire
  1. Le HTML5 c'est quoi ?
  2. Le HTML5 : quelles nouveautés ?
  3. Les éléments de formulaire en HTML5
  4. Eléments progress / meter
  5. L'élément Canvas
  6. Extraits enrichis
  7. Le HTML5.1 c'est quoi ?
  8. Les nouveautés HTML5.1
    1. Elément menu(déprécié)
    2. Elément picture et attribut srcset
    3. Nouveaux types d’input : week, month et datetime datetime-local
    4. L'attribut rel=noopener
    5. Spellcheck (correcteur automatique)
    6. Affichage plein écran pour les frames
    7. Nouvelle adaptation de l'élément figcaption
    8. Eléments details et summary
    9. Hiérarchie des titres et sections
    10. Image de taille zéro
    11. Elément option vide
    12. Formulaire de validation (reportValidity())
    13. Elément dialog (méthode showModalDialog) (revu en HTML5.2)
  9. Le HTML5.2 c'est quoi ?
  10. Les nouveautés HTML5.2
    1. Nouvel élément dialog.
    2. API de demande de paiement (Payment Request API)
    3. Plusieurs éléments main
    4. Du style dans le body
    5. Rubriques dans un legend
  11. Les web components
Télécharger ce cours en pdf

Le HTML5 c'est quoi ?

Cette nouvelle mouture, qui n'est plus basée sur le langage SGML, définit deux syntaxes (HTML5 et XHTML5) et comprend une couche application avec de nombreuses API, ainsi qu'un algorithme afin de pouvoir traiter les documents à la syntaxe non conforme.

Simplifié par rapport au HTML4, ce nouveau langage est de plus en plus utilisé par les développeurs. Il est la norme à adopter pour réaliser un site web.

👉 Le HTML5 : quelles nouveautés ?

Qui dit HTML5 dit nouvelles balises (ou éléments). En effet, on voit apparaître des balises telles que <header> pour désigner l'entête d'un site web ou <footer> pour le pied d'une page web, ceci afin de permettre une "standarisation" des sites sur le web.

Une nouvelle version (HTML5.1) a vu le jour et apporte également son lot de nouveautés. Une deuxième révision (HTML5.2) est d'ores et déjà actée.

Parmi les nouvelles balises, on peut notamment distinguer :

  • <!DOCTYPE html> : permet de déclarer le document comme étant en HTML5.
  • <header> : cette balise indique l'entête du document.
  • <main> : cette balise indique la partie principale du document.
  • <nav> : cette balise indique le menu du document.
  • <section> : cette balise sert à définir les grandes parties du document.
  • <article> : cette balise permet de délimiter les différentes sous-parties du document.
  • <footer> : cette balise indique le pied de page (c'est la partie en bas) du document.

NB : plus permissif, le langage HTML5 permet d'omettre la fermeture des balises dans certains cas.

Liste complète des balises HTML5

👉 Eléments de formulaire HTML5

Eléments de formulaire html5 voir les éléments en HTML5

👉 Eléments progress / meter

Eléments HTML5 progress et meter Article sur progress/meter

👉 L'élément canvas

L'élément canvas est une spécificité HTML5 qui permet, au travers de la balise du même nom, <canvas>, de créer une aire de dessin dont il faut préciser la hauteur et la largeur. A l'aide de JavaScript, il est alors possible de générer des formes (plus ou moins complexes) à l'intérieur de cette aire et de les animer.

Lire l'article

👉 Extraits enrichis (microdonnées, microformats, RDFa)

Les extraits enrichis peuvent être intégrés partout dans un document web. Ils permettent un meilleure compréhension de vos contenus pour les moteurs de recherche.

Microdonnées

Microformats

RDFa

👉 Le HTML5.1 c'est quoi ?

Il s'agit d'une version (mineure) qui a vu le jour fin 2016 mais qui apporte cependant son lot de nouveautés.

Nous allons découvrir ici les principales nouvelles fonctionnalités et leur utilité.

Mais avant d'aller plus loin, pensez d'abord à vous renseigner sur HTML5, si vous avez peu de notions sur ce langage. Cela facilitera la compréhension de ce que vous lirez ci-dessous.

👉 Les nouveautés HTML5.1

Présentation des principales nouvelles fonctionnalités :

Elément menu :

💡 NB : L'élément menu a été déprécié. Je laisse les exemples (fonctionnant uniquement sur Firefox) pour les curieux.

A l'instar de l'élément ul, l'élément menu représente une liste non ordonnée d'éléments. Celui-ci peut contenir des options (option), une liste (li), des boutons, d'autres menus, des balises command, des input, des séparateurs hr. Mais son utilité diffère puisque l'élément menu a été conçu pour afficher des éléments intéractifs.

Concrètement, l'élément menu permet de personnaliser le menu contextuel de l'utilisateur par l'intermédiaire de l'attribut global HTML5contextmenu.

Explication : lorsque vous effectuez un clic droit avec la souris sur une page, un menu apparaît qui indique différentes options comme par exemple la possibilité d'afficher le code source d'une page web.

Ainsi est-il possible de rajouter des éléments interactifs à l'intérieur de ce menu. Ci-dessous un exemple :

Faites un clic droit sur ce rectangle pour ouvrir un menu personnalisé.

Aller à l'accueil du blog

Vous constatez qu'une commande a été ajoutée, celle de revenir à la page principale de ce blog. A noter qu'il vous faudra ajouter un petit bout de code en JavaScript directement dans l'élément menuitem via l'attribut onclick de manière à ouvrir une nouvelle page comme dans cet autre exemple.



<menu contextmenu="menu">Votre texte
<menu type="context" id="menu">
<menuitem type="command" 
icon="http://www.votre_adresse.com/favicon.svg" 
onclick="window.open('http://www.votre_adresse.com');">
Votre texte</menuitem>
</menu>
</menu>  


Un autre exemple avec un sous-menu. Clic droit ici.

Cet exemple vous montre qu'il est possible d'ajouter des listes dans le menu contextuel.



<div contextmenu="partage_reseaux">
<p>Votre texte.</p>
<menu type="context" id="partage_reseaux">
<menu label="Partagez sur les réseaux sociaux">
<menuitem label="Twitter" 
icon="
https://upload.wikimedia.org/
wikipedia/fr/c/c8/Twitter_Bird.svg" 
onclick="
window.open('//twitter.com/i
ntent/tweet?text=' + window.location.href);">
</menuitem>
<menuitem label="Facebook" 
icon="
https://upload.wikimedia.org/
wikipedia/commons/c/c2/F_icon.svg" 
onclick="
window.open('//facebook.com/
sharer/sharer.php?u=' + window.location.href);">
</menuitem>
</menu>
</menu>
</div>


Faites un clic droit sur le logo HTML5 ci-dessous :



<div contextmenu="imagemenu">

<svg id="menudemo" height="" width="" viewBox="">

//votre image
</svg>

<menu type="context" id="imagemenu">

<menuitem label="Tourner l'image" onclick="rotate()" icon="visu/html/rotate.svg"></menuitem>

<menuitem label="Retailler l'image" onclick="resize()" icon="visu/html/resize.svg"></menuitem>

</menu>

</div>




#menudemo{

transition: .2s; 
width: 200px

}
#menudemo.rotate{

transform: rotate(180deg)

}

#menudemo.resize{

transform: scale(.7)

}
#menudemo.resize.rotate{

transform: scale(.7) rotate(180deg)

}




function rotate() {

document.querySelector('#menudemo')
.classList.toggle('rotate');

}

function resize() {
document.querySelector('#menudemo')
.classList.toggle('resize');

};


Une autre utilisation possible de l'élément menu est de créer un bouton de menu ou encore une barre d'outils (toolbar).

Comme la compatibilité est inexistante, l'exemple de menu ci-dessous est réalisé en CSS (cela vous donne tout de même un aperçu) :



<menu type="toolbar">
<li>
<menu label="menu">
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a></li>
</menu>
</li>
</menu>



Elément picture et attribut srcset :

L'élément picture est un conteneur qui permet l'utilisation de plusieurs éléments source qui, couplés aux attributs srcset (source de l'image) et media (taille de l'écran) donnent la possibilité de proposer plusieurs types d'images, afin que l'agent utilisateur (le navigateur) puisse choisir lui-même l'image à afficher selon les définitions ou tailles d'écran ou encore selon le débit internet.

On parle alors d'art direction.

En se référant au tableau de compatibilité, on constate que le support de cet élément est plutôt bon.

Dans l'exemple ci-dessous, nous allons renseigner trois images avec différentes définitions selon la taille d'écran.

Un paysage en bord de mer


<picture>
<source media="(min-width: 75rem)" srcset="votre-image-haute-definition.jpg">
<source media="(min-width: 50rem)" srcset="votre-image-moyenne-definition.jpg">
<img src="votre-image-basse-definition.jpg" srcset="votre-image_basse-definition.jpg">
</picture> 


On pensera toujours à afficher une image par défaut (fallback) via la balise <img>. Si vous souhaitez une compatibilité optimale, vous devrez utiliser ce polyfill.

Allons plus loin grâce à l'attribut srcset. En effet, celui-ci permet, via le descripteur de densité de pixel x, d'afficher des images à haute densité.



<picture>
<source media="(min-width: 50rem)" srcset="image.jpg, image-2x.jpg 2x">
<source media="(min-width: 25rem)" srcset="image-moyenne.jpg, image-moyenne-2x.jpg 2x">
<img src="image-petite.jpg" srcset="image-petite-2x.jpg 2x" alt="description image">
</picture>



Nouveaux types d’input : type week, type month et type datetime-local :
Voir ces nouveaux éléments
L'attribut rel=noopener :

L'objectif de ce nouvel attribut : prévenir l’hameçonnage (ou phishing en anglais).

En effet, lorsqu'un nouvel onglet est ouvert avec l'attribut target et sa valeur _blank, il y a un risque de sécurité. Pour tenter de résoudre ce problème, HTML5.1 a introduit ce nouvel attribut qui peut se placer au sein d'un lien hypertexte ou de la zone d'une image (élément <area>).



<a href="#" target="_blank" rel="noopener">
 votre lien
</a>


Le mieux étant encore de vous passer de l'attribut target.


Spellcheck (correcteur automatique)

L'attribut spellcheck permet d'activer ou de désactiver la correction orthographique automatique (en sachant que la valeur par défaut varie selon le navigateur et selon l'élément visé).

Vous avez certainement déjà remarqué que lorsqu'un mot est mal orthographié, celui-ci est souligné en rouge. Cela se produit sur les éléments de formulaire ainsi que sur les éléments HTML avec l'attribut contenteditable.

Il existe deux types de valeurs :

true : indique que l'orthographe doit être vérifiée.

false : indique que l'orthographe ne doit pas être vérifiée.

Ci-dessous, un exemple dans un textarea (cliquez sur le texte) :



<textarea spellcheck="true">Votre texte</textarea>


Autre exemple avec l'attribut contenteditable :

Cliquez ici pour écrire du texte. Vous pouvez aussi corriger les fotes (clic droit).


<div spellcheck="true" contenteditable>Votre texte.........</div>



Affichage plein écran pour les frames (élément iframe) :

L’attribut allowfullscreen, développé pour les frames, vous permet de contrôler si le contenu peut se présenter en plein écran à l’aide de la méthode requestFullscreen().

Dans l'exemple ci-dessous, nous intégrons une vidéo dans un élément iframe. L’attribut allowfullscreen est requis pour permettre au lecteur d’afficher le plein écran. S'il n'est pas présent, le plein écran ne sera tout simplement pas disponible.



<iframe src="votre-video.mp4" allowfullscreen></iframe> 


Voir allowfullscreen.com pour plus de détails.


Nouvelle adaptation de l'élément figcaption :

Dans la première version HTML5, l'élément figcaption ne peut être utilisé que comme premier ou dernier enfant de l’élément figure, c'est-à-dire avant ou après son contenu principal.

La révision HTML5.1 a enlevé cette restriction. Désormais, il est possible de placer l'élément figcaption n’importe où dans le conteneur.

Un paysage en bord de mer
Un paysage en bord de mer


<figure>
<img src="images/1-mini.jpg" alt="Un paysage en bord de mer">
<figcaption>Un paysage en bord de mer</figcaption>
</figure>



Eléments details et summary :

Certainement les deux nouvelles fonctionnalités les plus intéressantes. Ces deux éléments vont nous permettre des réaliser des toogles, menus... sans passer par JavaScript (et sa fameuse fonction onclick).

Elle se présente sous cette forme (varie selon les navigateurs) :

Ceci est un texte à l'intérieur de l'élément details.

Ci-dessous dans son état initial (c'est-à-dire fermé comme l'exemple précédent) mais stylé en CSS. Cliquez sur sommaire :

sommaire

Ceci est un texte à l'intérieur de l'élément details.



<details>
<summary>sommaire</summary>
<p>Ceci est un texte à l'intérieur de l'élément details.</p>
</details>


Un autre exemple avec l'attribut open. Il permet l'ouverture par défaut du contenu. (Vous pouvez ensuite refermer l'élément)

Exemple avec attribut open

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.


<details open>
<summary>
<p>Votre texte</p>
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.</p>  
</details>

A retenir pour l'élément summary : si aucun intitulé ne figure dans l'élément, la valeur par défaut est details. Il est possible de remplacer la petite flèche par défaut comme ceci :



/*Pour webkit*/

summary::-webkit-details-marker {
  display: none;
}

/*pour firefox*/

summary {

  display: flex;
}



Hiérarchie des titres et sections

Désormais il est possible d'imbriquer les éléments header et footer ainsi que les titres s'ils font partie d'une section (éléments section, article, aside ou nav), ce qui donne un exemple comme ceci :



<article>

<header>
<h1>Titre</h1>

<section>
<header>
<h2>sous-titre</h2>
</header>
</section>

<section>
<header>
<h2>sous-titre</h2>
</header>
</section>

</header>
<h2>sous-titre</h2>

</article>


Image de taille zéro :

<img src="image.jpg" width="0" height="0" alt>

La nouvelle version HTML5.1 permet de déclarer une image sans hauteur ni largeur. Cela peut être utile lorsque l’image n’est pas destinée à l’utilisateur.

En effet, dans le cas où un élément img est utilisé pour d'autres raisons que l’affichage d’une image, il est donc possible de renseigner les attributs width et height avec la valeur 0.


Elément option vide :

Que ce soit pour l'élément select, datalist ou encore optgroup, il est possible de créer un élément option vide, ceci afin de renseigner l'utilisateur comme dans l'exemple ci-dessous :



<select>
<option disabled selected value>selectionner une option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>



Formulaire de validation (méthode reportValidity()) :

C'est l'agent utilisateur (autrement dit la navigateur) qui va se charger de repérer les erreurs avant de pouvoir valider la formulaire avec cette méthode.

Voir exemple

👉 Le HTML5.2 c'est quoi ?

Il s'agit de la dernière édition en date (une troisième est en route) de la spécification HTML. Son statut est en recommandation, ce qui signifie que vous pouvez utiliser les nouvelles fonctionnalités (à condition quelles soient supportées).

Il y a eu quelques changements, des abandons, des bugs fixés ainsi que de nouveaux concepts.

👉 Les nouveautés HTML5.2

Présentation des principales nouvelles fonctionnalités :

Nouvel élément dialog :

Le but de cet élément est de proposer une boîte de dialogue native, compatible et accessible (ce qui évite d'embarquer une bibliothèque JavaScript par exemple, ou de créer le tout en CSS). Par défaut, celle-ci n'apparaît pas dans le DOM, à moins que l'attribut open ne soit appliqué.

Le problème, toujours le même, est le manque de support (moteur webkit uniquement). Si vous souhaitez utiliser cet élément, il vous faudra utiliser un polyfill.

Voir exemple


<button class=savoir id="ouverture-dialog">cliquez ici</button>

<dialog id="demo-dialog">  
<h3></h3>
<p></p>
<button id=fermer>×</button>
</dialog> 



dialog,
button{
	
border: 0
		
}
	
dialog {
	
padding: 0;
border-radius: .5rem;
box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.31)
	
	}

dialog::-webkit-backdrop {
	
	background-color: hsla(0, 0%, 0%, 0.4)
	
	}
	
dialog::backdrop {
	
	background-color: hsla(0, 0%, 0%, 0.4)
	
	}

	
	
/* polyfill */
dialog + .backdrop {
	
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: hsla(0, 0%, 0%, 0.4)
	
}
	
	
/* anciens navigateurs */
	
dialog {
	
display: none;
position: absolute;
margin: 0 auto;
max-width: 80%
	
}
	
/* anciens navigateurs */
	
	
dialog[open] {
	
display: block;
min-width:50%;
min-height:50%;
animation: anim-dialog .4s ease-out
	
	}


dialog h3 {
	
display: flex;
justify-content: center;
font-size: 2rem;
padding: 1rem;
margin: 0;
color: white;
background: var(--gd-linear);
border-top-left-radius: .5rem;
border-top-right-radius: .5rem;

}

dialog p{
	
	text-align: center
	
	}



dialog button {
	
color: white;
background: none;
position: absolute;
top: .2rem;
right: .2rem;
padding: .25rem .5rem;
line-height: 1;
font-size: 2rem
	
}

@keyframes anim-dialog {
	
	from{
		
		opacity: 0;
		transform: scale(0)}
	
	to{
		opacity: 1;
		transform: scale(1)
	}
	
	}	
	




// Polyfill
<script src='https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.min.js'></script> 

let boite = document.getElementById('demo-dialog');
let ouverture = document.getElementById('ouverture-dialog');
let fermeture = document.getElementById('fermer');
dialogPolyfill.registerDialog(boite);
ouverture.addEventListener('click', function () {
  boite.showModal();
});
fermeture.addEventListener('click', function () {
  boite.close('cancelled');
});


boite.addEventListener('click', function (event) {
  if (event.target === boite) {
    boite.close('cancelled');
  }
});


API de demande de paiement (Payment Request API)

L'API de demande de paiement se veut être une alternative native aux formulaires de paiement que l'on trouve sur les sites de commerce en ligne.

L'intérêt principal de cette interface est que le traitement de la récupération des informations de paiement est directement géré par le navigateur qui fera l'intermédiaire. L'interface se veut plus claire et cohérente pour une meilleure expérience utilisateur.

Il est désormais possible d'utliser l'élément iframes au sein d'un document via le nouvel attribut allowpaymentrequest.

Voir une démonstration de l'API de demande de paiement (navigateur webkit/blink).


Plusieurs éléments main :

L'élément main représente le contenu principal au sein d'une page web. Dans les versions précédentes, cet élément était unique.

Dorénavant, il est possible d'utiliser cet élément autant de fois que souhaité, à la condition sine qua non qu'un seul soit visible dans le DOM, sans quoi la page sera invalide.

C'est pourquoi, HTML5.2 permet via l'attibut hidden de rendre invisible l'élément main.



<main>...</main>  
<main hidden>...</main>  



Du style dans le <body> :

Il convient normalement de placer le CSS dans l'entête du document entre les balises <head> et </head>.

Mais dans certains cas, il peut être pertinent de placer du style directement dans le corps de la page.



<body>  
<p>Je suis un paragraphe de couleur rouge</p>

<style>
p { 
color: blue 

}
</style>

<p>Je suis de couleur bleue maintenant</p>
</body> 


Bien que valide, cette nouvelle possibilité d'insérer du CSS n'importe où dans le corps du document n'est pas recommandée dans la mesure où il y a des risques au niveau de la performance.


Rubriques dans un legend :

Il est désormais possible de déclarer des titres au sein de l'élément legend, très utile pour rendre cohérent l'utilisation de plusieurs sections avec l'élément fieldset :



<fieldset>  
<legend><h2>Titre</h2></legend>
</fieldset> 

<fieldset>  
<legend><h2>Titre</h2></legend>
  
</fieldset>  


👉 Les web components

Les composants web permettent de créer des balises HTML personnalisées, réutilisables et séparées de l'application web principale.

Voir l'article