Référence des éléments Html

Éléments de base

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 <html> et la balise fermante </html>. L’élément <html> est parfois appelé l’élément « racine ». Certains documents complexes peuvent avoir des racines spéciales appelées shadow-roots.

Attributs

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. 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 « guillemets ». 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.

Syntaxe

<nomDeBalise attribut1="valeur" ... attributN="valeur">contenu de l'élément</nomDeBalise>

 

Racine principale

Élément Description
<html> L’élément HTML <html> représente la racine d’un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément.

 

Métadonnées du document

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ément Description
<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 ou un cadre de navigation (accéder à la même page dans une langue différente par exemple).
<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.

 

Sectionnement du contenu

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 section et également gérer un en-tête et un bas de page.

Élément Description
<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>.
<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.

 

Contenu textuel

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

<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 grâce à l’attribut cite tandis qu’un texte représentant la source peut-etre donnée 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> 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 un contenu indépendant, habituellement 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’un section). Dans les versions précédentes d’HTML, il représente une ligne horizontale. Bien qu’il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de une mise en forme.
<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.

 

 

<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.

<main>

L’élément HTML <main>représente le contenu principal du <body> du document ou de l’application. Il ne peut pas y avoir plusieurs éléments <main> au sein d’un même 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.

<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.

Sémantique du texte en ligne

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ément Description
<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ète 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.
<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.
<bdo> Comme pour tous les éléments, on peut appliquer les attributs universels.
<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, le nom de son auteur ou une URL de référence qui 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 <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 <p> ou <dt>/<dd> ou <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> The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
<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.
<nobr> L’élément HTML <nobr> évite qu’un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d’utiliser les barres de défilement pour lire le texte en intégralité.
<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>.
<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> Cet élément peut utiliser les attributs universels.
<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 :
<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.

Images et médias

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

Élément Description
<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.
<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).
<video> L’élément HTML <video> intègre un contenu vidéo dans un document.

Contenu embarqué

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

Élément Description
<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).
<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 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 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.

Scripts

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ément Description
<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).

Gestion de l’édition

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

Élément Description
<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.

Contenu tabulaire

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

