Balises HTML5


Le code HTML présent dans tous les sites web. 

L’indispensable pense-bête à garder sous le coude pour tous vos projets et ce quelque soit le code choisi. Le très génial Pierre Giraud a rassemblé pour nous la liste complète des éléments HTML la plus récente du HTML 5.3. Cette liste est ordonnée conformément à la référence officielle du W3C  disponible ici et vous sera utile pour le cours HTML – CSS.

Pourquoi respecter les normes du W3C : Les normes ont été créées pour éviter que le grand n’importe quoi et que chacun y gagne en compatibilité. En respectant les standards du W3C vous réduirez le risque d’incompatibilité entre les différents navigateurs et les supports qui sont connectés à internet, (PC, téléphone mobile, TV, tablette…).

Avec cette liste, terminé les oublis et les pertes de temps à rechercher la bonne balise. Les balises sont classées par catégories. 

Pierre Giraud a fait un travail formidable et a tout compilé  sur un fichier PDF que vous pouvez télécharger ici. Ce document peut être utilisé sur vos sites et pour vos différents supports à la condition de faire un lien vers le site de pierre-giraud.com

Les éléments sont la base du fonctionnement du HTML. Ils permettent d’exprimer du sens en marquant les différents contenus de notre page. Cela signifie que leur rôle principal est un rôle de sémantique et il est donc important de toujours choisir l’élément le plus approprié pour transmettre le sens voulu.

Les éléments de base constituent la colonne vertébrale de tout document HTML. Ils se trouvent sur toutes les pages web après la déclaration du doctype qui définit la version de (X)HTML utilisée par la page. Les éléments décrivant le contenu d’une page web se trouvent entre la balise ouvrante  et la balise fermante . L’élément  est parfois appelé l’élément « racine ». Certains documents complexes peuvent avoir des racines spéciales appelées shadow-roots.

Les éléments HTML peuvent avoir différentes formes et être plus ou moins complexes dans leur implémentation. Certains sont composés d’une paire de balises ouvrante et fermante et d’un contenu entre ces balises tandis que d’autres ne sont composés que d’une balise qu’on appelle alors balise orpheline. De même, certains éléments HTML vont avoir besoin d’attributs pour fonctionner correctement.

Les attributs HTML vont nous permettre d’apporter du contexte aux éléments, c’est-à-dire de préciser le sens de ceux-ci. Certains attributs vont être obligatoires au bon fonctionnement de certains éléments HTML tandis que d’autres vont être facultatifs.

La plupart des éléments peuvent, ou doivent, utiliser des informations supplémentaires afin de définir la façon dont ils fonctionnent. Ces détails sont fournis via des paires nom="valeur" qu’on appelle des attributs et qui sont inclus dans la balise ouvrante de l’élément. Chaque élément possède un ensemble d’attributs autorisés qui peuvent être utilisés (on se référera aux pages des différents éléments pour avoir le détail). En outre, il existe des attributs universels qui peuvent être employés sur tous les éléments (dans certains cas, l’attribut n’aura pas d’impact sur l’élément). Les valeurs des attributs doivent être entourées de doubles quotes. On peut également définir des attributs de données qui permettent de modéliser des données propriétaires, hors du cadre des spécifications HTML.

Ci-dessous les chapitres détaillants les balises HTML, Un clic sur le titre s’ouvrira sur le contenu.

<!– …–> : Les commentaires uniquement pour le HTML.

Les commentaires ne s’affichent pas dans le navigateur. Ils sont insérés dans le code source et servent de repères. Ils peuvent tenir sur plusieurs lignes. Ils sont utilisé pour expliquer une partie de code, lorsque la page atteint des centaines ou des milliers de lignes, ils sont utile pour la compréhension de pages anciennes ou codés en équipe.

Exemple : de présentation d’un commentaire
1
2
3
4
<!-- Ceci est un commentaire, il ne sera pas affiché 
dans le navigateur -->
<p> Seul ce paragraphe s'affiche.</p>
Résultat, affiché :

