Eléments, balises et attributs en HTML

HTML (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).

Un document HTML est un fichier texte qui contient des balises (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise <img>, le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML.

La syntaxe des balises

Les balises HTML respectent une syntaxe simple et stricte :

Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").
Un chevron fermant (>)

Voici quelques exemples :

<article>
<meta charset="utf-8">
<img src="monImage.png" alt="">

Les éléments en HTML

Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous comprenez bien ce qu’est un élément, vous comprenez le HTML.

Nous allons utiliser les éléments en HTML pour structurer du contenu, pour lui donner du sens. Selon l’élément utilisé, le navigateur va reconnaître le contenu comme étant de telle ou telle nature.

Ainsi, on va utiliser des éléments pour définir un paragraphe ou un titre par exemple, ou encore pour insérer une image ou une vidéo dans un document. L’élément p, par exemple sert à définir un paragraphe.

Les balises en HTML

HTML contient environ 140 balises qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.

Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit (plus rarement) d’une balise unique qu’on dit alors orpheline.

L’élément p ci-dessous est constitué d’une balise ouvrante, d’un balise fermante (notez la présence du slash), et d'un contenu (textuel) entre les balises.

L'élément p est constitué d'une balise ouvrante et d'une balise fermante en HTML

La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :

<p>
  Voici le début du paragraphe
    <strong>
      ici un texte important au sein du paragraphe
    </strong>
  et là, la fin du paragraphe.
</p>

L’élément br ci-dessous (servant à créer un retour à la ligne) n’est lui constitué que d’une balise orpheline.

L'élément br n'est constitué que d'une seule balise orpheline

Sur le web, vous trouverez peut être des éléments br écrits avec un slash après le nom de l’élément, comme ceci : <br/>. Les deux syntaxes sont acceptées en HTML, la seule différence est que la syntaxe utilisant le slash est également reconnue par le langage XML. Dans ce cours, j'utiliserai par simplicité la syntaxe sans le slash

1. Balises de premier niveau

Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le « code minimal » d'une page web.

Balise	Description
`<html>`	Balise principale
`<head>`	En-tête de la page
`<body>`	Corps de la page

Code minimal d'une page HTML :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Titre</title>

</head>

<body>

</body>

</html>

2. Balises d'en-tête

Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre<head>et</head>:

Balise	Description
`<link />`	Liaison avec une feuille de style
`<meta />`	Métadonnées de la page web (charset, mots-clés, etc.)
`<script>`	Code JavaScript
`<style>`	Code CSS
`<title>`	Titre de la page

3. Balises de structuration du texte

Balise	Description
`<abbr>`	Abréviation
`<blockquote>`	Citation (longue)
`<cite>`	Citation du titre d'une œuvre ou d'un évènement
`<q>`	Citation (courte)
`<sup>`	Exposant
`<sub>`	Indice
`<strong>`	Mise en valeur forte
`<em>`	Mise en valeur normale
`<mark>`	Mise en valeur visuelle
`<h1>`	Titre de niveau 1
`<h2>`	Titre de niveau 2
`<h3>`	Titre de niveau 3
`<h4>`	Titre de niveau 4
`<h5>`	Titre de niveau 5
`<h6>`	Titre de niveau 6
`<img />`	Image
`<figure>`	Figure (image, code, etc.)
`<figcaption>`	Description de la figure
`<audio>`	Son
`<video>`	Vidéo
`<source>`	Format source pour les balises`<audio>`et`<video>`
`<a>`	Lien hypertexte
`<br />`	Retour à la ligne
`<p>`	Paragraphe
`<hr />`	Ligne de séparation horizontale
`<address>`	Adresse de contact
`<del>`	Texte supprimé
`<ins>`	Texte inséré
`<dfn>`	Définition
`<kbd>`	Saisie clavier
`<pre>`	Affichage formaté (pour les codes sources)
`<progress>`	Barre de progression
`<time>`	Date ou heure

4. Balises de listes

Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de définitions…)

Balise	Description
`<ul>`	Liste à puces, non numérotée
`<ol>`	Liste numérotée
`<li>`	Élément de la liste à puces
`<dl>`	Liste de définitions
`<dt>`	Terme à définir
`<dd>`	Définition du terme

5. Balises de tableau

Balise	Description
`<table>`	Tableau
`<caption>`	Titre du tableau
`<tr>`	Ligne de tableau
`<th>`	Cellule d'en-tête
`<td>`	Cellule
`<thead>`	Section de l'en-tête du tableau
`<tbody>`	Section du corps du tableau
`<tfoot>`	Section du pied du tableau

6. Balises de formulaire

Balise	Description
`<form>`	Formulaire
`<fieldset>`	Groupe de champs
`<legend>`	Titre d'un groupe de champs
`<label>`	Libellé d'un champ
`<input />`	Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
`<textarea>`	Zone de saisie multiligne
`<select>`	Liste déroulante
`<option>`	Élément d'une liste déroulante
`<optgroup>`	Groupe d'éléments d'une liste déroulante

7. Balises sectionnantes

Ces balises permettent de construire le squelette de notre site web.

Balise	Description
`<header>`	En-tête
`<nav>`	Liens principaux de navigation
`<footer>`	Pied de page
`<section>`	Section de page
`<article>`	Article (contenu autonome)
`<aside>`	Informations complémentaires

8. Balises génériques

Les balises génériques sont des balises qui n'ont pas de sens sémantique.

En effet, toutes les autres balises HTML ont un sens :<p>signifie « Paragraphe »,<h2>signifie « Sous-titre », etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne convient. On utilise le plus souvent des balises génériques pour construire son design.

Il y a deux balises génériques : l'une est inline, l'autre est block.

Balise	Description
`<span>`	Balise générique de type inline
`<div>`	Balise générique de type block

Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style:

class: indique le nom de la classe CSS à utiliser.
id: donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type ID, pour des manipulations en JavaScript, etc.
style: cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la suite.

Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la plupart des autres balises.

Ci-dessous, la liste complète des balises HTML avec description, attributs, syntaxe, balises HTML déconseillées, balises META, ...

2019-06-14 05:44:20 / mazoughou@magoe.gn

0 commentaires

Votre impression compte aussi

Conçu par Magoé Technologie. Tout droit réservé

Balise HTML	Description	Fin	Attribut
<!doctype>	Numéro de version du langage HTML utilisé.	N
<!-- -->	Commentaire.	N
<abbr>	Abréviation.	O
<acronym>	Acronyme.	O
<address>	URL sous forme textuel, sans utilisation de lien hypertexte (italique).	O
<a>	Création d'une ancre pour liens hypertexte.	O	href="http://..." : Hyperlien vers une page Web. href="ftp://..." : Hyperlien vers une adresse FTP. href="telnet://..." : Hyperlien vers une adresse TelNet. href="mailto:nom@domaine.com" : Hyperlien vers l'e-mail de nom@domaine.com. href="nomdefichier" : Hyperlien vers un fichier local, si le fichier ne peut pas être affiché dans le navigateur, le fichier sera téléchargé.
<applet>	Insertion d'un applet Java. (déconseillé)	O
<area>	Permet de définir une zone cliquable dans la page.	N
<b>	Gras.	O
<base>	Définition de l'URL de la page HTML exploité en cas d'erreur de transmission.	N
<basefont>	Définit la taille par défaut des caractères. (déconseillé)	N	size=x : La taille par défaut des caractères sera de x.
<bdo>	Changement de direction impossible.	O
<bgsound>	Insertion d'un fichier audio au format WAV ou MID (I.E. seulement).	N	src="fichierson" : emplacement et nom du fichier son.
<big>	La taille de la police est augmenté de 1 point.	O
<blink>	Clignotement du texte (N.N. seulement).	O
<blockquote>	Petite marge à gauche.	O
<body>	Encadre le corps d'un fichier HTML.	O	bgcolor="couleur" : Couleur qui sera utilisé pour l'arrière plan. background="fichierimage" : Image d'arrière-plan (BMP, JPG ou GIF). link="couleur" : Couleur des liens. alink="couleur" : Couleur des liens déjà exploités. vlink="couleur" : Couleur des liens lors du clic.
<br>	Saut de ligne.	N	clear="left\|right\|all" : Le texte ou l'image suivante est décalé vers le bas, jusqu'à ce qu'il n'y ait plus d'élément de formatage à gauche\|à droite\|à gauche et à droite.
<button>	Bouton dans un formulaire (I.E. seulement).	O
<caption>	Titre de tableau.	O	align="left\|center\|right" : Alignement du titre à gauche\|centré\|à droite.
<center>	Centrage. (déconseillé)	O
<cite>	Citation (italique).	O
<code>	Code source.	O
<col>	Définition d'une colonne d'un tableau (I.E. seulement).	N
<colgroup>	Regroupement de colonnes dans un tableau (I.E. seulement).	F
<commment>	Commentaire (I.E. seulement).	O
<dd>	Définition d'un terme de glossaire (retrait) (encadré par <dl>).	F