Élément Description
<caption> L’élément HTML <caption> 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 <table>. 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-size et text-align.
<col> L’élément HTML <col> 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 <colgroup>.
<colgroup> L’élément HTML <colgroup> définit un groupe de colonnes au sein d’un tableau.
<table> L’élément HTML <table> permet de représenter un tableau de données, c’est-à-dire des informations exprimées sur un tableau en deux dimensions.
<tbody> L’élément HTML <tbody> permet de regrouper un ou plusieurs éléments <tr> afin de former le corps d’un tableau HTML (<table>.
<td> L’élément HTML <td> définit une cellule d’un tableau qui contient des données. Cet élément fait partie dumodèle de tableau.
<tfoot> L’élément HTML <tfoot> permet de définir un ensemble de lignes qui résument les colonnes d’un tableau.
<th> L’élément HTML <th> 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.
<thead> L’élément <thead> définit un ensemble de lignes qui définit l’en-tête des colonnes d’un tableau.
<tr> L’élément HTML <tr> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d’éléments <td> (les données des cellules) et <th> (les cellules d’en-têtes).

Formulaires

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ément Description
<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.

Éléments interactifs

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

Élément Description
<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 utilisé 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.

Web Components

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.

Élément Description
<content> L’élément HTML <content> était utilisé au sein d’un shadow DOM comme point d’insertion. Cet élément est désormais obsolète et n’était pas conçu pour être utilisé dans un document HTML simple mais pour être employé dans des composants web. Il est désormais remplacé par l’élément <slot> qui permet de créer un point d’insertion pour un shadow DOM au sein du DOM.
<element> L’élément HTML <element> était conçu pour être utilisé afin de définir des éléments DOM personnalisés, il a été retiré de la spécification. Il a été retiré en faveur d’outils JavaScript qui permettront de créer de nouveaux éléments personnalisés. En revanche, cette nouvelle technologie n’est pas encore mature et peu de navigateurs (voire aucun) ne l’implémentent actuellement.
<shadow> L’élément HTML <shadow> était utilisé comme un point d’insertion (insertion point) du shadow DOM. Cet élément a été retiré de la spécification et est désormais obsolète.
<slot> L’élément HTML <slot> représente un emplacement d’un composant web qu’on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs aux composants web (Web Components).
<template> L’élément HTML <template> est un mécanisme utilisé pour stocker du contenu côté client et qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié par la suite grâce à JavaScript.

 

 

Une liste des balises HTML5

Une liste des balises HTML5

 

Balise Description
<!– … –> Définit un commentaire
<!DOCTYPE> Définit le type du document
<a> Définit un lien
<abbr> Définit une abréviation
<address> Définit une adresse
<area> Définit une zone à l’intérieur d’une image
<article>NOUVEAU Définit un article
<aside>NOUVEAU Définit une partie latérale au contenu
<audio>NOUVEAU Définit un fichier audio
<b> Texte en gras
<base> Définit une URL de base pour tous les liens de la page
<bdo> Définit la direction du texte
<blockquote> Définit une longue citation
<body> Définit le corps de la page
<br> Saut de ligne
<button> Définit un bouton cliquable
<canvas>NOUVEAU Définit un graphique
<caption> Légende du tableau
<cite> Définit une citation
<code> Mise en forme d’un texte en code informatique
<col> Définit une colonne d’un tableau
<colgroup> Définit un groupe de colonne pour un tableau
<command>NOUVEAU Définit un bouton de commande
<datalist>NOUVEAU Définit une liste d’options
<dd> Définition d’un terme
<del> Définit un texte supprimé
<details>NOUVEAU Définit les détails d’un élément
<dfn> Définition
<div> Définit un calque ou une section
<dl> Liste de définition
<dt> Définition d’un terme
<em> Mise en exergue d’un texte – italique
<embed>NOUVEAU Définit un contenu extérieur (audio, vidéo …)
<fieldset> Regroupe plusieurs éléments d’un formulaire
<figcaption>NOUVEAU Légende d’un groupe d’élément multimédia
<figure>NOUVEAU Définit un groupe d’élément multimédia
<footer>NOUVEAU Définit le bas d’un section ou d’une page
<form> Définit un formulaire
<h1> to <h6> Définit un titre par degré importance de 1 à 6
<head> Définit l’en-tête d’un document
<header>NOUVEAU Définit le haut d’une section ou d’une page
<hgroup>NOUVEAU Regroupe les informations du haut d’une page ou section
<hr> Barre horizontale
<html> Définit un document html
<i> Texte en italique
<iframe> Introduit un page html dans une frame
<img> Définit une image
<input> Définit un champ
<ins> Définit un texte insérer
<keygen>NOUVEAU Générateur de clé pour un formulaire
<kbd> Raccourcis ou touche du clavier
<label> Légende d’un groupe d’élément de formulaire
<legend> Titre d’un groupe d’élément d’un formulaire
<li> Élément d’une liste
<link> Définit les relations entre les documents
<map> Définit une carte
<mark>NOUVEAU Mise en valeur d’un mot ou d’un texte – Texte marqué
<math>NOUVEAU Définit une formule mathématique
<menu> Définit un menu en liste
<meta> Définit des informations relatives au document
<meter>NOUVEAU Définit une unité de mesure
<nav>NOUVEAU Définit un groupe de liens de navigation
<noscript> Définit une alternative au script non supporté
<object> Définit un objet du contenu extérieur multimédia
<ol> Définit une liste ordonné
<optgroup> Regroupe d’une liste d »option dans un formulaire
<option> Option d’une liste dans un formulaire
<output>NOUVEAU Définit un type de sortie
<p> Définit un paragraphe
<param> Définit les paramètres d’un objet
<pre> Texte pré-formaté
<progress>NOUVEAU Définit une progression
<q> Définit une courte citation
<rp>NOUVEAU Annotation ruby si le script n’est pas supporté
<rt>NOUVEAU Annotation ruby d’explication
<ruby>NOUVEAU Définit une annotation en ruby
<samp> Définit un échantillon de code
<script> Définit un script
<section>NOUVEAU Définit une section
<select> Définit une liste sélectionnable
<small> Minimise l’importance d’un texte
<source>NOUVEAU Définit la source d’un contenu multimédia
<span> Définit une section de type inline
<strong> Mise en exergue d’un texte – Texte en Gras
<style> Définit un style CSS
<sub> Mise en indice d’un texte
<summary>NOUVEAU Définit l’en-tête des détails d’un document ou section
<sup> Mise en exposant d’un texte
<svg>NOUVEAU Définit une image vectorielle
<table> Définit un tableau
<tbody> Définit le corps d’un tableau
<td> Définit une cellule d’un tableau
<textarea> Définit une zone de texte
<tfoot> Définit le bas d’un tableau
<th> Définit une cellule d’en-tête d’un tableau
<thead> Définit le haut d’un tableau
<time>NOUVEAU Définit une unité de temps
<title> Définit le titre d’un document
<tr> Définit une ligne de tableau
<track>NOUVEAU Définit une unité de temps pour les éléments <audio> et <video>.
<ul> Définit une liste non-ordonné
<var> Définit une variable
<video>NOUVEAU Définit une vidéo
<wbr>NOUVEAU Définit un possible retour à la ligne

Comment faire un lien en HTML5 – Balise

Dans cet article, nous allons voir comment faire un lien en HTML5. Les liens hypertexte permettent de surfer en passant de pages en pages. Ils peuvent pointer vers un autre site web, vers d’autres pages de votre site ou pointer vers un endroit précis d’une même page.

Pour créer un lien hypertext en HTML5, on utilise la balise <a>. Elle se referme en utilisant la balise </a>. (comprendre le principe de balise imbriqué en HTML5)

I. Faire un lien hypertext en HTML5

En utilisant le principe de balise imbriqué, on va donc « entouré » le lien avec les balises <a> et </a>.

1
<a>Ceci est un lien</a>

Il est important de noter qu’un lien peut contenir plusieurs mots. Dans l’exemple ci-dessus, la phrase entière est un lien. Elle est donc cliquable.

Notre lien fonctionne, vous pouvez le tester pourtant il ne vous emmènera vers aucune page. Logique, nous ne lui avons donné aucune adresse. Pour indiquer une page ou un site vers le quel votre lien doit pointer on utilise un attribut.

Qu’est-ce qu’un attribut ? Un attribut est un élément qui permet de renseigner différentes informations à la balise auquel il appartient. Toutes les balises ont des attributs. Certains sont obsolètes, d’autres recommandés fortement.

Pour indiquer à notre balise <a> l’adresse du lien, on utilise l’attribut HREF.

1
<a href="http://www.google.fr">Faire une recherche</a>

Dans l’exemple ci-dessus, si on clique sur le texte : « faire une recherche », on changera de page pour aller sur la page d’accueil de Google. Tout comme les balises, les attributs et leur valeurs n’apparaissent pas à l’écran. Elles servent uniquement aux navigateurs.

Pour faire un lien vers une page du même site, l’adresse peut-être écris entièrement ou de façon raccourcis. Par exemple, si nous sommes sur la page d’accueil (index.html) et que nous souhaitons faire un lien vers la page de contact (contact.html), nous pourrons l’écrire comme dans l’exemple suivant :

1
<a href="contact.html">Nous contacter</a>

http://www.mon-site.fr/contact.html est l’adresse complete de la page. Mais lorsque nous sommes sur le même site, nous pouvons raccourcir l’adresse par : contact.html.

Attention, cela ne vaut que pour le cas ou la page est dans le même dossier que la page vers qui le lien se destine. Par défaut il sont à la racine du site web (tout en haut de la hiérarchie). Pour mieux comprendre, prenons l’exemple suivant : depuis votre page d’accueil vous souhaité faire un lien vers la page maxime.html qui se trouve dans le dossier PROFIL.

Pour faire un lien vers une page du même site appartenant à un dossier (maxime.html), depuis une autre page (index.html) on écris le lien de la manière suivante :

1
Consulter le profil de <a href="PROFIL/maxime.html">Maxime</a>

En cas de doute, mieux vaut écrire l’adresse complète :

1
Consulter le profil de <a href="http:www.mon-site.fr/PROFIL/maxime.html">Maxime

Astuce : Pour positionner votre site web lors de requête sur les moteurs de recherches, ces derniers analyses vos pages des plusieurs façons. Parmi elles, figure l’importance des mot-clés. Il est donc préférable de glisser un maximum de mot-clés dans la page (sans en faire trop, google le verrais et vous pénaliserais …).

Pour un lien éfficace vers un site de jardinage par exemple, il est conseillé d’utiliser le deuxième exemple ci-dessous :

1
2
3
4
5
<!-- Mauvais lien -->
<a href="http://www.mon-site.fr">Cliquez ici</a>
 
<!-- Lien optimiser  -->
<a href="http://www.mon-site.fr">La boutique du jardinage</a>

Il arrive parfois lors de la création d’un site web d’ajouter certains liens par avance mais dont on ne connait encore pas l’adresse. Par sécurité, on ajoute comme valeur le symbole # (dièse) à l’attribut HREF de la balise <a>.

1
<a href="#"&gt;Lien sans adresse</a>

II. Les attributs de la balise <a>

Nous venons de voir que la balise <a> possède l’attribut HREF qui sert à indiquer l’adresse vers laquelle le lien doit pointer. Cette balise possède d’autre attribut fonctionnant de la même façon.

Attribut Valeur Description
href URL Indiquez l’adresse de la page vers laquelle pointe le lien
hreflang language_code Indiquez la langue de la page vers laquelle pointe le lien
media New media query Indiquez le type de document vers laquelle pointe le lien. La valeur par défaut est : all
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
prefetch
prev
search
sidebar
tag
Indiquez la relation entre le document actuel et celui vers lequel pointe le lien
target _blank
_parent
_self
_top
framename
Indiquez l’emplacement d’ouverture du lien
type New mime_type Indiquez le Type MIME du document vers lequel pointe le lien

En se référant au tableau ci-dessus, si nous souhaitons ouvrir notre lien dans un nouvel onglet du navigateur, on utilisera donc l’attribut TARGET auquel on donnera la valeur _BLANK. Ce qui nous donnera :

1
<a href="http://www.mon-site.fr" target="_blank">Nouvel onglet</a>

III. Lien vers une boite Mail

Vous aurez peut-être remarquez en cliquant sur certain lien, notamment une adresse mail, s’ouvrait votre client mail (Outlook, Thunderbird, Mail ….). Une fois ouvert, certain champs sont même deja renseigner (destinataire, sujet …).

Pour faire un lien qui ouvre le client mail, on utilise l’attribut HREF que vous connaissez deja. A la place de lui ajouter l’adresse d’une page ou d’un site, on écris MAILTO suivit de l’adresse mail du destinataire.

1
<a href="mailto:mon@adresse.fr">Ecrivez-moi</a>

Pour indiquer le sujet , on ajoute SUBJECT à la fin de l’adresse mail en le reliant par le symbole ? (point d’interrogation). NE JAMAIS METTRE D’ESPACE DANS LE SUJET. On remplace les espaces par les symbole %20.

1
<a href="mailto:mon@adresse.fr?subject=Mon%20sujet">Ecrivez-moi</a>

On peut éajouter un destinataire en copie ou en copie caché afin que personne ne le sache …

1
2
3
4
5
<!-- Destinataire en copie -->
<a href="mailto:mon@adresse.fr?cc=autre@adresse.fr">Ecrivez-moi</a>
 
<!-- Destinataire en copie caché  -->
<a href="mailto:mon@adresse.fr?bcc=autre@adresse.fr">Ecrivez-moi</a>

Ecrire le corps du message (toujours sans espace – remplacé par %20)

1
<a href="mailto:mon@adresse.fr?body=bonjour%20cher%20client">Ecrivez-moi</a>

Ou en combinant plusieurs champs : (on ajoute le symbole & entre les champs à définir)

1
<a href="mailto:mon@adresse.fr?subject=abonnement&amp;cc=autre@adresse.fr">Ecrivez-moi</a>

IV. Les ancres : liens interne à la page

En HTML 4.01, la balise <a> pouvait soit être un lien hypertexte soit un lien vers une ancre. En HTML5, cette balise sera uniquement un lien hypertexte, mais si elle n’a pas l’attribut href, elle reste un espace réservé pour un lien hypertexte.

HTML5 a quelques nouveaux attributs, et certains attributs HTML 4.01 ne sont pas pris en charge dans HTML5. (les attributs suivant ne sont plus supporté en HTML5 : charset, coords, name, rev, shape)

En-tête et Corps d’une page web HTLM5

près avoir vu brièvement la définition du HTML5, nous allons nous penché sur la structure d’une page web. Comme nous vous l’expliquions précédemment, le HTML5 est un langage hérité du XML reposant sur le principe de balises imbriqués.

Certaines balises sont donc essentielles à la bonne compréhension de votre document par le navigateur. Après avoir déclaré le Doctype, vous ouvrirez une balise renfermant l’ensemble de votre code : la balise <html>. Elle indique, suite au doctype, le début du document codé en HTML5.

Vous pouvez appliquer différents styles CSS à cette balise comme pour toutes les autres. Si, par exemple vous souhaitez afficher un document sur fond noir, vous lui appliquerez un Background de couleur noir.

Il ne vous reste donc plus qu’à structurer l’intérieur de votre document HTML5 en deux parties : L’en-tête et le corps. Pour bien penser à refermer toutes les balises de votre documents, prenez l’habitude d’écrire une balise suivis immédiatement de sa balise de fermeture – si elle en a une – puis revenir ensuite placez les éléments entre celles-ci.

Certaines balises, comme la balise <html>, se referment à l’aide d’un balise de fermeture, </html>, portant le même nom mais précéder d’un anti-slash /. D’autre se referme seule en ajoutant l’anti-slash avant le symbole « > ». Par exemple la balise image <img /> ou la balise <meta /> dont nous reparleront un peu plus bas.

En-tête d’un document HTML5

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
 
  <head>
    <!-- En-tête du document  -->
  </head>
 
</html>

L’en-tête d’un document se situe donc entre les balises <head> et </head>. Dans l’en-tête, aucune ligne de code ne sera affiché par le navigateurIl sert uniquement à fournir des informations relatives à votre document au navigateur.

Bien qu’obsolète à l’affichage, certaines balises reste néanmoins quasi obligatoire à être incorporer entre les balises <head>. Prenez par exemple la balise <title>, c’est une balise très importante pour votre référencement ! Ne l’oubliez surtout pas. Elle définiras le titre de votre page pour le navigateur (tout en haut) mais aussi pour Google.

Lors d’une requête Google, les pages sont affichés par liste ou le titre prend une place prépondérante. Les mots-clés de votre page doivent figurer à l’intérieur de la balise <title>.

Les balises META

C’est aussi entre ces balises <head> que vous placerez les fameuses balises <meta> censées améliorer votre référencement. Bien que leur importance diminue au fil du temps, je vous conseille malgré tout de les laisser. Parmi toutes les balises <meta>, les plus utilisées sont les suivantes :

Content-Type : Indique la nature du document et le jeux de caractères utilisés.

TITLE : Indique le nom de votre page web. Bien qu’il soit préférable d’utiliser la balise <title>.

DESCRIPTION : Contient la description de votre page. Bien qu’elle ne soit pas affiché, elle sera affiché dans les recherches Google, juste sous le titre de votre page. Nous vous conseillons de ne pas dépasser les 200 caractères pour cette description.

KEYWORDS : Vous mettrez dans cette balises tous les mots-clés ou expressions-clés de votre page. Ils devront être séparé d’une virgule. Cette balise à une importance très relative. Une liste de 15 à 20 mots sera le maximum conseillé.

ROBOTS : La balise meta robots sert à « communiquer » avec les robots des moteurs de recherches. En effet, Google, Yahoo, bing … ont des robots (petits programmes) qui parcourent le web et enregistrent les pages web des sites. Ils vont de site en site en suivant les liens. Dans cette balise <robots> vous pourrez justement indiquer à ces robots si vous souhaitez qu’ils enregistrent ou non votre page ainsi que s’ils doivent ou non suivent les liens de cette page. A noter que vous pourrez définir individuellement chaque lien et son suivis grâce à l’attribut « NoFollow » de la balise de lien <a> dont nous reparlerons un peu plus loin.

1
2
3
4
5
6
7
8
9
10
11
12
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
  <meta name="title" content="Titre de la page" />
  <meta name="description" content="description de la page"
  <meta name="keywords" content="mots-clé1, mots-clé2, ..."
 
  <!-- Indexer et suivre -->
  <meta name="robots" content="index,follow" />
 
<head>

Ajouter le CSS

A l’intérieur des balise <head>, nous allons ajouter différents styles CSS. Le CSS est un langage autre que le HTML5. Il permet de mettre en page votre document. Pour faire simple, c’est grâce au CSS que vous définirez la couleur, la police, les emplacements … Le HTML5 et le CSS sont les deux langages de base à connaitre pour savoir créer un site web. Ils sont complémentaires et s’apprennent bien souvent en parallèles.

Pour relier une Feuille de Style – CSS pour Cascading Style Sheet, il vous faut placer la balise <link> entre les balises <head>. Donné à cette balise les attributs correspondant et leurs informations relatives. Dans l’exemple ci-dessous, Link est la balise et, Relhref et type sont des attributs.

1
2
3
4
5
<head>
 
 <link rel='stylesheet' href='votre-fichier.css' type='text/css' />
 
</head>

Relier une feuille de Style – CSS – indépendante est plus pratique, car si votre site à plusieurs pages, une seule ligne de code suffit pour l’insérer dans chacune. Si par la suite vous souhaitez modifier votre CSS, alors vous ne changerez que le code de la feuille indépendante plutôt que de modifier le code de chaque page. Et chaque page sera modifier. Cependant, sachez qu’il est possible d’écrire du code CSS sur une page html. Ce code ne sera donc valable que pour cette page. Il s’écrit de la manière suivante :

1
2
3
4
5
6
7
<head>
 
  <style type="text/css" media="screen">
  p { color:red; }
  </style>
 
</head>

Rappelez-vous, lors du cours d’introduction, nous vous expliquions que le HTML5 fonctionnais par balises imbriqués. Et qu’entre les balises <p> et </p> se trouve un paragraphe. Dans l’exemple ci-dessous, nous avons donc appliquer, en CSS, un style à tous les paragraphes de la page. Ces paragraphes s’écriront de la couleur rouge.

Relier les Scripts

Entre les balises <head>, vous pourrez également inserer des scripts. C’est un autre sujet que je n’aborderais qu’en survol car il est important de le savoir même si vous ne comprenez pas tout.

Notre tutoriel ne concernant que le HTML5 nous n’étudieront donc pas ce point en détails. Comme pour le CSS, la manipulation est quasi identique pour les scripts. Vous pourrez soit relier un script indépendant, sois l’écrire sur votre page html. Ne soyez donc pas surpris si vous croisez une ligne de code similaire à celle-ci dessous.

1
<script type="text/javascript" src="votre-script.js"></script>

Le JavaScript est un langage de script, comme son nom l’indique, qui agit avec le navigateur. Par exemple, vous pourrez ouvrir une petite fenêtre d’alerte vous demandant de confirmer votre choix lors d’un click sur un lien.

Penser à toujours refermer la balise <script> même si elle ne contient rien en apparence. Contrairement au CSS, les scripts ne s’incorporent pas toujours entre les balises <head>. Tout dépends de leur fonctionnement relatif au DOM (comprenez ceci par chargement et exécution de la page). Ne vous inquiétez pas si vous ne comprenez pas. Notre cours ce base sur le HTML5 mais d’autre langage interagissent avec lui. Il est normale de les aborder sans forcement les comprendre. Retenez juste que cette possibilité existe.

1
2
3
4
5
6
7
8
9
  <!-- Exemple d'un script JavaScript incorporer -->
  <script type="text/javascript">
    alert("Voici un message d\'alerte!");
  </script>
  <noscript>La balise SCRIPT s'accompagne souvent
  de sa balise inverse : NOSCRIPT. Cette dernière contient
  un message à afficher si le script n'est pas supporté.
  Vous n'est pas obligé de mettre cette balise.
  </noscript>

Corps d’un document HTML5

Après avoir détaillé l’en-tête situé entre les balise <head> et </head>, intéressons-nous au corps de notre page web. Ce sujet étant si vaste que le reste du cours ou tutoriel HTML5 y sera dédié.

Représentée entre les balises <body> et </body>, vous placerez tout le contenu de votre page web à l’intérieur de celle-ci. Contrairement à l’en-tête, le corps du document s’affichera sur le navigateur de vos visiteurs.

Nous apprendrons à placé des texte structuré en paragraphe, avec des titres, des images, de la musique et de la vidéo. Nous aborderont également l’architecture spécifique au HTML5 avec ses nouvelles balises tel que ASIDE, SECTION, ARTICLE, NAV … dans nos prochains cours.

Retenez ou comprenez le code source suivant pour ce chapitre :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
 <head>
 
<!-- En-tête du document  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
  <!-- Balise meta  -->
  <meta name="title" content="Titre de la page" />
  <meta name="description" content="description de la page"
  <meta name="keywords" content="mots-clé1, mots-clé2, ..."
 
  <!-- Indexer et suivre -->
  <meta name="robots" content="index,follow" />
 
  <!--  Relier une feuille CSS externe  -->
  <link rel='stylesheet' href='votre-fichier.css' type='text/css' />
 
  <!-- Incorporez du CSS dans la page  -->
  <style type="text/css" media="screen">
  p { color:red; }
  </style>
 
  <!-- Relier un fichier JavaScript  -->
  <script type="text/javascript" src="votre-script.js"></script>
 
  <!-- Incoporez du JavaScript dans la page  -->
  <script type="text/javascript">
    alert("Voici un message d\'alerte!");
  </script>
  <noscript>La balise SCRIPT s'accompagne souvent
  de sa balise inverse : NOSCRIPT. Cette dernière contient
  un message à afficher si le script n'est pas supporté.
  Vous n'est pas obligé de mettre cette balise.
  </noscript>
 
 </head>
 
 
 <body>
 
  <!-- CORPS DE LA PAGE  -->
  <p>Bienvenue sur ma page web</p>
 
 </body>
</html>

Syntaxe et lexique du HTML5 et du CSS3

Syntaxe et lexique du HTML5 et du CSS3

 

Maintenant que nous savons à quoi ressemble le HTML5 et ce que nous pouvons faire avec , il est important de comprendre les différences entre ce langage et le CSS3, leur syntaxe, et une certaine terminologie commune.

Comme sur aperçu, le HTML5 est un langage créé pour structurer et donner du sens au contenu. Le CSS3, également connu sous le nom des feuilles de style en cascade, est un langage de présentation créé pour donner du style au contenu, jouer sur son apparence. En résumé, le HTML5 détermine la structure et la signification du contenu sur une page Web pendant que le CSS3 détermine le style et l’apparence de ce contenu. Ces deux langages sont indépendants l’un de l’autre.

Le CSS3 ne doit pas résider dans un document HTML5 et vice-versa.

Prenons un exemple, l’élément HTML5 p est utilisé pour afficher un paragraphe de texte sur une page web. Le CSS3 utilise ensuite un sélecteur pour intervenir sur l’élément  p en changeant la couleur, la taille de police, le poids de la police, et d’autres propriétés … Tout ceci vous sera détaillé plus bas.

Lexique HTML 5

Quand vous commencez a coder en HTML5, vous êtes susceptible de lire ou entendre de nouveaux termes, souvent étrange. Au fil du temps, vous deviendrez de plus en plus familier avec chacun d’eux. Nous allons en détaillé trois d’entre eux, les plus important : ElémentBalise et Attribut :

Eléménts

Les éléments sont des indicatifs définissant des objets dans une page, comprenant la structure et le contenu. Quelques-uns des éléments les plus populaires sont les titres (h1 à h6), les liens (a), les mots en gras (strong) …

1
<strong>

Les balises ou Tags (en anglais)

Les éléments sont souvent faites de plusieurs ensembles de balises, identifiés comme étant d’ouverture et de fermeture. La Balise d’ouverture marquera le début d’un élément, tel que <div>. La balises de clôture marquera la fin d’un élément et commencera par une barre oblique, comme </div>.

1
<p> .... </p>

Pour ne pas confondre balises et éléments, considérez l’exemple suivant :

1
<p> L'élément P contient des mots en <strong>Gras</strong>. </p>

L’élément P contient du texte et des balises. L’élément STRONG ne contient que du texte. Jusque la tout va bien. Mais, si en CSS3 on applique un style à l’élément P, par exemple une couleur de texte rouge, alors tous le contenu de l’élément P sera affiché en rouge. Même le texte en Gras.

L’élément P contient également la balise d’ouverture <strong> et la balise de fermeture </strong>.

Les Attributs

Les attributs sont des propriétés utilisées pour fournir des instructions supplémentaires aux éléments donnés. Plus généralement, les attributs sont utilisés pour attribuer un id(identifiant), class (sélecteur CSS3), ou le titre d’un élément, une source (src), ou pour fournir une référence de lien hypertexte (href).

1
<img src="http://41mag.fr/image/logo.jpg" alt="Logo du 41mag" />

Dans la ligne de code ci-dessus, la balise <img (qui se referme toute seule : Comprendre le principe de balises imbriqués) possède deux attributs : SRC et ALT.

L’attribut SRC indique à la balise <img> l’adresse de l’image à afficher tandis que l’attibut ALT indique un texte alternatif décrivant l’image s’affichant au cas ou celle-ci ne serait pas accessible.

Structure et syntaxe d’un document HTML5

Tous les documents HTML ont une structure minimale qui contient les éléments suivant : doctypehtmlhead et body.

Suite à la déclaration doctype (En savoir plus sur le Doctype HTML5), l’éléments <HTML> signifie le début et la fin du document.

L’élément HEAD du document est utilisé pour décrire toutes les méta-données, le titre du document et des liens vers des fichiers externes (relier notre document à une feuille de styleCSS3 par exemple). Tout ce qui est inclus dans les balises ɞhead> n’est pas visible pour vos visiteurs. Il s’agit uniquement de renseignements indiqués au navigateur.

En général, la structure d’un document HTML5 se présente comme suit :

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Titre de ma page</title>
  </head>
  <body>
    <h1>Bonjour à tous</h1>
    <p>Ceci est ma page web</p>
  </body>
</html>

En savoir plus sur L’en-tête et le corps d’un document HTML5.

Lexique CSS3

En complément des termes HTML5, il y a quelques termes courant en CSS3 que vous devrez connaitre. Plus vous coderez en HTML5 et CSS3, plus ces termes vous seront familiers.

Les sélecteurs

Un sélecteur détermine exactement à quel(s) élément(s) les styles correspondant seront appliquées. Les sélecteurs peuvent inclure une combinaison de différents identifiants : les classes, les types …

Les sélecteurs sont situés avant la première accolade, {

1
p { ... }

Dans l’exemple ci-dessus, nous appliqueront un style aux élément P. Ce style, qui sera à la place des trois points (…), s’appliquera à tous les paragraphes, ou éléments P, de notre page web.

Les Propriétés

Un propriété détermine le style qui sera appliquée à un élément. Il y a un très grand nombres de propriétés que vous pourrez utiliser, et de nouvelles sont constamment ajoutées.

1
2
3
p {
    font-family: Arial;
}

Dans l’exemple ci dessus, nous avons utilisé la propriété font-family.

Les valeurs

C’est la valeur qui détermine le comportement d’une propriété. Les valeurs sont identifiés comme le texte après les deux point de la propriété jusqu’au point virgule. Ce dernier sert à indiquer la fin de la ligne de commande suivant le shéma suivant :

1
2
3
p {
    propriété : valeur ;
}

Les espaces entre les deux-points (:) et le point virgule (;) ne sont pas obligatoires. Vous pouvez mettre des espaces si cela vous parait plus lisible ou ne pas en mettre, cela n’affectera en rien le résultat.

Dans l’exemple ci-dessous, nous avons donné la valeur Arial à la propriété font-family. Pour faire simple, nous avons appliqué à notre élément P une famille de police de caractère, nous l’afficheront en Arial.

1
2
3
p {
    font-family: Arial;
}

Le CSS3 fonctionne en utilisant des sélecteurs qui permettent d’appliquer des styles aux éléments HTML5. Tous les styles CSS3 permettent à plusieurs éléments d’héritées de différent style.

Prenons un exemple, il est possible de définir un style pour l’ensemble du texte sur une page afin qu’il soit d’une couleur spécifique :

1
2
3
p {
    color : red;
}

L’ensemble de texte de notre document HTML5 appartenant à un élément P sera affiché en rouge.

1
2
<p>Ce texte sera affiché en <strong>rouge</strong> </p>
<p>Ce deuxième paragraphe sera aussi en rouge</p>

Le texte ci-dessussera donc affiché en rouge, même l’élément STRONG (le texte entre les balises <strong> et </strong>). Pour appliquer une couleur différente à l’élément STRONG ou à un seul paragraphe (élément P), nous allons avoir recours aux sélecteurs.

Les sélecteurs

Les sélecteurs, comme mentionné précédemment, servent à déterminer le style des éléments . Dans l’immédiat, il est important de bien comprendre comment les utiliser sans pour autant tous les connaitre. Les sélecteurs les plus utilisés comprennent des éléments, des identifiants et des classes, ou une combinaison des trois.

Les sélecteurs de type

Les sélecteurs de type sont les sélecteurs les plus élémentaire. Privilégiés les sélecteurs de type lorsque cela est possible car ils nécessitent moins de code et sont faciles à gérer. Le style sera appliqué à l’ensemble des éléments du même type :

1
2
3
p {
    color : red;
}
1
2
<p>Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe sera aussi en rouge</p>

Les sélecteurs de classe

Les sélecteurs de classe vous permettent d’appliquer le même style à un groupe d’éléments en leur donnant à tous le même attribut de class. En CSS3, Les classes sont notées suivant le shéma ci-dessous :

1
.class { ... }

Un point (.) précède le nom de la classe. Il est permis d’utiliser l’attribut de classe même sur de multiples éléments sur une page.

1
2
3
.rouge {
    color : red;
}
1
2
<p class="rouge">Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe ne le sera PAS</p>

Les sélecteurs d’ID (identifiant)

Les sélecteurs d’ID sont semblables à des sélecteurs de class mais ils sont utilisés pour cibler un élément UNIQUE sur le document. En CSS3, Les classes sont notées suivant le shéma ci-dessous :

1
#identifiant { ... }

Un symbole diese (#) précède le nom de le l’identifiant. Les ID sont uniquement utiliser une fois par page et devrait idéalement être réservée à des éléments significatifs.

1
2
3
#rouge {
    color : red;
}
1
2
<p id="rouge">Ce texte sera affiché en rouge</p>
<p>Ce deuxième paragraphe ne le sera PAS</p>

Combiner plusieurs sélecteurs

La beauté du CSS3 provient de la capacité de combiner les sélecteurs et d’hériter des styles. Cela vous permet de commencer avec un sélecteur générique et de continuer à travailler de façon plus spécifique. En outre, vous pouvez combiner des sélecteurs différents pour être le plus précis possible :

1
2
3
<p id="rouge">Le mot en gras est en <strong>ROUGE</strong> </p>.
<p>Le mot en gras est en <strong class="vert">Vert</strong> </p>.
<p>Le mot en gras est en <strong>Bleu</strong> </p>.
1
2
3
4
5
6
7
8
9
strong {
     color : blue ;
}
#rouge strong {
     color : red ;
}
strong.vert {
     color : green ;
}

Sélecteurs supplémentaires

Les sélecteurs peuvent être extrêmement puissants et les sélecteurs décrits ci-dessus ne sont que le début. Beaucoup de sélecteurs plus avancés existent et sont facilement disponibles. Il convient également de mentionner que tous les sélecteurs ne sont pas compatibles avec tous les navigateurs, en particulier avec les nouveaux sélecteurs introduit en CSS3.

Tous les secteurs détaillés plus dans ce chapitre sont 100% compatible avec l’ensembles des navigateurs.

Les Commentaires en HTML5 et CSS3

Le HTML5 et le CSS3 vous donnent la possibilité de commenter votre code. Ces commentaires peuvent être utilisés pour vous aider à gérer plus efficacement le code. Les Commentaires sont particulièrement utile quand plusieurs personnes travaillent sur le même projets. Tout contenu enveloppé dans les commentaires ne sera pas affiché sur la page ni interprété par les navigateurs.

Commentaires en HTML5

1
2
3
4
5
<!-- Ceci est un commentaire en HTML5,
il peut tenir su plusieurs lignes,
et ne sera ni affiché, ni interprété
par le navigateur  -->
<p>Ceci nest plus un commentaire</p>

Les commentaires en HTML5 sont encadré par les symboles <!– et –>

Commentaires en CSS3

1
2
3
4
5
/* Ceci est un commentaire en CSS3
il peut tenir su plusieurs lignes,
et ne sera ni affiché, ni interprété
par le navigateur  */
p { ... }

Les commentaires en CSS3 sont encadré par les symboles /* et */

Le Doctype HTML 5

Devenu obsolète pour les navigateurs modernes, le Doctype HTML5 à subit un rajeunissement avec l’arrivée de cette nouvelle version. La ligne de code est devenu concise, identique pour tous et sans url à ajouter. Un manière simple et efficace de respecter les normes.

Qu’est ce qu’un Doctype et à quoi sert-il ?

Un Doctype est une ligne de code servant a indiquer le Type de votre document. Le Doctype précise les normes définis que vous allez donc utilisé dans ce document. Lorsque vous codez une page web en HTML, vous devez définir son Doctype.

La ligne de code contenant le Doctype s’insère en tout début de page. Vous pouvez la placez à la première ligne de votre document HTML si vous souhaitez. Le Doctype doit toujours se situer avant la balise <HTML>.

Pour un développeur, le Doctype lui sert à valider ses pages suivant les normes W3C choisis. Mais son principal but est d’indiquer aux navigateur comment interpréter le document – ou page web.

L’arrivé des navigateurs modernes à tous bouleversé. Ils ne portent que peu d’intérêt à cette balises mise à part le cas particuliers des quirks modes. HTML 5 allant dans le sens de ses évolutions, le doctype fût donc simplifié au maximum.

Qu’est ce que le HTML 5 ? En quoi est-il nouveau ?

Le HTML est un langage de programmation pour créer une page web. C’est le langage de base que chaque vrai créateur de site a appris à ses débuts. Le HTML 5 est un évolution logique du HTML 4.01 en le simplifiant sur certain point (comme le doctype) et en l’actualisant en fonction de son utilisation et de sa distribution.

La principales nouveauté – hormis la naissance de nouvelles balises et le black-listage d’autres – réside au niveau structurel des éléments. Les notions de type « en ligne » et « bloc » sont remplacé par un système de catégorisation des éléments HMTL.

Pourquoi respecter les normes du W3C

Bien que le strict respect des normes W3C n’est pas d’effet particulier sur le référencement, il parait préférable de les suivre au maximum. Néanmoins, certaines erreurs peuvent nuire grandement à l’indexation de votre site. Par exemple, ne pas mettre de balise <title> entre les balises <head> ne gênera pas vos visiteurs mais affectera votre positionnement sur Google.

Les normes ont été créer pour éviter que tout le monde se disperse et chacun y gagne en compatibilité.

Une page web respectant les standards réduira son risque d’incompatibilité entre les différents navigateur et la plateforme sur laquelle il tourne (téléphone mobile, grand écran, tablette ….).

Structure d’un document en HTML 5

1
2
3
4
5
<!DOCTYPE html>
<html>
 <head></head>
 <body>Corps de la page</body>
</html>

Un Doctype simplifié en HTML 5

Le Doctype a été simplifié au maximum. Il ne s’agit plus d’un ligne de code à rallonge, bien souvent différente pour beaucoup, et devenu inutile au yeux des navigateurs. Le doctype n’est ainsi plus relié à une adresse relative à celui-ci.

Pour déclarer un document en HTML 5 on utilise la ligne de code ci-dessous :

<!DOCTYPE html>

htlm5

 

Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d’un document.

La conception d’une page web en suivant la philosophie du standard HTML5 spécifié par le W3C répond à quelques réflexes de base. La structure d’un document (l’imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners.