Les balises sémantiques
Les balises sémantiques sont des éléments HTML spécifiques utilisés pour structurer le contenu d'une page web de manière significative et compréhensible par les moteurs de recherche et les technologies d'assistance. Elles permettent de donner des informations contextuelles sur le contenu et la signification des différentes parties de la page. Voici quelques exemples de balises sémantiques couramment utilisées :
Voici une liste des balises sémantiques les plus couramment utilisées en HTML :
1.
`<header>` : En-tête de la page ou d'une section.
2.
`<nav>` : Navigation principale du site.
3.
`<main>` : Contenu principal de la page.
4.
`<article>` : Contenu indépendant et significatif, comme un article de
blog.
5.
`<section>` : Section générique dans le document.
6.
`<aside>` : Contenu accessoire ou complémentaire au contenu principal.
7.
`<footer>` : Pied de page de la page ou d'une section.
8. etc.
Ces balises aident les moteurs de recherche à comprendre la structure et le contexte de votre contenu, ce qui peut améliorer le référencement de votre site. Elles facilitent également l'accessibilité pour les personnes utilisant des technologies d'assistance en fournissant des informations claires sur la structure de la page.
Il est important de noter que l'utilisation de balises sémantiques ne garantit pas automatiquement un meilleur référencement ou une meilleure accessibilité, mais elles contribuent à créer une structure logique et cohérente pour votre contenu, ce qui est bénéfique pour les utilisateurs et les moteurs de recherche.
Les balises semantique se divisent en
plusieurs categories qui sont: les balises de premier niveau, les balises
Sectionnantes, les balise d’entête, les balises de Structuration de texte,
les balises de listes, les balises Formulaire, les balises génériques, les
balises tableau.
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.
|
Balises |
Rôles |
|
|
Balise principale |
|
|
En-tête de la page |
|
|
Corps de la page |
2. Balise d'entête
Ces balises sont situées dans
l'en-tête de la page web, entre la balise <head> </head>
|
Balises |
Rôles |
|
|
Liaison
avec une feuille de style |
|
|
Métadonnées
de la page web (charset, mots-clés, etc.) |
|
|
Code
JavaScript |
|
|
Code
CSS |
|
|
Titre
de la page |
3. Balises Sectionnantes
Ces balises sont utilisées pour construire le squelette de d’un site web.
|
Balises |
Rôles |
|
|
En-tête |
|
|
Liens principaux de navigation |
|
|
Pied de page |
|
|
Section de page |
|
|
Article (contenu autonome) |
|
|
Informations complémentaires |
4. Balise de Structuration de texte
|
Balises |
Rôles |
|
<abbr>….</abbr> |
Abréviation |
|
<blockquote>…..</blockquote> |
Citation (longue) |
|
<cite>……..</cite> |
Citation du titre d'une œuvre ou d'un
évènement |
|
<q>……</q> |
Citation (courte) |
|
<sup>…..</sup> |
Exposant |
|
<sub>……</sub> |
Indice |
|
<strong> |
Mise en valeur forte |
|
<em>….</em> |
Mise en valeur normale |
|
<mark>….</mark> |
Mise en valeur visuelle |
|
<h1>……</h1> |
Titre de niveau 1 |
|
<h2>……</h2> |
Titre de niveau 2 |
|
<h3>…..</h3> |
Titre de niveau 3 |
|
<h4>…..</h4> |
Titre de niveau 4 |
|
<h5>……</h5> |
Titre de niveau 5 |
|
<h6>…..</h6> |
Titre de niveau 6 |
|
<img /> |
Image |
|
<figure>….</figure> |
Figure (image, code, etc.) |
|
<figcaption>…..<figcaption> |
Description de la figure |
|
<audio>…..</audio> |
Son |
|
<video>…..</video> |
Vidéo |
|
<source> …</source> |
Format source pour les balises <audio>
et <video> |
|
<a>…….</a> |
Lien hypertexte |
|
<br /> |
Retour à la ligne |
|
<p>…..</p> |
Paragraphe |
|
<hr /> |
Ligne de séparation horizontale |
|
<address>……</address> |
Adresse de contact |
|
<del>…..</del> |
Texte supprimé |
|
<ins>…..</ins> |
Texte inséré |
|
<dfn>….</dfn> |
Définition |
|
<kbd>…..</kbd> |
Saisie clavier |
|
<pre>….</pre> |
Affichage formaté (pour les codes sources) |
|
<progress>….</progress> |
Barre de progression |
|
<time>…..</time> |
Date ou heure |
5. Balise de listes
Elles
permettent de regrouper des éléments apparentés sous forme de listes, qu'elles
soient ordonnées, non ordonnées ou de définitions.
Les balises de listes sont couramment utilisées pour divers types de contenus, tels que les menus de navigation, les listes de produits, les instructions étape par étape, les glossaires, les listes de références, etc. Elles offrent une structure logique et visuelle pour améliorer la lisibilité et l'accessibilité des informations présentées sur une page web.
|
Balises |
Rôles |
|
|
Liste
à puces, non numérotée |
|
|
Liste
numérotée |
|
|
Élément
de la liste à puces |
|
|
Liste
de definitions |
|
|
Terme
à définir |
|
|
Définition
du terme |
|
Balises |
Rôles |
|
<form>…..</form> |
Formulaire |
|
<fieldset>….</fieldset> |
Groupe de champs |
|
<legend>….</legend> |
Titre d'un groupe de champs |
|
<label>….</label> |
Libellé d'un champ |
|
<input /> |
Champ de formulaire (texte, mot de passe, case à cocher, bouton,
etc.) |
|
<textarea>…..</textarea> |
Zone de saisie
multiligne |
|
<select>….</select> |
Liste déroulante |
|
<option>….</option> |
Élément d'une liste
déroulante |
|
<optgroup>….</optgroup> |
Groupe d'éléments d'une liste déroulante |
7. Les balises de table
Les balises de tableau en HTML permettent de créer des tableaux structurés pour afficher des données tabulaires sur une page web. Elles jouent un rôle important dans l'organisation, la présentation et la manipulation des données sous forme de lignes et de colonnes.
|
Balises |
Rôles |
|
|
Tableau |
|
|
Titre
du tableau |
|
|
Ligne
de tableau |
|
|
Cellule
d'en-tête |
|
|
Cellule |
|
|
Section
de l'en-tête du tableau |
|
|
Section
du corps du tableau |
|
|
Section
du pied du tableau |
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.
|
Balises |
Rôles |
|
|
Balise générique de
type inline |
|
|
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 :
style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligé 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.
Commentaire
En HTML, vous pouvez insérer des commentaires pour ajouter des notes ou des explications dans votre code. Les commentaires ne seront pas affichés sur la page web et ne seront visibles que dans le code source. Pour ajouter un commentaire en HTML, vous pouvez utiliser la balise spéciale `<!-- -->`. Tout ce qui se trouve entre ces balises sera considéré comme un commentaire et sera ignoré lors de l'affichage de la page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<!-- Ceci est un commentaire en HTML -->
<p>Ceci est le paragraphe qui va afficher sur le navigateur.</p>
<!-- <p>Ceci est un autre paragraphe qui est commenté.</p> -->
</body>
</html
>
Dans cet exemple, la ligne `<!-- Ceci est un commentaire en HTML -->` est un commentaire et ne sera pas affichée sur la page. Le paragraphe suivant `<p> Ceci est le paragraphe qui va afficher sur le navigateur. </p>` sera affiché normalement. La ligne commentée `<!-- <p>Ceci est un autre paragraphe qui est commenté.</p> -->` sera également ignorée et ne sera pas affichée.
Les commentaires en HTML sont utiles pour documenter votre code, ajouter des notes pour vous-même ou pour d'autres développeurs, ou pour désactiver temporairement des parties de code sans les supprimer complètement. Ils peuvent également être utilisés pour tester différentes versions de code sans avoir à le supprimer et le réécrire à chaque fois.
Quelques exemples avec les balises de structuration de texte
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<section>
<p>
En <mark> HTML </mark>, vous pouvez insérer des commentaires pour ajouter des notes ou des explications dans votre code. Les commentaires ne seront pas affichés sur la page web et ne seront visibles que dans le code source. Pour ajouter un commentaire en <mark style="background: red; color: #fff;"> HTML </mark>
</p>
</section>
</body>
</html>
N.B: Si vous avez besoin de changer l'arrière plan par défaut de la balise <mark>, il faut lui attribuer l'attribut style="propriété à appliquer"
Background:
Le rôle de la propriété CSS "background" en HTML est de spécifier et de contrôler l'apparence du fond d'un élément HTML. Cette propriété permet de définir à la fois la couleur de fond et l'image de fond d'un élément, ainsi que d'autres paramètres associés tels que la répétition de l'image, la position, le redimensionnement, etc.
Color:
La propriété "color" est utilisée pour spécifier la couleur du texte à l'intérieur d'un élément HTML. Elle permet de définir visuellement la couleur du texte qui sera affiché à l'écran.
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
Exemple 2:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page index</title>
</head>
<body>
<section>
<p>
<pre>
Paragraphe 1, l'utilisation de la balise pre pour préformater le text.
Formatage
De du text.
</pre>
</p>
<p>
<div>
Paragraphe 2, l'utilisation de la balise div pour voir la différence.
Texte non
formaté.
</div>
</p>
</section>
</body>
</html>
Exemple 4
Les liens hypertexte : création de liens internes et externes
Les liens hypertexte : Les liens hypertexte sont utilisés pour créer des liens entre différentes pages web, que ce soit à l'intérieur du même site (liens internes) ou vers des sites externes (liens externes). Voici comment créer ces deux types de liens :
1. Liens internes : -Pour créer un lien interne, vous devez spécifier l'URL relative de la page cible par rapport à la page actuelle. Par exemple, si vous souhaitez créer un lien vers une page nommée "contact.html" se trouvant dans le même répertoire que la page actuelle, vous pouvez utiliser la balise `` (ancre) avec l'attribut `href` : Contact
Exemple:
- Créer la page contact.html dans le répertoire vous avez déjà créé.
.png)
Voici la page de contact
Créer un sous-répertoire "Autre page" à l'intérieur du répertoire parent.
Créer une page "autrePage.html" dans le sous répertoire "Autre page"
Faire un clic droit sur le sous répertoire, appuyez sur "new file" pour créer le fichier "autrePage.html"
.png)
Lorsque vous êtes dans le répertoire racine (le répertoire parent) vous voulez accéder à un autre fichier dans un autre répertoire, vous devez préciser le nom du sous répertoire /nom du fichier.html. Exemple:
<a href="Autre page/autrePage.html">Autre page</a>
Quand vous êtes dans un fichier d'un sous répertoire pour retourner ver le répertoire parent vous pouvez le faire comme cet exemple:
<a href="../contact.html">Contact</a>
- Il est également possible de spécifier une URL relative pour un lien externe. Par exemple, pour un lien vers une page se trouvant dans un sous-répertoire du site actuel : Page dans le sous-répertoire
Lorsque les utilisateurs cliquent sur ces liens, ils sont redirigés vers la page cible, qu'elle soit interne ou externe.
Exemple
Ouvrir un lien dans un nouvel onglet
L’attribut target="_blank" permet d’ouvrir un lien dans une nouvelle fenêtre/onglet en fonction du navigateur
<a href="index.html" target="_blank" >
Un lien vers une adresse mail
<a href="mailto:lucknerexcellent7.com"> permet de créer un lien qui ouvrira automatiquement le client mail de la personne.
<a href="mailto:lukitotech.com"> Message </a>
<a href="tel:47373038"> : permet de définir un numéro de téléphone à appeler ou à écrire des messages.
<a href="tel:47373038"> Contacter</a>
L'intégration d'images et d'autres médias
Pour intégrer des images et d'autres médias tels que des vidéos ou des fichiers audio dans une page web, vous pouvez utiliser les balises HTML appropriées. Voici les balises les plus couramment utilisées pour l'intégration de médias :
Pour insérer une image, une vidée, un audio,.. il faut savoir leur extension. les extensions d'une image peuvent être (.png, .jif,jfif, .jpg, .jpeg,...). Lorsque vous voulez insérer une image vérifier son extension.
Pour les vidéos l'extention est ".mp4", ".mp3" pour les audios.
1.
Image (`<img>`):
- Utilisez la balise `<img>` pour
intégrer une image dans votre page web. Spécifiez l'attribut `src` avec l'URL
de l'image que vous souhaitez afficher.
- Exemple 1 :
Ajouter l'image dans le répertoire parent
Width: "width" est utilisée pour spécifier la largeur d'un élément HTML. Elle permet de définir la taille horizontale d'un élément, que ce soit une image, une zone de texte, une table, une division (div), etc.
Height: "height" est utilisée pour spécifier la hauteur d'un élément HTML. Elle permet de définir la taille verticale d'un élément, comme une image, une zone de texte, une table, une division (div), etc.
2.
Vidéo (`<video>`):
- Utilisez la balise `<video>` pour
intégrer une vidéo dans votre page web. Vous pouvez spécifier différents
formats de vidéo en utilisant les balises `<source>` à l'intérieur de la
balise `<video>`.
- Exemple :
<video controls>
<source
src="chemin/vers/video.mp4" type="video/mp4">
<source
src="chemin/vers/video.webm" type="video/webm">
Votre navigateur ne prend pas en charge
la lecture de vidéos.
</video>
3.
Audio (`<audio>`):
- Utilisez la balise `<audio>` pour
intégrer un fichier audio dans votre page web. Comme pour la balise vidéo, vous
pouvez spécifier différents formats audio en utilisant les balises
`<source>`.
- Exemple :
<audio controls>
<source
src="chemin/vers/audio.mp3" type="audio/mp3">
<source
src="chemin/vers/audio.ogg" type="audio/ogg">
Votre navigateur ne prend pas en charge
la lecture audio.
4.
Autres médias :
- Pour intégrer d'autres médias tels que des fichiers Flash, des fichiers PDF ou des iframes provenant d'autres sites, vous pouvez utiliser les balises `<object>`, `<embed>` ou `<iframe>` respectivement. Chaque type de média a des attributs spécifiques à spécifier.
N'oubliez pas de remplacer les valeurs "chemin/vers/..." par les chemins d'accès réels vers vos fichiers médias. De plus, il est recommandé d'inclure l'attribut `alt` pour les images afin de fournir une description alternative pour les lecteurs d'écran et en cas de non-affichage de l'image.
N.B: Veillez
à respecter les droits d'auteur et à utiliser des médias pertinents et
appropriés pour votre site web.
Devoir:
Créer une page nommer "index.html" , une page nommer "images.hmtl", une page "video.html" et une page "audio.html".
Créer un menu de navigation pour poouvoir relier ces différentes pages. Identifier chaque page à travers un titre, dans la page image, insérer 5 images, dans lan page vidéo insérer 5 vidéos et dans la page audio , mettre un audio.
Votre commentaire svp...