Les balises HTML

Dans le langage HTML, les balises permettent d’ajouter des éléments concernant la structure de la page : titres, paragraphes, retours à la ligne etc. Chaque balise est caractérisée par un terme situé entre les chevrons “<” & “>”, ex : <html>.

Il est également important de noter que chaque balise ouverte se doit d’être fermée une fois que l’on ne souhaite plus la prendre en compte. Pour ce faire, reprenez la balise de départ et ajoutez-y “/”, ici nous aurons : </html>.

Dans de nombreux cas, les balises comportent des attributs. En effet, certains éléments se doivent d’utiliser des informations supplémentaires afin de définir la façon dont ils fonctionnent. On retrouvera donc ces détails dans l’attribut qui est constitué par des paires nom="valeur". Les attributs sont inclus dans la balise ouvrante de l’élément. Ex : <a href="page2.html">Cliquez ici </a>. Ici le nom de l’attribut est href, il est suivi d’un signe “=”, puis de la valeur de l’attribut entre "...". Ainsi, chaque élément a un ensemble d’attributs qui peuvent compléter la balise.

Il existe par ailleurs des attributs universels qui peuvent être utilisés sur tous les éléments.

On peut également définir des attributs de données, il s’agit d’un attribut dont le nom commence par data- . Il est utilisé pour stocker des informations supplémentaires que l’on ne souhaite pas représenter visuellement. En voici un exemple :

Les balises et leurs attributs sont la clé du langage HTML, certaines balises sont indispensables et il

est important de les garder en tête pour coder en HTML, en voici quelques exemples :

<!DOCTYPE html>

Tout d’abord, la rédaction de votre code HTML commencera toujours par <!DOCTYPE html>, en

effet, elle permet d’indiquer à l’ordinateur que l’on va coder en HTML.

<html> </html>

Nous pouvons désormais coder en HTML. Pour se faire, la première balise sera alors la suivante :

<html>. Notez alors que vous devrez fermer la balise suivante : </html>.

<head> </head>

Cette balise permet d’inclure des informations générales (métadonnées) sur le document, on y

retrouvera le titre ainsi que des liens ou des définitions vers des scripts et feuilles de style. Ces

données ne seront pas affichées sur la page mais servent à ce que l’affichage du texte se fasse

correctement.

<body> </body>

Contrairement à la balise <head>, la balise <body> permet d’ajouter les éléments qui seront

réellement affichés sur la page, il n’y a qu’un élément <body> par page HTML.

<title> </title>

Toujours utilisé au sein de l’élément <head>, il s’agit du titre du document, il sera alors affiché dans

la barre de titre du navigateur ou dans l’onglet de la page.

<h1> <h2><h3> <h4> <h5> <h6> </h1> ... </h6>

Il existe 6 niveaux de titres, le plus important en matière de SEO est le <h1> et le moins important

est le <h6>. Le <h1> sera alors le titre qui sera pris en compte en priorité par l'algorithme Google par

rapport aux autres <hn>. La taille des différents titres est également décroissante du <h1> au <h6>,

par conséquent, un titre placé dans la balise <h1> sera plus grand qu’un titre placé dans la balise

<h6>.

<p> </p>

Permet d’introduire un paragraphe de texte. Il s’agit d’un élément bloc, c’est-à-dire que chaque paragraphe est séparé par un saut de ligne avant et après l’élément.

<br>

Permet de créer un saut de ligne dans le texte.

<strong> </strong>

Permet de mettre du texte en gras.

em> </em>

Permet de mettre du texte en italique.

<ul> </ul>

Permet de créer une liste à puce. On y ajoute la balise <li> pour insérer une puce.

<ol> </ol>

Permet de créer une liste numérotée. Comme pour la balise précédente, on ajoute la balise <li> pour insérer les numéros devant chaque élément.

<figure> </figure>

Permet d’insérer des images ou des vidéos. Prenons l’exemple des images : pour insérer une image, ouvrez une balise <img> entre les balises <figure></figure>, ajoutez-y l’éléments src=”...” qui comportera le lien de votre image. Ex :

<a> </a>

Pour insérer un lien hypertexte, nous utiliserons la balise <a>. Dans cet exemple, nous allons

également utiliser un attribut : l’attribut href nous permettra d’insérer le chemin de la page à

accéder ainsi que le texte qui sera cliquable. Veillez alors à recopier le nom de la page dans l’attribut

href comme le nom du fichier HTML appelé tout en précisant l’extension .html.

Exemple : <a href="page2.html"> Cliquez ici pour afficher une autre page </a>

Rechercher dans ce blog

Mon premier site HTML

Les balises HTML

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Le HTML c'est quoi ?

Le CSS un langage complémentaire à ne pas négliger