Seul, ce paragraphe s’affiche.

 

<!Doctype html> : S’insère en tout début de page, elle n’a pas de balise de fermeture.

Le doctype est une ligne de code servant à définir le type de votre document. Il précise les normes définies que vous allez utiliser dans votre éditeur de textes et placé à la première ligne avant la balise la balise .

Le doctype n’est pas une balise HTML5 comme les autres, c’est une instruction pour le navigateur à propos de la version de HTML de votre page.

Résultat sur la ligne 1 de l’éditeur de textes : <!Doctype html> </html>

Les métadonnées contiennent des informations à propos de la page. On y retrouve les informations à propos des styles, des scripts et des données destinées à aider les moteurs de recherche et les navigateur. Les métadonnées relatives à la mise en forme ou aux scripts peuvent être définies à même la page ou sous la forme d’un lien vers un autre fichier.

ÉlémentDescription
<base>L’élément <base> définit l’URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu’un seul élément <base> au sein d’un document.
<head>L’élément HTML <head> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.
<link>L’élément HTML <link> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers une feuille de style, vers les icônes utilisées en barre de titre ou comme icône d’application sur les appareils mobiles.
<meta>L’élément HTML <meta> représente toute information de métadonnées qui ne peut pas être représentée par un des éléments (<base><link><script><style> ou <title>)
<style>L’élément HTML <style> contient des informations de mise en forme pour un document ou une partie d’un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en CSS.
<title>L’élément <title> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l’onglet de la page). Cet élément ne peut contenir que du texte, les balises qu’il contiendrait seraient ignorées.

 

<body> : L’élément <body> représente le contenu principal du document HTML. Il ne peut y avoir qu’un seul élément <body> par document.

Organiser le contenu d’une page en différentes sections permet d’avoir une structure logique au sein d’un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.

ÉlémentDescription
<address>L’élément HTML <address> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.
<article>L’élément HTML <article> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d’utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un flux de syndication).
<aside>L’élément HTML <aside> (en anglais, “aparté”) représente une partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal du document.
<footer>L’élément HTML <footer> représente le pied de page de la section ou de la racine de sectionnement la plus proche. Un pied de page ou de section contient habituellement des informations sur l’auteur de la section, les données relatives au droit d’auteur (copyright) ou les liens vers d’autres documents en relation.
<header>L’élément HTML <header> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d’autres éléments tels qu’un logo, un formulaire de recherche, etc.
<h1><h2><h3><h4><h5><h6>Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1> est le plus important et <h6> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu’il introduit.
<hgroup>L’élément HTML <hgroup> représente un titre de plusieurs niveaux pour une section d’un document. Il regroupe un ensemble d’éléments <h1>–<h6>.
<main>L’élément HTML <main> représente le contenu majoritaire du <body> du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d’une application.
<nav>L’élément HTML <nav> représente une section d’une page ayant des liens vers d’autres pages ou des fragments de cette page. Autrement dit, c’est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).
<section>L’élément HTML <section> représente une section générique d’un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.

 

Le contenu HTML textuel permet d’organiser des blocs ou des sections de contenu entre la balise ouvrante et la balise fermante. Ces éléments sont cruciaux pour l’accessibilité et le référencement car ils permettent d’identifier le sens du contenu.

