Élément : <a>

Définition : Lien hypertextuel

Syntaxe : Attribut obligatoire href : utilisé afin de spécifier l'adresse URL (relative ou absolue) de la source à laquelle on réfère.

Attribut facultatif target : permet d'indiquer où s'ouvrira le lien (par exemple _blank oblige l'ouverture du lien dans une nouvelle fenêtre)

Affichage : Le contenu entre la balise d’ouverture et la balise de fermeture sera l'objet « cliquable » (texte ou image) qui permettra d'atteindre le document ou la partie de document auquel on réfère. S’il s’agit de texte, il sera souligné et en bleu. Le texte devient violet lorsque le lien a déjà été visité.

Note : Il est possible de faire des liens internes dans une page Web en introduisant un attribut id dans la balise d'ouverture où on veut que le lien mène et en pointant la valeur de cet attribut id dans l'attribut href d'un élément a (à noter qu'il faut faire précéder du caractère dièse # la valeur de l'attribut).

Élément : <address>

Définition : Bloc d’adresse (l’adresse n’a pas besoin de respecter une forme spécifique)

Affichage : Généralement rendu en italique et aligné à gauche

Élément : <blockquote>

Définition : Citation provenant d’une autre source (utilisé pour citations longues)

Syntaxe : ne peut pas contenir directement du texte (on peut par exemple mettre le texte dans l’élément <p>)

Affichage : Le texte est affiché avec une légère indentation par rapport aux paragraphes

Élément : <br />

Définition : Retour à la ligne (line break)

Syntaxe : Élément vide

Affichage : Force un retour de chariot

Élément : <cite>

Définition : Titre d’un document cité en référence ou citation courte

Affichage : Généralement affiché en italique par les navigateurs

Élément : <dd>

Définition : Définition du terme (DD=Definition)

Note : imbriquée dans une liste <dl>

Élément : <dl>

Définition : Liste de définitions (DL = Definition List)

Affichage : Les items ne sont pas introduits par une puce ou un numéro. Par défaut, les définitions (dd) apparaissent en retrait par rapport au terme défini (dt).

Note : Contient une séquence d'éléments <dt> et <dd>

Élément : <dt>

Définition : Terme défini (DT = Defined Term)

Note : imbriquée dans une liste <dl>

Élément : <em>

Définition : Texte mis en évidence (EM = Emphasize)

Affichage : Généralement affiché en italique par les navigateurs

Élément : <hr />

Définition : Ligne horizontale (horizontal rule)

Syntaxe : Élément vide

Affichage : Insert une ligne horizontale qui traverse tout l’écran

Élément : <img />

Définition : Image insérée dans le texte

Syntaxe : Élément vide possédant des attributs obligatoires et utiles : (1) src : adresse URL (absolue ou relative) de l'image, et (2) alt : texte à afficher à la place de l'image si l'utilisateur préfère ne pas avoir d'images ou s'il utilise un navigateur textuel

Affichage : L’alignement de l’image dépend de l’alignement du paragraphe ou de la cellule du tableau dans lequel elle est insérée

Exemple d'application

Code HTML	Dans le navigateur
<img src="plan_2e_lgroulx.jpg" alt="accès au bureau C2072"/>

Élément : <input />

Définition : Contrôle de formulaire

Syntaxe : Possède plusieurs attributs dont l'attribut type, pour indiquer le type de contrôle (par exemple, un bouton pour soumettre le formulaire (type="submit"), une liste de choix avec choix unique (type="radio"), une liste de choix avec plusieurs choix (type="checkbox"), et une boîte de saisie de texte court (type="text"). L'attribut name permet de nommer le contrôle, tandis que l'attribut value indique la valeur enregistrée pour ce contrôle.

Note : Voir les entrées de la forme <input type=...> dans le glossaire pour des précisions sur les principaux types de contrôles.

Élément : <input type=checkbox />

Définition : Liste de choix avec plusieurs choix possibles

Syntaxe : Forme générique :
<p>
<input type="checkbox" id="nom_question_1" name="nom_question_1" value="valeur si coché" /><label for="nom_question_1">Réponse 1</label><br />
<input type="checkbox" id="nom_question_2" name="nom_question_2" value="valeur si coché" /><label for="nom_question_2">Réponse 2</label><br />
<input type="checkbox" id="nom_question_3" name="nom_question_3" value="valeur si coché" /><label for="nom_question_1">Réponse 3</label>
</p>

Chacun des choix de la liste fait l'objet d'une balise <input>. Comme chacune des valeurs (attribut value) peut être choisie et donc, sauvegardée, chacune des balises input possède un nom différent pour pouvoir les enregistrer séparément.

Affichage : Chacun des choix de la liste est précédé par une case à cocher.

Élément : <input type=date />

Définition : Boîte de saisie pour une date.

Syntaxe : Forme générique :

<input type="date" name="question1" value="" />

Affichage : L'affichage peut varier selon le navigateur.

Élément : <input type=email />

Définition : Boîte pour la saisie d'une adresse de courriel.

Syntaxe : Forme générique :

<input type="email" name="question1" value="" />

Note : Il est possible d'utiliser les attributs maxlength et size pour respectivement contrôler la longueur maximale permise pour l'adresse et la longueur de la boîte affichée.

Élément : <input type=hidden />

Définition : Champ de formulaire caché.

Syntaxe : <input type="hidden" id="annee" value="1985" />

Note : Permet, entre autres, de faire passer certaines valeurs d'une page à l'autre, valeurs ne nécessitant pas de saisie de la part de l'utilisateur.

Élément : <input type=number />

Définition : Bopite pour la saisie d'un nombre

Syntaxe : Forme générique :

<input type="number" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : min et max pour indiquer la valeur minimale et la valeur maximale permises.

Élément : <input type=radio />

Définition : Liste de choix avec choix unique

Syntaxe : Forme générique :

<p>
<input type="radio" id="choix1" name="nom_question" value="valeur1" /><label for="choix1">Choix 1</label><br />
<input type="radio" id="choix2" name="nom_question" value="valeur2" /><label id="choix2">Choix 2</label>
</p>

Chaque choix de la liste fait l'objet d'une balise <input>. Les différents éléments d'une même liste sont liés du fait que chacune des balises <input> des choix possède le même nom (valeur de l'attribut name). Ce qui sera enregistré dans la base de données est ce qui est indiqué pour l'attribut value du choix qui sera coché.

