Développement Web
Hyper Text Markup Language
(HTML )
ENSA Khouribga
Pr. JABRANE Mourad
Année Universitaire: 2025/2026
Plan
1. Le Fonctionnement du Web
2. Généralités sur le Langage HTML
3. Les Eléments de Structuration de Contenu
4. Les Eléments de « Mise en Forme » de Texte
5. Les Liens dans les Documents HTML
6. Les Eléments de Liste
7. Les Tableaux en HTML
8. Les Formulaires
9. Les Images
10. Structurer votre Page
2
Développement Web
Le Fonctionnement du Web
Développement Web
Le Fonctionnement du Web
Comment ça marche le web ?
‒ Internet est basé sur une architecture de réseau nommée client-serveur.
‒ Avec cette architecture, on distingue trois rôles:
▪ Le Serveur : une machine qui héberge les pages d'un site.
▪ L’administrateur : personne qui crée et met à jour le site.
▪ Le Client : personne qui consulte le site via Internet.
Développement Web 4
Le Fonctionnement du Web
Comment ça marche le web ?
Développement Web 5
Le Fonctionnement du Web
Comment ça marche le web ?
Développement Web 6
Le Fonctionnement du Web
Page Web : Technologies utilisés pour la création
Développement Web 7
Le Fonctionnement du Web
Site Web : Définition
‒ Un Site Web est un ensemble de page web liées entre elles et regroupant
plusieurs ressources web.
‒ Une Ressource Web est :
▪ Toute sorte de document accessible par le Web
▪ Page Web, images, vidéos, documents PDF, …
‒ On distingue deux types de Site Web:
1. Statique,
2. Dynamique.
Développement Web 8
Le Fonctionnement du Web
Site Web : Types
1. Site Web Statique : les pages ne sont pas mises à jour automatiquement.
Développement Web 9
Le Fonctionnement du Web
Site Web : Types
2. Site Web Dynamique: Mise à jour automatique des pages lorsque les informations
ont changé + Le contenu des pages Web est calculé dynamiquement.
Développement Web 10
Généralités sur le Langage HTML
11
Développement Web
Généralité sur le langage HTML
HTML : Définition
HTML (HyperText Markup Language)
✓ Langage universel utilisé pour communiquer sur le Web.
✓ Reconnu par les navigateurs.
✓ Il permet de structurer le contenu d’une page Web
=> C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des
liens, des images…
✓ Hypertexte, car il permet de créer des liens vers d’autres pages ou d’autres parties d’une
page.
Développement Web 12
Généralité sur le langage HTML
HTML : Principe de Balise
‒ Un langage de balise, pas un langage de programmation.
les balises structure le contenue de la page (structure arborescente).
Chaque balise a un rôle et donne du sens au contenu présenté.
Une balise est un couple.
< nomBalise > texte </ nomBalise >
Développement Web 13
Généralité sur le langage HTML
HTML : Principe de Balise
On peut imbriquer les balises les unes dans les autres.
<p> Hooo un bloc !! </p>
<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>
Le nom des balises est prédéfini dans les spécifications HTML, on ne peut donc
PAS en inventer !
Développement Web 14
Généralité sur le langage HTML
HTML : Principe de Balise
▪ Attributs et valeurs
‒ Certaines balises peuvent être complétées par des attributs précisant certains
paramètres (l'adresse des liens, source d'une image à afficher, etc.)
‒ Une balise peut contenir plusieurs attributs.
Développement Web 15
Généralité sur le langage HTML
HTML : Principe de Balise
▪ Attributs et valeurs (suite)
‒ Les attributs sont des éléments prédéfinis dans le HTML on ne peut en «
inventer » !
‒ On peut les mettre entre simple quote, double quote ou rien.
<div id=« xj"> ou bien <div id=xj>
‒Les attributs sont toujours dans la balise ouvrante.
Développement Web 16
Généralité sur le langage HTML
HTML : Principe de Balise
▪ Attributs et valeurs (Exemple d’attribut)
src = " " : donner la source (d’une image par exemple)
<img src="[Link]" width=400 height=250 alt="paysage nature"/>
Développement Web 17
Généralité sur le langage HTML
HTML : Principe de Balise
▪ Attributs et valeurs (Exemple d’attribut)
href = " " : donner la destination d’un lien
<a href= "[Link] texte du lien </a>
Développement Web 18
Généralité sur le langage HTML
HTML : Vos Premiers Outils : Editeur de texte
1 - Bloc-notes
livré avec Windows suffit (Pas de coloration syntaxique + Nécessite de connaître tout le
langage)
Développement Web 19
Généralité sur le langage HTML
HTML : Vos Premiers Outils : Editeur de texte
2 - Notepad++
Il est recommandé d'utiliser un outil un peu plus évolué comme Notepad++ ou tout autre
équivalent dans votre système d'exploitation.
Développement Web 20
Généralité sur le langage HTML
HTML : Vos Premiers Outils : Editeur de texte
3 - VSCODE
Visual Studio Code (VS Code) est un éditeur de code source gratuit, léger et multiplateforme développé par
Microsoft, qui prend en charge de nombreux langages de programmation grâce à des extensions, et offre des
fonctionnalités avancées comme l’auto-complétion, le débogage, le contrôle de version Git et la personnalisation.
Développement Web 21
Généralité sur le langage HTML
HTML : Vos Premiers Outils : Editeur de texte
4 – php Storm
PhpStorm est un environnement de développement intégré (IDE) commercial développé par JetBrains, spécialement
conçu pour le langage PHP. Il offre des fonctionnalités avancées comme l’auto-complétion intelligente, le débogage
intégré, le support des frameworks (Laravel, Symfony, etc.), la gestion des bases de données, l’intégration avec les
systèmes de contrôle de version et une forte personnalisation, ce qui en fait un outil puissant pour le développement
web professionnel.
Développement Web 22
Généralité sur le langage HTML
HTML : Vos Premiers Outils: Browser (Navigateur Web) :
‒ Il permet de tester la page web.
‒ Vous pouvez utiliser par exemple: Mozilla Firefox, Internet Explorer,
Google Chrome, Opera, Safari, ou tout autre navigateur auquel vous êtes
habitués pour aller sur le web.
‒ Il est conseillé de tester son site régulièrement sur différents navigateurs.
Développement Web 23
Généralité sur le langage HTML
Structure d’un document HTML
Décomposons balise par balise !!!
Développement Web 24
Généralité sur le langage HTML
Structure d’un document HTML
1. La notion de DOCTYPE :
Indique au navigateur le type de document.
2. La balise <html>:
▪ Tout document HTML commence par la balise <html> qui se ferme en fin de document :
</html>
▪ La balise contient nécessairement deux balises définissant l'entête (<head>) et le corps
(<body>) du document.
▪ L’attribut lang permet de spécifier la langue de traitement du document global.
Développement Web 25
Généralité sur le langage HTML
Structure d’un document HTML
3. La balise <head> :
Détermine l’entête du document et contient les méta-informations
3.1. La balise <title> : qui sera le titre du document.
▪ Sert en référencement (repris dans les résultats de recherche)
▪ Affichée dans l’onglet du navigateur
Développement Web 26
Généralité sur le langage HTML
Structure d’un document HTML
3. La balise <head> : (suite)
3.2. La balise <meta> :
‒ C’est un élément vide pour lequel l’information est contenue dans ses attributs.
‒ Ces informations ne sont donc pas visibles dans la page mais elles sont destinées au
serveur web, aux navigateurs et aux moteurs de recherche.
‒ Chaque information est identifiée par un nom et un contenu.
Développement Web 27
Généralité sur le langage HTML
Structure d’un document HTML
3. La balise <head> : (suite)
3.2. La balise <meta> : (suite)
Exemple:
▪ Auteur :
<meta content="author" name= "author_name"/>
▪ Description :
<meta name="description" content="Description du contenu de la page" />
▪ Mots-clés :
<meta name="keywords" content="mot-clé1, mot-clé2" />
Développement Web 28
Généralité sur le langage HTML
Structure d’un document HTML
3. La balise <head> : (suite)
3.2. La balise <meta> : (suite)
La balise <meta> et codage en utf-8 :
<meta charset="utf-8"/>
‒ Permet de définir l’encodage de caractère de la page
‒ Si ce codage est correctement déclaré, il sera possible de taper directement lettres
accentuées, c cédille ç et symbole euro€, sans avoir à utiliser des entités HTML.
Développement Web 29
Généralité sur le langage HTML
Structure d’un document HTML
4. La balise <body> :
‒ Délimite le contenu de la page.
‒ Le contenu est constitué de texte, images et autres éléments qui seront
affichés.
Développement Web 30
Généralité sur le langage HTML
Structure d’un document HTML
En Résumé :
Développement Web 31
Généralité sur le langage HTML
Structure d’un document HTML
Les commentaires :
‒ Les commentaires peuvent être placés n'importe où dans un document HTML à
condition de ne pas être imbriqués.
‒ Ils sont placés entre les chaînes de caractère <!-- et -->.
Exemple :
<!-- Ceci est un commentaire -->
Développement Web 32
Les Eléments de Structuration de Contenu
33
Développement Web
Les Eléments de Structuration de Contenu
La Balise division : <div>
‒ <div> est un conteneur.
‒ Élément de type bloc qui peut inclure n’importe quel autre balise HTML.
‒ Suivi d’un passage à la ligne automatique.
‒ Permet de regrouper d’autres blocs de HTML (paragraphes, tableaux, etc.)
et de leur donner un style CSS commun.
Développement Web 34
Les Eléments de Structuration de Contenu
La Balise division : <div>
Développement Web 35
Les Eléments de Structuration de Contenu
La Balise Paragraphe : <p>
‒ Les paragraphes sont des éléments de type « bloc », suivis d’un
passage à la ligne et d'une marge par défaut.
‒ On peut imbriquer un paragraphe dans un div.
‒ On ne doit PAS mettre un paragraphe dans un paragraphe.
Développement Web 36
Les Eléments de Structuration de Contenu
La Balise Paragraphe : <p>
Développement Web 37
Les Eléments de Structuration de Contenu
Les Titres : h1 à h6
‒ Il existe six niveaux de titre (pas un de plus ! ).
‒ Il est possible d’avoir plusieurs titres de même niveau
‒ On ne peut pas mettre un Hn dans un p, ou un p dans un Hn.
Développement Web 38
Les Eléments de Structuration de Contenu
La balise Blockquote
Développement Web 39
Les Eléments de «Mise en Forme» de Texte
40
Développement Web
Les Eléments de « Mise en Forme » de Texte
L’ Elément <strong>
Développement Web 41
Les Eléments de « Mise en Forme » de Texte
L’ Elément <em>
Développement Web 42
Les Eléments de « Mise en Forme » de Texte
D’autres Eléments
‒ L’éléments <sup> permet d’afficher un texte exposant.
‒ L’éléments <sub> permet d’afficher un texte indice.
‒ L'élément représente des annotations et des petits caractères comme les
informations légales ou liées au copyright
Développement Web 43
Les Eléments de « Mise en Forme » de Texte
Les entités HTML prédéfinies
[Link]
[Link]
Développement Web 44
Les Liens dans les Documents HTML
45
Développement Web
Les Liens dans les Documents HTML
Fonction d’un Lien
‒ Le lien est un élément cliquable qui renvoie l’utilisateur sur une nouvelle
page (ou lui permet de télécharger un fichier)
‒ Il est souvent stylé différemment (bleu souligné par défaut)
‒ Il peut renvoyer :
▪ Vers un autre site (lien externe)
▪ Vers une autre page du site (lien interne)
▪ Vers des fichiers (image, .PDF, etc.)
Développement Web 46
Les Liens dans les Documents HTML
Fonction d’un Lien : balise <a>
‒ l’attribut href : indiquer vers quelle page on veut envoyer l’utilisateur
‒ l’attribut title (Facultatif) : pour ajouter une infobulle au survol et indiquer à
l’utilisateur où il va arriver.
➢ Exemple 1 : Lien externe vers un autre site
Développement Web 47
Les Liens dans les Documents HTML
Fonction d’un Lien : balise <a>
➢ Exemple 2 : Liens internes et hiérarchisation du site
‒Un site est constitué d'un ensemble de pages au sein d'un dossier (appelé racine du
site).
‒ Ces pages peuvent être organisées dans une hiérarchie de sousdossiers.
Le fichier « racine »
Développement Web 48
Les Liens dans les Documents HTML
Exercice d’application : Partie 1
1. Créez un dossier « mon_premier_site »
2. Créez-y deux fichier html : [Link] et [Link]
3. Créer les interfaces décrites ci-dessous
Développement Web 49
Les Liens dans les Documents HTML
Exercice d’application: Partie 2
3. Ajoutez un répertoire « page_interne »
4. Ajoutez-y une page « [Link] »
Développement Web 50
Les Liens dans les Documents HTML
Exercice d’application: Partie 2
Développement Web 51
Les Eléments de Liste
52
Développement Web
Les Eléments de Liste
Les listes non Ordonnées : <ul>
‒ La balise <ul> permet de créer une liste non ordonnée (unordered list).
‒ Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la liste.
‒ La balise <li> permet de créer UN élément de la liste.
Développement Web 53
Les Eléments de Liste
Les listes ordonnées : <ol>
‒ La balise <ol> permet de créer une liste ordonnée et numéroté (ordered list).
‒ Il faut l’ouvrir en début de liste et la fermer après le dernier élément de la liste.
‒ La balise <li> permet de créer UN élément de la liste.
Développement Web 54
Les Eléments de Liste
Les listes ordonnées : <ol>
‒ Liste numérotée avec les chiffres romains:
Ajouter l’attribut « type » au tag <ol> avec les valeurs suivantes :
type = i ou type=I
‒ Liste numérotée avec des lettres:
type = a ou type=A
Développement Web 55
Les Eléments de Liste
Les listes Imbriqués
‒ Les listes peuvent s'imbriquer.
‒ On peut mélanger <ul> et <ol> à condition de les fermer correctement.
‒ Développement Web 56
Les Eléments de Liste
Les listes Imbriqués
‒ Les éléments <ul> et <ol> ne peuvent contenir que des éléments <li>.
‒ Chaque élément peut contenir des éléments de bloc (p, div, h1, …)
Développement Web 57
Les Tableaux en HTML
58
Développement Web
Les Tableau HTML
Tableau HTML : Introduction
Définition :
‒ Un tableau sert à organiser des informations structurées sous forme tabulaire.
‒ Il se compose de lignes organisées elles-mêmes en cellules
Création :
‒ La balise <table></table> permet d’indiquer le début et la fin du tableau.
‒ La balise <tr> </tr> caractérise une nouvelle ligne.
‒ La balise <td> </td> marque le contenu d’une cellule dans une ligne
Développement Web 59
Les Tableau HTML
Tableau HTML : Exemple simple
Remarque: Le nombre d’éléments <td> doit rester le même dans la mesure ou chaque ligne
possède un même nombre de cellules, qui correspond au nombre du colonnes du tableau.
Développement Web 60
Les Tableau HTML
Tableau HTML : Entête & Bordure
▪ Entête : <th> peut remplacer <td> pour créer une
cellule d’entête au tableau.
Par défaut affiché en gras et centré dans les
navigateurs.
▪ Bordure : ajouter l’attribut « border » à la balise table :
<table border> …</table>
border="x" : x est l’épaisseur de la bordure
(x=1 par défaut)
Développement Web 61
Les Tableau HTML
Tableau HTML : Titre
‒ On utilise la balise <caption> pour donner un titre au tableau.
‒ La balise se place au début du tableau.
Développement Web 62
Les Tableau HTML
Tableau HTML : Fusion de Cellules
‒ Il est possible de fusionner certaines cellules entre elles avec l’attribut:
colspan=" nombredecellules" qui se place sur la cellule (th ou td).
‒ La valeur numérique de cet attribut
précise le nombre de colonnes du tableau
que couvre la cellule.
Développement Web 63
Les Tableau HTML
Tableau HTML : Fusion de Lignes
Il est possible de fusionner des lignes avec l’attribut:
rowspan=" nombredelignes" qui se place sur la cellule (th ou td)
Développement Web 64
Les Tableau HTML
Tableau HTML : Autres Attributs
➢ width="x" : largeur du tableau ( x = nombre ou % par rapport à la largeur de la fenêtre)
➢ height="x": hauteur du tableau
➢ bgcolor=couleur de fond des cellules (Ex: bgcolor="aqua")
➢ cellspacing="x" : espace entre deux cellules du tableau
➢ cellpadding="x" : espace libre (pixels) entre le texte et le bord de la cellule qui le contient.
➢ ALIGN="x" : alignement (x= left, right ou center)
➢…
Développement Web 65
Les Tableau HTML
Tableau HTML : Exercice d’application
Développement Web 66
Les Formulaires
67
Développement Web
Les Formulaires
Les formulaires sont partout autour de nous !
‒ Le formulaire sert à récupérer des données que l’utilisateur va entrer et les envoyer au serveur.
‒ A chaque formulaire est associé un programme sur un serveur qui sera chargé de collecter les données pour les
traiter (ce programme pourra être un en ASP, PHP, ...)
Développement Web 68 68
Les Formulaires
Les formulaires : Création
‒ Balise principale du formulaire <form> </form>
‒ Deux méthodes :
▪ method="get" : limitée à 255 caractères, informations passées dans la
barre d’adresse.
▪ method="post" : envoie les données dans le corps de la requête sans passer
par la barre d’adresse, c’est la méthode la plus utilisée.
‒ Action : l’adresse du fichier ou programme qui va traiter les données.
Développement Web 69 69
Les Formulaires
Les formulaires : Exemple simple
Remarque : Par défaut si elle est vide, c’est comme
n’importe quel élément, rien n’est affiché
Développement Web 70 70
Les Formulaires
Les formulaires : Zone de texte monoligne
‒ La balise de base : <input>
‒ Elle est auto-fermante.
‒ Ne génère pas de retour à la ligne.
‒ Il faut lui donner un nom avec l’attribut « name » pour que l’on puisse récupérer
sa valeur (éviter les espaces dans le name).
‒ Le nom n’est PAS visible sur la page
Développement Web 71 71
Les Formulaires
Les formulaires : Zone de texte monoligne
Attributs Supplémentaires :
‒ value="default_value" : Donner une valeur par défaut.
‒ type =" " : Préciser le type de valeur supporter par ce champ.
type = int, float, date, url, password, …
‒ maxlength=" " : le nombre de caractères maximum acceptés dans le champ.
Développement Web 72 72
Les Formulaires
Les formulaires : Zone de texte monoligne
Attributs Supplémentaires :
Développement Web 73 73
Les Formulaires
Les formulaires : Le label
‒ Son rôle est de décrire à un être humain la fonction du champ (puisque name
est invisible).
‒ Pour associer le label au champs :
▪ Ajouter un for="nom" au label. le for et l’id doivent être
identiques mais peuvent
▪ Ajouter id="nom" au champ. être différents du name.
Développement Web 74 74
Les Formulaires
Les formulaires : Zone de texte multilignes
‒ La balise de base : <textarea>
‒ C’est une balise qu’il faut ouvrir et fermer.
‒ Attributs utiles :
▪ name
▪ row : indique le nombre de lignes
▪ col : indique le nombre de colonnes
Développement Web 75 75
Les Formulaires
Les formulaires : Case à cocher
‒ Une case à cocher est un type de la balise <input> :
<input type="checkbox">
‒ Plusieurs cases, toutes peuvent être cochées.
‒ On peut mettre le label à gauche ou à droite
‒ Les cases à cocher peuvent avoir un attribut name distincts, ou identique.
‒ Si la case est cochée, il renvoie « on » lors du traitement.
Développement Web 76 76
Les Formulaires
Les formulaires : Case à cocher
On peut pré-cocher une checkbox
avec: checked="checked" ou just
checked
Développement Web 77 77
Les Formulaires
Les formulaires : Boutons radio
‒ Le bouton radio est un type de la balise <input> :
<input type=radio>
‒ Un seul choix possible parmi tous les éléments.
‒ La value est importante : c’est elle qui est renvoyée au serveur.
Développement Web 78 78
Les Formulaires
Les formulaires : Groupe Boutons radio
Pour que le navigateur comprenne que des éléments forment un groupe,
il faut leur donner le même attribut name.
Développement Web 79 79
Les Formulaires
Les formulaires : Liste déroulante
➢ La balise de base : <select>
Développement Web 80 80
Les Formulaires
Les formulaires : Bouton d’envoi
‒ Pour envoyer le formulaire on utilise :
L’attribut value=" " est obligatoire et permet de donner le « titre » du
bouton.
Le formulaire est envoyé pour traitement au fichier que l’on a défini
dans action=" ".
Développement Web 81 81
Les Formulaires
Les formulaires : Petit résumé des champs
input type = text
input type = checkbox
input type = radio
input type= submit
select + option
textarea
Développement Web 82 82
Les Formulaires
Les formulaires : Bouton de Reset
Pour remettre à zéro toutes les données du formulaire on utilise input
type="reset«
Développement Web 83 83
Les Formulaires
Les formulaires : Bouton
‒ Syntaxe différente de la balise input.
‒ Possibilité d'ajouter des images à l'intérieur (balise non auto-fermante)
Développement Web 84 84
Les Formulaires
Les formulaires : Désactiver un champs
‒ L’attribut disabled="disabled" peut-être utilisé pour désactiver un champ.
Exemple : désactiver le champ d’envoi jusqu’à ce que toutes les données
soient remplies.
‒ Note : on peut aussi juste mettre disabled en attribut.
Développement Web 85 85
Les Formulaires
Les formulaires : Champs mot de passe
‒ input type="password" : permet de masquer un mot de passe
Développement Web 86 86
Les Formulaires
Les formulaires : Uploader un fichier
Pour télécharger vers le serveur un fichier on utilise input type="file".
Développement Web 87 87
Les Formulaires
Les formulaires : Cacher un champ
‒ On peut cacher un champ avec <input type="hidden"> .
‒ Permet d’envoyer des données sans que l’utilisateur ne les voie (rien ne sera
afficher).
Développement Web 88 88
Les Formulaires
Les formulaires : Exercice
Développement Web 89 89
Les Images
90
Développement Web
Les Images
La balise <img>
‒ Peut-être insérée dans le corps du texte.
‒ On la place généralement dans un <p> ou un <div> mais peut se placer
n’importe où dans le body.
‒ Balise auto-fermante
‒ L’attribut src="[Link]" : donner le chemin vers la source de l’image.
Développement Web 91 91
Les Images
La balise <img> et attribut « alt »
‒ Un attribut alt="description du contenu de l'image" : texte alternatif qui
décrit le contenu de l’image et la remplace si l’image n’est pas téléchargée.
Développement Web 92 92
Les Images
Attributs « width » et « height »
‒ Les attributs width et height peuvent être ajoutés pour donner une taille à
l’image .
‒ Sans width/height le navigateur « devine » la taille ce qui crée des sauts de
page quand l’image se charge.
‒ En général, il vaut mieux la redimensionner avant dans un logiciel, plutôt
que charger une grande image et la redimensionner.
Développement Web 93 93
Les Images
Attribut « title »
Attribut facultatif qui permet d’afficher une info-bulle au survol de
l’image.
Développement Web 94 94
Structurer votre Page
95
Développement Web
Structurer votre Page
Les balises Structurantes de HTML 5
‒ Nouvelle balises HTML 5 pour l’organisation d’une page : header, footer,
article, section, nav, aside.
cela ne va pas beaucoup changer l'apparence de notre site pour le
moment, mais il sera bien construit et prêt à être mis en forme ensuite !
Développement Web 96 96
Structurer votre Page
Les balises Structurantes : header
‒ Il s'agit généralement d'une grande bande horizontale, située en haut du site
avec un grand titre et/ou un logo.
‒ C'est à cet endroit qu'on a toujours la même information sur le site, quelle
que soit la page du site sur laquelle on est.
Développement Web 97 97
Structurer votre Page
Les balises Structurantes : header
La figure suivante représente le site du W3C (qui se charge des nouvelles versions de HTML
et CSS notamment). La partie encadrée en rouge correspondrait à l'en-tête :
Développement Web 98 98
Structurer votre Page
Les balises Structurantes : footer
‒ À l'inverse de l'en-tête, le pied de page (<footer>) se trouve en général tout en
bas du document.
‒ C'est un endroit où on place des informations communes à l'ensemble du site
mais qui ne sont pas primordiales pour le site en tant que tel.
Exemple : liens de contact, le nom de l'auteur, les copyright, etc.
Développement Web 99 99
Structurer votre Page
Les balises Structurantes : footer
Développement Web 100 100
Structurer votre Page
Balises Structurantes : Barre de navigation
‒ La balise utilisée : <nav>
‒ Elle regroupe tous les principaux liens de navigation du site. Vous y placerez par
exemple le menu principal de votre site.
Exemple : menu réalisé sous forme de liste à puces à l'intérieur de la balise
<nav> :
Développement Web 101 101
Structurer votre Page
Balises Structurantes : Barre de navigation
Développement Web 102 102
Structurer votre Page
Balises Structurantes : Section de page
‒ Une zone importante, située au centre dont le contenu est spécifique selon la
page visitée.
‒ La balise de base : <section>
‒ Elle sert à regrouper des contenus en fonction de leur thématique.
Développement Web 103 103
Structurer votre Page
Balises Structurantes : Section de page
Développement Web 104 104
Structurer votre Page
Balises Structurantes : aside
‒ La balise de base : <aside>
‒ Elle est conçue pour contenir des informations complémentaires au document
que l'on visualise.
‒ Ces informations sont généralement placées sur le côté (bien que ce ne soit pas
une obligation).
‒ Il peut y avoir plusieurs blocs <aside> dans la page.
Développement Web 105 105
Structurer votre Page
Balises Structurantes : aside
Développement Web 106 106
Structurer votre Page
Balises Structurantes : Article
‒ La balise de base : <article>
‒ Elle sert à englober une portion généralement autonome de la page. C'est une
partie de la page qui pourrait ainsi être reprise sur un autre site.
‒ C'est le cas par exemple des actualités (articles de journaux ou de blogs).
Développement Web 107 107
Structurer votre Page
Balises Structurantes : Article
Développement Web 108 108
Structurer votre Page
Balises Structurantes : Remarques
Développement Web 109 109
Structurer votre Page
Balises Structurantes : Exemple
Développement Web 110 110
Structurer votre Page
Balises Structurantes : Exemple
Développement Web 111 111
Structurer votre Page
Balises Structurantes
Remarque : Je ne comprends pas l'intérêt de ces balises. On peut
très bien obtenir le même résultat sans les utiliser !
Explication : C'est vrai. En fait, ces balises sont seulement là pour
expliquer à l'ordinateur « Ceci est l'en-tête », « Ceci est mon pied de
page », etc. Elles n'indiquent pas, contrairement à ce qu'on pourrait
penser, où doit être placé le contenu. C'est le rôle du CSS, comme nous
le verrons ultérieurement ...
Développement Web 112 112