Les balises

HTML vs CSS

HTML (HyperText Markup Language) est un langage descriptif utilisé pour organiser le contenu d'une page (ses textes, ses images, ses liens, etc.). CSS (Cascading Style Sheet) est un langage qui va permettre de définir la forme à donner à notre document.

Un document de type HTML est composé de balises (tag en anglais) qui indiquent au navigateur comment afficher le document. <p> est un exemple de balise qui définit le début d'un paragraphe. 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, tandis que d'autres sont utilisées pour représenter un text en italique ou en gras, ou bien pour dessiner un tableau, par exemple.

Le navigateur (Google Chrome, Firefox, Windows Explorer) 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.

Syntaxe des balises

<h1>Ce text sera imprimé comme un titre</h1>

Les balises ouvrantes 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>
<img src="monImage.png" alt="mon image">

Les balises fermantes, de leur côté, respectent la syntaxe suivante:

Un chevron ouvrant, suivi par une barre oblique (</)
Le nom de la balise
Un chevron fermant (>)

Exemple: </p>, </h3>, </img>

Toutes les 140 balises

Structure d'une page HTML

La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément <title> ).

<html>

Cet élément définit la racine du document. Chaque document HTML ne contient qu'une racine. Tous les autres éléments doivent être placés dans cet élément.

<head>

Cet élément définit la tête du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives.

<body>

Cet élément définit le corps du document. Il n'y a qu'un seul élément body dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.

<title>

Cet élément définit le titre d'un document. Le titre est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).

<meta>

L’élément meta sert lui à transmettre des meta informations sur la page au navigateur. Le type d’informations transmis va dépendre de l’attribut que l’on va préciser.

Ici, ce qui nous intéresse va être de préciser le type d’encodage utilisé dans nos pages. Cela va permettre aux navigateurs d’afficher correctement nos différents textes avec les accents, les cédilles, etc.

Pour faire cela, nous allons utiliser l’attribut charset pour « characters set » c’est-à-dire « ensemble de caractères » de l’élément meta et lui fournir la valeur utf-8.

La valeur utf-8 est la valeur de référence pour tous les alphabets latins. Cela va permettre à chacun de nos caractères de s’afficher correctement dans le navigateur.

Voici le document HTML le plus simple qu'on puisse écrire :

<!DOCTYPE html>

<html>

<head>

<title>Un document HTML </title>

</head>

<body>

</body>

</html>

Imbrication des balises et des éléments

Des éléments HTML sont souvent placés entre les balises ouvrantes et fermantes d’autres éléments (par exemple, les éléments title et meta ont été placés à l’intérieur de l’élément head).

On appelle cela l’imbrication.

Cependant, comme toujours, on ne peut pas imbriquer des éléments HTML n’importe comment et il faut suivre des règles précises.

Nous n’avons absolument pas le droit de « croiser » les balises des éléments ou, pour le dire plus clairement : le premier élément déclaré doit toujours être le dernier refermé, tandis que le dernier ouvert doit toujours être le premier fermé.

Par exemple, vous voyez que notre premier élément déclaré est l’élément html, qui contient les éléments head et body. L’élément html devra donc être le dernier élément refermé.