Cours : Les éléments et attributs HTML
(2024-2025)
ÉcoleDigitale : P12-UNCHK
💡 Objectif du cours :
Définir la notion de balise et d’élément HTML
Définir la notion d’attribut en HTML
Créer des rubriques et des paragraphes dans une page
HTML
Commenter correctement un document HTML
🛡 Introduction
Un élément HTML est généralement constitué d’une balise
de début, de sa balise de fin et du contenu inséré entre les
deux balises.
📝 Exemple
<p> Mon premier paragraphe < />
🗯 Explications
< > : Ceci désigne des chevrons, la première est ouverte et
la seconde est fermé
/ : Pour fermer une balise après avoir mis le contenu on
met slash (/) après avoir ouvert la première : </> , ceci
marque la fin.
Les balises
<p> c’est un paragraphe </>
<a href> c’est un lien </a>
<br/> c’est un saut de ligne, et les éléments sans contenu
n’ont pas de balise de fin et c’est le cas de <br>
La plupart des éléments HTML peuvent être imbriqués
(c.à.d. peut contenir d'autres éléments HTML).
• Un document HTML est une imbrication d’éléments
HTML.
Exemple
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Ma première entête</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>
• L'élément <html> définit l'ensemble du document
HTML.
• Les éléments head, title et body sont imbriqués dans
l’élément html.
• Les éléments h1 et p sont imbriqués dans l’élément body.
📝 NB :
Certains éléments HTML peuvent s’afficher même si
la balise de fin est oubliée, c’est le cas de <p>.
L’exemple fonctionne dans la plupart des navigateurs
mais d’autres balises de fin oubliées peuvent
entraîner des erreurs dans les documents HTML
Les éléments sans contenu dans HTML sont appelés
contenus vides. C’est le cas de la balise <br> et elles
peuvent être fermé dés le début comme ceci :<br/>
HTML5 n’exige pas la fermeture des éléments vides
Mais d’autres plus stricte l’exige comme XML
Sensibilité à la casse et attributs
I. Sensibilité à la casse
Les noms des attributs et de balises HTML ne sont pas
sensibles à la casse ; <P> signifie la même chose que <p>.
La norme HTML5 n’exige pas les noms de balise en
minuscule, mais W3C recommande l’utilisation des noms
de balises en HTML en minuscules et l’exige pour des
types de documents plus stricte comme XHTML.
La norme HTML5 n’exige pas de guillemets autour des
valeurs d'attribut. <a href=[Link] est correct
en HTML 5
Mais W3C le recommande en HTML, et l’exige pour les
types de documents plus stricts comme XHTML.
Les guillemets sont les plus utilisés, mais les apostrophes
sont également autorisées
II. Les attributs
Un attribut est une information supplémentaire qu’on ajoute à une
balise pour préciser ou modifier son comportement.
Ils sont toujours spécifiés dans la balise de début et son généralement
en paires nome/valeur : name= “value“
💭Exemple
La langue du document peut être déclarée dans la balise <html> avec
l’attribut lang comme suit : <html lang="wo-SN">
Déclarer la langue est importante pour les applications d'accessibles
(lecteurs d'écran) et les moteurs de recherche
Référence des attributs HTML
Voici une liste de certains des attributs standards pour la plupart des
éléments HTML
Attributs Valeur Description
Class Classname Indique un nom de classe pour
un élément
Id Identifiant Indique un identifiant unique
pour un élément
Style Style_définition Spécifie un style n ligne pour
un élément
Title Tooltip_text Indique des informations
supplémentaires sur un élément
(affiché comme un outil de
point)
Pour avoir la liste complète des attributs en HTML
🔗 [Link]
Les rubriques
Les titres
• Les titres sont définies avec les balises <h1> à <h6>. <h1> définit le
titre le plus important et <h6> le moins important.
• Exemple
<h1>Ceci est un titre 1</h1>
<h2>Ceci est un titre 2</h2>
<h3>Ceci est un titre 3</h3>
<h4>Ceci est un titre 4</h4>
<h5>Ceci est un titre 5</h5>
<h6>Ceci est un titre 6</h6>
Ceci est un titre 1
Ceci est un titre 2
Ceci est un titre 3
Ceci est un titre 4
Ceci est un titre 5
Ceci est un titre 6
Remarque
Les navigateurs ajoutent automatiquement un espace vide (une marge)
avant et après chaque titre.
L’importance des entêtes
• Utilisez les entêtes HTML pour les titres seulement et non pour
rendre un texte gros ou gras.
• Les moteurs de recherche utilisent les entêtes pour indexer la
structure et le contenu de vos pages web.
• Comme les utilisateurs peuvent parcourir vos pages par ses
rubriques, il est important d'utiliser des rubriques pour montrer la
structure du document.
• Les rubriques H1 doivent être utilisées comme rubriques principales,
suivies des rubriques H2, puis les rubriques H3, et ainsi de suite.
Lignes HTML
• La balise <hr /> crée une ligne horizontale dans une page HTML.
• L'élément hr peut être utilisé pour séparer le contenu
Exemple
<p>Ceci est un paragraphe</p>
<hr />
<p>Ceci est un paragraphe</p>
<hr />
<p>Ceci est un paragraphe</p>
L’élément <head>
• L’élément <head> n'a rien à voir avec les titres. Il est placé entre les
balises <html> et <body>
• C’est un conteneur pour les métadonnées c.à.d. des données sur le
document HTML. Les métadonnées ne sont pas affichées.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">
</head>
Remarque
Les métadonnées définissent généralement le titre du document, le jeu
de caractères, les styles, des liens, des scripts, etc
Les paragraphes
• Les documents HTML sont divisés en paragraphes.
• Les paragraphes sont définies avec la balise <p>.
• Exemple
<p>Ceci est un paragraphe</p>
<p>Ceci est un autre paragraphe </p>
• Notons que les navigateurs ajoutent automatiquement une ligne vide
avant et après un paragraphe
• Ne pas oublier la balise de fin même si la plupart des navigateurs
s’afficheront correctement si la balise de fin est oubliée.
• Exemple <p>Ceci est un paragraphe
Sauts de ligne HTML
• L’élément <br> définit un saut de ligne.
• Il est utilisé si on veut une nouvelle ligne sans commencer un
nouveau paragraphe
Exemple
<p>Ceci est<br>un paragraphe<br>avec des sauts de ligne.</p>
• <br> est un élément HTML vide. Il n'a pas de balise de fin.
• <br> ou <br />
Même si <br> marche dans tous les navigateurs, écrire <br /> sera
exigé en XHTML et en XML où les éléments sans balise de fin ne
sont pas autorisés.
L’élément <pre>
L'élément <pre> définit un texte préformaté.
Le texte à l'intérieur d'un élément <pre> est affiché dans une police à
largeur fixe (généralement Courier), et il préserve à la fois les espaces
et les sauts de ligne
Exemple
<pre>
Université Cheikh Anta Diop de Dakar.
Université Gaston Berger de Saint-Louis.
Université Alioune Diop de Bambey.
Université Assane Seck de Ziguinchor
</pre>
Les commentaires en HTML
• Les commentaires peuvent être insérés dans le code HTML pour le
rendre plus lisible et compréhensible. Les commentaires sont ignorés
par le navigateur et ne sont pas affichés.
• Syntaxe : <!-- Ceci est un commentaire -->
Remarque
Il y’a un point d'exclamation après le crochet ouvrant, mais pas avant
le crochet fermant.
Commentaire conditionnel
• On peut avoir des commentaires conditionnels en HTML qui
permettent de définir des balises à exécuter par Internet Explorer.
Syntaxe :
<!--[if IE 9]> .... Code HTML ici.... <![endif]-->
Divers
Afficher le code source HTML
• Pour le savoir, faites un clic droit dans la page et sélectionnez
"Afficher la source" (IE) ou "source de la page" (Firefox), ou similaire
pour les autres navigateurs.
• Cela ouvre une fenêtre contenant le code HTML de la page.
Inspecter un élément HTML
• Pour inspecter un élément (c.à.d. voir les éléments le constituant), on
fait un clic droit sur l’élément (ou une zone vierge) et choisir «
Vérifier » ou « Inspecter l'élément ». On verra à la fois le HTML et le
CSS).
• On pourra également modifier le code HTML ou CSS à la volée
dans le panneau Eléments ou styles qui s'ouvrira.
• Un chemin de fichier décrit l'emplacement d'un fichier dans la
structure des dossiers d'un site
Web. Ils sont utilisés pour localiser des fichiers externes tels que
• les pages Web
• les images
• les feuilles de style
• les fichiers de scripts JavaScript
Chemin Description
<img src="[Link]"> [Link] est situé dans le même dossier
que la page courante
<img src="images/[Link]" [Link] se trouve dans le dossier image
du dossier courant
<img src="/images/[Link]"> [Link] se trouve dans le dossier images
à la racine du site Web
<img src="../[Link]"> [Link] est situé dans le dossier parent du
dossier courant
Cliquez sur ce lien pour accéder à une vidéo HTML
🔗 [Link]