ÉlémentDescription
<blockquote>L’élément <blockquote> (qui signifie bloc de citation) indique que le texte contenu dans l’élément est une citation longue. Le texte est généralement affiché avec une indentation (voir les notes ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l’attribut cite tandis qu’un texte représentant la source peut être donné via l’élément <cite>.
<dd>L’élément HTML <dd> (pour definition description) indique la définition d’un terme au sein d’une liste de définitions (élément (<dl>). Cet élément ne peut apparaître qu’en tant qu’élément appartenant à une liste de définitions et doit être précédé d’un élément <dt>.
<dir>L’élément HTML <dir> (pour directory) est utilisé comme un conteneur pour un répertoire (c’est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l’agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l’élément <ul> qui permet de représenter des listes et, entre autres, des listes de fichiers.
<div>L’élément HTML <div> (qui signifie division du document) est un conteneur générique qui permet d’organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d’autres éléments pour leur appliquer un style (en utilisant les attributs class ou id) ou parce qu’ils partagent des attributs aux valeurs communes, tel que lang. Il doit uniquement être utilisé lorsqu’aucun autre élément sémantique (par exemple <article> ou <nav>) n’est approprié.
<dl>L’élément HTML <dl> représente une liste de descriptions sous la forme d’une liste de paires associant des termes (fournis par des éléments <dt>) et leurs descriptions ou définitions (fournies par des éléments <dd>). On utilisera par exemple cet élément pour implémenter un glossaire.
<dt>L’élément HTML <dt> identifie un terme dans une liste de définitions ou de descriptions. Cet élément n’apparaît qu’en tant qu’élément enfant d’un élément <dl> et est généralement suivi d’un élément <dd>.
<figcaption>L’élément HTML <figcaption> (pour figure caption en anglais) permet d’indiquer un sous-titre, une légende, associé à une figure ou à une illustration (cette dernière étant représentée par l’élément <figure> qui est le parent direct de la légende). L’élément <figcaption> est optionnel ; s’il n’est pas présent, la figure n’aura pas de légende.
<figure>L’élément HTML <figure> représente une figure (un schéma), qui peut être accompagné d’une légende grâce à l’élément <figcaption>. Il est normalement référencé de manière unique. C’est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.
<hr>L’élément HTML <hr> représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d’une section).
<li>L’élément HTML <li> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée (<ol>), une liste non ordonnée (<ul>) ou un menu (<menu>). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu’un nombre ou une lettre.
<main>L’élément HTML <main> représente le contenu majoritaire du <body> du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d’une application.
<ol>L’élément HTML <ol> représente une liste ordonnée. Les éléments d’une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n’est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété list-style-type.
<p>L’élément HTML <p> représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont des éléments blocs.
<pre>L’élément HTML <pre> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.
<ul>L’élément HTML <ul> représente une liste d’éléments sans ordre particulier. Il est souvent représenté par une liste à puces.

 

Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d’un terme, d’une ligne ou d’un fragment de texte.

ÉlémentDescription
<a>L’élément <a> (pour ancre ou anchor en anglais) définit un hyperlien vers un autre endroit de la même page ou vers une autre page sur le Web.
<abbr>L’élément <abbr> représente une abréviation ou un acronyme et permet, de façon optionnelle, d’en fournir une description complète. S’il est présent, l’attribut title doit contenir cette même description complète et rien d’autre.
<b>L’élément <b> permet d’attirer l’attention du lecteur sur le contenu d’un élément sans que ce contenu revêt une importance particulière. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c’est la propriété CSS font-weight qu’il faut utiliser. Si l’élément est d’une importance particulière, on utilisera l’élément HTML <strong>.
<bdi>L’élément <bdi> (ou élément d’isolation de texte bidirectionnel) isole une portée (span) de texte pouvant être formatée dans une direction différente de celle du texte qui l’entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d’un texte écrit en français (écrit de gauche à droite).
<bdo>Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n’hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
<br>L’élément HTML <br> crée un saut de ligne (un retour chariot) dans le texte. Il s’avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu’on écrit une adresse ou un poème).
<cite>L’élément HTML <cite> contient le titre d’une œuvre telle qu’un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l’œuvre. Cette référence peut-être abrégée en accord avec les conventions d’usages pour l’ajout des métadonnées de citations.
<code>L’élément HTML <code> représente un fragment de code machine. Par défaut, l’agent utilisateur utilise une police à chasse fixe (monospace) afin d’afficher le texte contenu dans cet élément.
<data>L’élément HTML <data> relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l’élément {{HTMLElement(“time”)}} doit être utiisé.
<dfn>L’élément HTML <dfn> est utilisé afin d’indiquer le terme qui est en train d’être défini dans une phrase ou un paragraphe (sa définition est écrite dans son parent {{HTMLElement(“p”)}} ou {{HTMLElement(“dt”)}}/{{HTMLElement(“dd”)}} ou {{HTMLElement(“section”)}} le plus proche).
<em>L’élément HTML <em> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <em> peuvent être imbriqués, chaque degré d’imbrication indiquant un degré d’insistance plus élevé.
<i>L’élément HTML <i> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l’expression des pensées d’un personnage. Le contenu de cet élément est généralement affiché en italique.
<kbd>L’élément HTML <kbd> représente une plage de texte en ligne indiquant la saisie de texte par l’utilisateur à partir d’un clavier, d’une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le  rend par défaut le contenu d’un élément <kbd> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.
<mark>L’élément HTML <mark> représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d’indiquer les correspondances d’un mot-clé recherché au sein d’un document.
<q>L’élément HTML <q> indique que le texte qu’il contient est une citation en incise. La plupart des navigateurs modernes entoure le texte de cet élément avec des marques de citation. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l’élément <blockquote>.
<rb>L’élément de base ruby (<rb>est utilisé afin de délimiter le composant texte de base d’une annotation <ruby>. Autrement dit, le texte qui est annoté.
<rp>L’élément HTML <rp> est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui ne prennent pas en charge les annotations Ruby.
<rt>L’élément HTML <rt> indique la composante texte d’une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d’Asie orientale. Cet élément est toujours contenu dans un élément <ruby>.
<rtc>Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n’hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
<ruby>L’élément HTML <ruby> représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères d’Asie orientale.
<s>L’élément HTML <s> permet d’afficher du texte qui est barré car il n’est plus pertinent ou car il est obsolète. <s> ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors <del> et <ins>).
<samp>L’élément HTML <samp> est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).
<small>L’élément HTML <small> permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d’un contrat, des mentions relatives au droit d’auteur, etc.) quelle que soit la présentation.
<span>L’élément HTML <span> est un conteneur générique en ligne (inline) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs class ou id et aux règles CSS) ou parce qu’ils partagent certaines valeurs d’attribut comme lang. Il doit uniquement être utilisé lorsqu’aucun autre élément sémantique n’est approprié. <span> est très proche de l’élément <div>, mais l’élément <div> est un élément de bloc, alors que <span> est un élément en ligne.
<strong>L’élément HTML <strong> indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.
<sub>L’élément HTML <sub> est utilisé, pour des raisons typographiques, afin d’afficher du texte souscrit (ou en indice) (plus bas et généralement plus petit) par rapport au bloc de texte environnant.
<sup>L’élément HTML <sup> est utilisé, pour des raisons typographiques, afin d’afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.
<time>L’élément HTML <time> permet de représenter une période donnée. Cet élément permet d’utiliser l’attribut datetime afin de traduire la date ou l’instant dans un format informatique (permettant aux moteurs de recherche d’exploiter ces données ou de créer des rappels).
<tt>L’élément HTML <tt> (pour Teletype Text) crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s’il apparaissait sur un affichage à largeur fixe tel qu’un téléscripteur.
<u>L’élément HTML <u> permet d’afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l’élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.
<var>L’élément HTML <var> représente une variable dans une expression mathématique ou un texte lié à la programmation. Son contenu est généralement représenté avec une version italique de la police environnante utilisée, toutefois, ce comportement peut dépendre du navigateur utilisé.
<wbr>L’élément HTML <wbr> permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu’en temps normal, une règle empêche le saut de ligne.

 

HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.

ÉlémentDescription
<area>L’élément HTML <area> définit une zone particulière d’une image et peut lui associer un lien hypertexte. Cet élément n’est utilisé qu’au sein d’un élément <map>.
<audio>L’élément HTML <audio> est utilisé afin d’intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l’attribut src ou l’élément <source>. S’il y a plusieurs sources, l’agent utilisateur choisira celle qui convient le mieux.
<img>L’élément HTML <img> permet de représenter une image dans un document. Cet élément est un élément remplacé.
<map>L’élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions.
<track>L’élément HTML <track> est utilisé comme élément fils d’un élément <audio> ou <video> et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon le format WebVTT (ce sont des fichiers .vtt) (WebVTT pour Web Video Text Tracks) ou selon le format Timed Text Markup Language (TTML).
<video>L’élément HTML <video> intègre un contenu vidéo dans un document.

 

En plus du contenu multimédia, un document HTML peut embarquer d’autres contenus (bien que les interactions soient plutôt limitées).

ÉlémentDescription
<applet>L’élément HTML <applet>, pour les applets, définit l’intégration d’une applet Java. Cet élément est désormais déprécié en faveur de <object>.
<embed>L’élément HTML <embed> représente un point d’intégration pour une application externe ou pour du contenu interactif (autrement dit, pour un plug-in).
<iframe>Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n’hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
<noembed>L’élément <noembed> est une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l’élément <embed> ou des catégories de contenu qu’un auteur aimerait utiliser.
Cet élément a été rendu obsolète à partir de la version HTML 4.01 et a été remplacé par <object>. Le contenu alternatif doit être inséré entre la balise d’ouverture et celle de fermeture de <object>
<object>L’élément HTML <object> représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un plugin.
<param>L’élément HTML <param> définit les paramètres qui peuvent être employés dans un élément <object>.
<picture>L’élément HTML <picture> est un conteneur utilisé afin de définir zéro ou plusieurs éléments <source> destinés à un élément <img>. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s’appliquent à la boîte dans laquelle l’image devra être affichée), selon l’appareil utilisé (la densité de pixels de l’affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n’est trouvée parmi les éléments <source>, c’est le fichier défini par l’attribut src de l’élément <img> qui sera utilisé.
<source>L’élément HTML <source> définit différentes ressources média pour un élément <picture><audio> ou <video>. C’est un élément vide : il ne possède pas de contenu et ne nécessite pas de balise fermante. Il est généralement utilisé pour distribuer le même contenu en utilisant les différents formats pris en charge par les différents navigateurs.

 

 

Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.

ÉlémentDescription
<canvas>L’élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.
<noscript>L’élément HTML <noscript> définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.
<script>L’élément HTML <script> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple WebGL).

 