Affichage : Chaque choix sera précédé d'un bouton radio rond.

Élément : <input type=submit />

Définition : Bouton pour la soumission d'un formulaire

Syntaxe : L'attribut name permet de nommer le bouton, tout comme l'attribut id. L'attribut value permet de préciser le texte que l'on veut voir affiché sur le bouton.

Note : L'action qui sera exécutée une fois le bouton cliqué sera l'action indiquée dans la balise d'ouverture <form>.

Élément : <input type=text />

Définition : Boîte pour la saisie d'une réponse courte (une ligne)

Syntaxe : Forme générique :

<input type="text" name="question1" value="" />

Note : Deux attributs facultatifs peuvent être ajoutés : maxlength et size. L'attribut maxlength permet d'indiquer le nombre maximal de caractères permis et peut servir à empêcher la saisie de chaîne de caractères dépassant le nombre permis pour un champ. L'attribut size permet de préciser la longueur de la boîte affichée à l'écran.

De plus, l'attribut pattern, aussi facultatif, peut être utiliser pour valider la forme de ce qui est saisi. Par exemple, pour un champ où l'on saisit un code postal canadien, qui aura ainsi toujours la forme A0A 0A0 : pattern="[A-Z][0-9][A-Z] [0-9][A-Z][0-9]" (voir https://www.w3schools.com/js/js_regexp.asp pour des informations sur l'utilisation des expressions régulières (pattern))

Élément : <label>

Définition : Étiquette d'une balise input

Syntaxe : Les balises ouvrante et fermante encadrent l'élément textuel d'une balise <input> qui est affiché dans le navigateur. L'attribut for permet de lier l'étiquette à la balise <input> en lui donnant la même valeur que l'attribut id de cette balise.

Affichage : Aucun rendu visuel particulier outre le fait que le contrôle sera coché si l'utilisateur clique avec sa souris sur l'étiquette textuelle (ce qui est une valeur ajoutée d'un point de vue ergonomique).

Élément : <li>

Définition : Item de liste (LI = List item)

Affichage : Items affichés en retrait par rapport au texte et précédés d’une puce lorsqu’imbriqués dans une liste <ul>, ou d'une numérotation si imbriqués dans une liste <ol>

Élément : <ol>

Définition : Liste numérotée (OL = Ordered list)

Note : Contient un ou des éléments <li>

Élément : <optgroup>

Définition : Regroupement d'éléments dans une liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<optgroup label="Premier groupe">
<option value="valeur1">Élément 1</option>
<option value="valeur2">Élément 2</option>
</optgroup>
<optgroup label="Deuxième groupe">
<option value="valeur3">Élément 3</option>
<option value="valeur4">Élément 4</option>
</optgroup>
</select>

Chaque bloc d'éléments de la liste que l'on veut regrouper sera encadré par la balise <optgroup>. Cette balise possède un attribut label qui permet d'identifier le groupe.

Affichage : Les étiquettes des groupes seront indiquées en gras et en italique et les éléments appartenant à un groupe seront présentés sous son étiquette avec une indentation pour représenter la hiérarchie.

Élément : <option>

Définition : Élément d'une liste déroulante

Syntaxe : Se retrouve à l'intérieur d'une balise <select>. Chaque item de la liste fait l'objet d'une balise <option>. Ses balises ouvrante et fermante encadrent la valeur qui sera affichée dans la liste. L'attribut value permet de définir la valeur qui sera sauvegardée si un item est sélectionné.

Élément : <p>

Définition : Paragraphe

Affichage : Aligné à gauche avec espacement avant et après l'élément

Élément : <select>

Définition : Liste déroulante

Syntaxe : Forme générique :

<select name="liste">
<option value="valeur1">Premier élément</option>
<option value="valeur2">Deuxième élément</option>
</select>

Les balises ouvrante et fermante encadrent la liste des éléments, chaque élément étant constitué d'une balise <option>.

Affichage : Affiche une liste déroulante.

Note : L'attribut multiple peut être ajouté pour préciser s'il est possible de faire plus d'un choix dans la liste.

Élément : <strong>

Définition : Texte important (sert à marquer la force du texte; emphase forte)

Note : Généralement affiché en gras par les navigateurs

Élément : <table>

Définition : Élément de plus haut niveau pour définir un tableau

Syntaxe : Contient des éléments <tr> (TR=Table Row) qui définissent les lignes du table qui, eux-mêmes, contiennent des éléments <td> (TD=Table Data) pour définir les cellules (colonnes). En sus des éléments <tr> et <td>, on peut y retrouver un élément <caption> pour indiquer le titre du tableau ainsi que, des éléments <th> remplaçant des éléments <td> pour désigner les entêtes des colonnes/lignes.

L'attribut border (facultatif) permet d'ajouter une bordure pour délimiter les cellules (valeur = largeur de la bordure en pixels)

Note : Il est possible d'imbriquer un tableau à l'intérieur d'un tableau en plaçant un élément <table> (et ses enfants) à l'intérieur d'un élément <td>. Le résultat est un tableau entièrement imbriqué dans une seule cellule d’un autre tableau. Ça devient vite compliqué…

Élément : <td>

Définition : Dans un tableau, à l'intérieur d'une ligne, désigne les cellules où sont saisies les données (TD=Table Data)

Syntaxe : À l'intérieur d'un élément <tr> lui-même dans un élément <table>. Les attributs colspan et rowspan peuvent être utilisés pour fusionner des lignes ou des colonnes.

Élément : <textarea>

Définition : Boîte de saisie de texte long

Syntaxe : Les balises ouvrante et fermante encadrent ce que l'on veut afficher dans la boîte (on peut ne rien mettre). Cette balise possède plusieurs attributs dont l'attribut cols pour indiquer la largeur de la boîte et l'attribut rows pour le nombre de lignes affichées. L'attribut maxlength permet d'indiquer, au besoin, le nombre maximum de caractères permis.

Élément : <th>

Définition : Dans un tableau, à l'intérieur d'une ligne, désigne les entêtes d'une colonne ou d'une ligne.

Syntaxe : Dans un élément <tr> lui-même à l'intérieur d'un élément <table>. Les attributs colspan et rowspan peuvent être utilisés pour fusionner des lignes ou des colonnes.

Affichage : Habituellement dans un visuel distinct du visuel des éléments <td> pour distinguer les entêtes des données.

Élément : <tr>

Définition : Dans un tableau, désigne les lignes du tableau (TR=Table Row).

Syntaxe : insérée dans un élément <table> et contenant un ou des éléments <th> ou <td>

Élément : <ul>

Définition : Liste non numérotée ou liste à puces (UL = Unordered List)

Note : Contient un ou des éléments <li>

Élément : <body>

Définition : Élément de haut niveau qui encadre l'ensemble des éléments représentant le corps de la page Web

Élément : <head>

Définition : Élément encadrant les éléments d'en-tête du document (titre, métadonnées, etc.)

Élément : <html>

Définition : Élément qui chapeaute tout le document

Note : L'attribut lang, facultatif, permet d'identifier la langue du document.

Élément : <link />

Définition : Lien dans l'entête de la page vers une ressource extérieure (une feuille de styles, un script java, etc.)

Syntaxe : Élément vide possédant des attributs indiquant le type de relation (rel), le type de fichier lié (type) et l'emplacement du fichier (href)

Note : Indique au navigateur (par le biais de ses attributs) un lien vers un autre fichier (par exemple, une feuille de styles)

Élément : <meta />

Définition : Métadonnée de la page Web.

Syntaxe : Élément vide ayant, entre autres, comme attribut, l'attribut name, qui indique le type de métadonnée telle qu'author, description, et keywords, et l'attribut content, qui précise la valeur de l'attribut.

Affichage : Les informations incluses dans ces éléments sont ignorées par les navigateurs lors de la restitution (e.g. affichage) mais utilisées par certains outils de recherche

Élément : <title>

Définition : Titre du document

Affichage : Apparaît uniquement dans la barre supérieure du navigateur ou de l'onglet où s'affiche la page.

Élément : <article>

Définition : Section de contenu d'un document qui peut être extraite et distribuée de façon indépendante (par syndication de contenu par exemple).

Élément : <footer>

Définition : Section de conclusion d'une page Web ou d'une des sections qui composent cette page.

Élément : <form>

Définition : Formulaire

Syntaxe : La balise ouvrante et fermante encadre l'ensemble des éléments composant le formulaire. On retrouve, parmi les attributs de cette balise, l'attribut name, qui permet de nommer le formulaire (ce qui peut aussi se faire avec l'attribut id), l'attribut action, pour indiquer ce qui se passe une fois un formulaire soumis (URL), et l'attribut method, pour préciser la méthode utilisée pour envoyer des données.

On retrouve deux méthodes, soit "get" ou "post". Avec la méthode "get", les valeurs transmises sont inscrites directement dans l'URL. Par exemple, l'URL http://cours.ebsi.umontreal.ca/planscours/diffusion/index.php?cours=sci6306 comprend la valeur du champ "cours", ici "sci6306". Cette méthode est utilisée entre autres lorsque l'on veut simplement afficher des données. Si l'on veut transmettre des valeurs pour modifier une base de données, on privilégie la méthode "post" qui ne les rend pas visibles dans l'URL.

Élément : <header>

Définition : Section d'introduction d'une page Web ou d'une des sections qui composent cette page.

Note : http://www.w3.org/TR/html5/sections.html#the-header-element

Élément : <nav>

Définition : Éléments de navigation d'une page Web

Élément : <section>

Définition : Regroupe des éléments de contenu portant sur une même thématique.

Élément : <h1>

Définition : Entêtes hiérarchiques de section (titre et sous-titres)

Syntaxe : <h1>titre</h1>

Affichage : Le rendu visuel permet de rendre compte de la hiérarchie. <h1>, par exemple, s’affiche généralement avec une police plus grande que les autres <hn> avec un alignement à gauche

Note : Jusqu'à six niveaux de titres de section existent (h1 à h6). Les chiffres réfèrent à une organisation hiérarchique : h1 est le titre le plus important et ne doit apparaître qu’une seule fois dans une "boite" (par exemple, dans un élément <article>, h2 à h6 sont des sous-titres de plus bas niveau et chacun peut apparaître plus d’une fois).