<del>	Information sur le document HTML.	O
<dfn>	Texte sous forme logique. (déconseillé)	O
<dir>	Liste à plusieurs dimensions.	O
<div>	Implémente une feuille de style par bloc entier.	O	id="[nom]" : Identifiant. class="[nom]" : Classe.
<dl>	Structure d'un glossaire (encadre la balise <dt> et la balise <dd>).	O
<dt>	Elément d'un glossaire (encadré par la balise <dl>).	F
<em>	Emphase (italique).	O
<embed>	Insertion d'application multimédia.	N
<fieldset>	Regroupement de zone dans les formulaires.	O
<font>	Définition du texte. (déconseillé)	O	size=x : Caractère de taille x (x compris entre 1 et 7). size=+x\|-x : Augmenter\|Réduire la taille de caractère de x. color="couleur" : définit la couleur du texte.
<form>	Insertion d'un formulaire (encadre les balises <input>, <textarea>, <select> et <option>).	O	action="..." : Pour l'envoi par e-mail, remplacer ... par l'e-mail. method="..." : Pour l'envoi par e-mail, remplacer... par "post".
<frame>	Insertion d'une nouvelle frame 'encadré par la balise <frameset>.	N
<frameset>	Fichier d'index pour les frames, remplace la balise <body> (encadre la balise <frame>).	O
<h1>	Titre de niveau 1.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<h2>	Titre de niveau 2.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<h3>	Titre de niveau 3.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<h4>	Titre de niveau 4.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<h5>	Titre de niveau 5.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<h6>	Titre de niveau 6.	O	align="center\|left\|right" : Titre centré\|aligné à gauche\|aligné à droite.
<head>	En-tête d'un fichier HTML (encadre les balises <title>, <meta> et <base>).	O
<hr>	Barre horizontale	N	align="center\|left\|right" : Barre centré\|aligné à gauche\|aligné à droite. width=x%\|y : Trait large de x pourcent\|y pixels. size=x : Hauteur du trait en pixels. color="couleur" : Couleur de la barre (I.E. seulement). noshade : Pas d'affichage ombré.
<html>	Obligatoire au début et à la fin du fichier HTML.	O
<i>	Italique.	O
<iframe>	Cadre local (I.E. seulement).	O
<img>	Insertion d'une image.	N	src="nomdefichier" : emplacement et nom du fichier image (format bmp, jpg, gif). align="top\|middle\|bottom\|left\|right" : aligner l'image en haut\|au milieu\|en bas\|à gauche\|à droite. width=x : largeur de x pixels. height=y : hauteur de y pixels. border=x : bordure de x pixels. alt="texte" : affiche ce texte lorsque l'image n'est pas affichable ou lorsque la souris reste pointée dessus.
<input>	Nouvelle élément dans un formulaire.	N	type="submit\|reset\|radio\|checkbox : définit le type de l'élément : bouton "ENVOYER"\|bouton "EFFACER"\|case d'option\|case à cocher. Pour tous ces types, l'attribut value est obligatoire. Pour radio et checkbox, l'attribut name est obligatoire. value="texte" : texte à afficher dans la case ou la zone de texte. name="NomDeLélément" : nom donné à l'élément, chaque radio ou checkbox appartenant au même groupe doivent possédé le même name, mais un value différent. size=x : longueur x d'un champs de saisie d'une ligne, (pour le champ de saisie, seuls les attributs size, name et maxlenght sont demandés. maxlenght=y : longueur maximal d'un champ de saisie d'une ligne.
<ins>	Fournit des informations sur le document.	O
<isindex>	Définition d'un fichier de recherche (script CGI). (déconseillé)	N
<kbd>	Texte type "machine à écrire".	O
<label>	Extension de la balise <form> (I.E. seulement).	O
<layer>	Définition des couches (N.N. seulement).	O
<legend>	Légende de tableau.	O
<li>	Elément d'une liste (encadré par la balise <ul> ou la balise <ol>).	O
<link>	Lien indépendant du média.	N
<map>	Définit une zone cliquable.	O
<marquee>	Texte défilant (I.E. seulement).	O
<menu>	Liste de type menu. (déconseillé)	O
<meta>	Information sur la page HTML.	N	name="description\|keywords\|author" : la description\|les mots-clés\|l'auteur seront indiqués dans l'attribut content. http-equiv="refresh" : provoque le chargement de la page indiqué dans l'attribut url après x secondes indiqués dans l'attribut content. Si url est omis, la même page est rechargée. content="nombre ou texte" : voir ci-dessus. url="fichier" : voir l'attribut http-equiv.
<nextid>	Indique le document suivant.	N
<nobr>	Pas de passage automatique à la ligne sauf avec la balise <wbr>.	O
<noembed>	Encadre les éléments qui seront interprété si les applications multimédia ne sont pas acceptés par le navigateur.	O
<noframes>	Encadre les éléments qui seront interprétés si les frames ne sont pas accepté par la navigateur.	O
<noscript>	Encadre les éléments qui seront interprété si les scripts ne sont pas acceptés par le navigateur.	O
<object>	Insertion d'objet (multimédia, applet Java...).	O

<ol>	Liste numérotée (encadre la balise <li>).	O
<option>	Nouvelle entrée dans une liste de choix.	N
<p>	Début d'un paragraphe, saute 2 lignes.	F	align="center\|left\|right" : Paragraphe centré\|aligné à gauche\|aligné à droite.
<param>	Paramètre d'un objet inséré.	O