Ces éléments permettent d’indiquer si des portions du texte ont été modifiées.

ÉlémentDescription
<del>L’élément HTML <del> représente une portion de texte ayant été supprimée d’un document. Cet élément est souvent (mais pas nécessairement) affiché rayé.
<ins>L’élément HTML <ins> représente un fragment de texte qui a été ajouté dans un document.

 

Les éléments listés ici permettent de créer et de gérer des données tabulaires.

définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d’un élément {{HTMLElement(“colgroup”)}}.” href=”https://developer.mozilla.org/fr/docs/Web/HTML/Element/col”>

 (les données des cellules) et 

 (les cellules d’en-têtes).

ÉlémentDescription

L’élément HTML 

 représente la légende (ou le titre) d’un tableau. Il doit être le première élément parmi les descendants de l’élément . La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés caption-side et text-align.
 

L’élément HTML 

 définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d’un élément {{HTMLElement(“colgroup”)}}.

L’élément HTML 

 définit un groupe de colonnes au sein d’un tableau.

L’élément HTML 

 permet de représenter un tableau de données, c’est-à-dire des informations exprimées sur un tableau en deux dimensions.

L’élément HTML 

 permet de regrouper un ou plusieurs éléments 
 afin de former le corps d’un tableau HTML (
).

 

L’élément HTML 

 définit une cellule d’un tableau qui contient des données. Cet élément fait partie du modèle de tableau.

L’élément HTML 

 permet de définir un ensemble de lignes qui résument les colonnes d’un tableau.

L’élément HTML 

 définit une cellule d’un tableau comme une cellule d’en-tête pour un groupe de cellule. La nature de ce groupe est définie grâce aux attributs scope et headers.

L’élément 

 définit un ensemble de lignes qui définit l’en-tête des colonnes d’un tableau.

L’élément HTML 

 définit une ligne de cellules dans un tableau. Une ligne peut être constituée d’éléments 

 

 

HTML fournit différents éléments qui permettent de créer des formulaires pouvant être remplis par les utilisateurs du site ou de l’application web.

ÉlémentDescription
<button>L’élément HTML <button> est utilisé afin de créer un contrôle interactif ayant la forme d’un bouton et qui pourra être utilisé dans un formulaire ou dans le document.
<datalist>L’élément HTML <datalist> contient un ensemble d’éléments <option> qui représentent les valeurs possibles pour d’autres contrôles.
<fieldset>L’élément HTML <fieldset> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire web.
<form>L’élément HTML <form> représente une section d’un document qui contient des contrôles interactifs permettant à un utilisateur d’envoyer des données à un serveur web.
<input>L’élément HTML <input> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l’utilisateur de saisir des données. Les saisies possibles et le comportement de l’élément <input> dépend fortement de la valeur indiquée dans son attribut type.
<label>L’élément HTML <label> représente une légende pour un objet d’une interface utilisateur. Il peut être associé à un contrôle en utilisant l’attribut for ou en plaçant l’élément du contrôle à l’intérieur de l’élément <label>. Un tel contrôle est appelé contrôle étiqueté par l’élément <label>.
<legend>L’élément HTML <legend> représente une légende pour le contenu de son élément parent <fieldset>.
<meter>L’élément HTML <meter> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.
<optgroup>L’élément HTML <optgroup>, utilisé dans un formulaire, permet de créer un groupe d’options parmi lesquelles on peut choisir dans un élément <select>.
<option>L’élément HTML <option>, utilisé dans un formulaire, permet de représenter un contrôle au sein d’un élément <select><optgroup> ou <datalist>. Cet élément peut donc représenter des éléments d’un menu dans un document HTML.
<output>L’élément HTML <output> représente un conteneur dans lequel un site ou une application peut injecter le résultat d’un calcul ou d’une action utilisateur.
<progress>L’élément HTML <progress> indique l’état de complétion d’une tâche et est généralement représenté par une barre de progression.
<select>L’élément HTML <select> représente un contrôle qui fournit une liste d’options parmi lesquelles l’utilisateur pourra choisir.
<textarea>L’élément HTML <textarea> représente un contrôle qui permet d’éditer du texte sur plusieurs lignes.

HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.

ÉlémentDescription
<details>L’élément HTML <details> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <summary>.
<dialog>L’élément HTML <dialog> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).
<menu>L’élément HTML <menu> représente un groupe de commandes que l’utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d’un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).
<menuitem>L’élément HTML <menuitem> représente une commande qu’un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.
<summary>L’élément HTML <summary> représente une boîte permettant de révéler le contenu d’un résumé ou d’une légende pour le contenu d’un élément <details>. En cliquant sur l’élément <summary>, on passe de l’état affiché à l’état masqué (et vice versa) de l’élément <details> parent.

 

Les composants web (ou « Web Components ») permettent de créer et d’utiliser des éléments personnalisés comme s’ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.

 

Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maîtrisiez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5.pour vous mettre à jour de vos compétences.

Chaque chapitre est rédigé de façon concise et compréhensible par tous et divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances.

Chaque point détaillé est inclus dans un exemple concret dont certains sont accompagné de démo consultable en ligne.

Rejoindre le cours HTML CSS

sources : pierre-giraud.com, mozilla.org, google et bien d’autres 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

elit. dapibus elit. fringilla nec massa