Le HTML : langage de balisage

Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont
l’abréviation de « HyperText Markup Language » ou « langage de balisage
hypertexte » en français.

Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous

permettre de définir les différents contenus d’une page.

Pourquoi est-il si important de définir les différents contenus d’une page ? Pour
répondre à cette question, il va avant tout falloir que vous compreniez ce qu’est un
site internet et ce qu’il se passe lorsque vous essayez d’accéder à un site internet.

Ici, je vais essayer de rester le plus simple possible. Tout d’abord, qu’est-ce qu’un
site internet ? Un site internet est un ensemble de fichiers de code et de medias
(images, videos, etc.) liés entre eux et disponibles à tout moment via le web.

Pour que les différentes ressources constituant un site internet soient toujours
accessibles, on les héberge généralement sur un serveur d’un hébergeur
professionnel comme OVH par exemple.

Un serveur est un ordinateur plus ou moins comme les nôtres et qui stocke les
différentes ressources d’un ou de plusieurs site internet. Les seules différences
entre un serveur et nos ordinateurs est qu’un serveur est généralement beaucoup
plus puissant que nos ordinateurs, qu’il est (normalement) toujours connecté à
Internet et qu’il va posséder quelques logiciels supplémentaires lui permettant
d’exécuter certains codes.

Notez ici qu’on appelle ces ordinateurs des « serveurs » car leur seul et unique rôle
va être de « servir » (au sens de « fournir ») des pages dès que quelqu’un va le leur
demander.

Comment accède-t-on à une page d’un site internet ? Pour répondre à cette
deuxième question, je vais m’aider d’un exemple. Imaginons que l’on souhaite
accéder à la page d’accueil de mon site. Pour cela, on va taper www.pierre-
giraud.com dans la barre de notre navigateur.
Lorsqu’on demande à accéder à une page d’un site internet, nous sommes ce
qu’on appelle des « clients ».

Notre navigateur va contacter le serveur sur lequel est hébergée la page à laquelle
on souhaite accéder et lui demander de renvoyer les différents éléments de la page
: la page sous forme de code HTML et potentiellement les différents médias
intégrés dans la page (ce qu’il se passe est en pratique bien évidemment plus
complexe mais encore une fois je simplifie volontairement ici).

Le navigateur va donc recevoir ces différents éléments et les afficher. Cependant,

comment fait-il pour savoir ce qu’il doit afficher ? Il va bien évidemment utiliser le
code HTML. En effet, le navigateur comprend bien les différentes balises HTML (le
HTML utilise ce qu’on appelle des « balises » pour définir les contenus) et va donc «
comprendre » de quoi est constituée notre page et ce qu’il doit afficher.

Le rôle du HTML est donc crucial puisqu’il va être notre langage privilégié pour
indiquer aux navigateurs ce quoi est constituée chaque page et ce qu’ils doivent
afficher. Grâce au HTML, on va par exemple pourvoir indiquer que tel contenu est
un texte qui n’est qu’un paragraphe, que tel autre contenu est un texte qui est un
titre de niveau 1 dans notre page, que tel autre contenu est une liste, un lien, etc.

En plus de cela, le HTML va également nous permettre d’insérer différents médias

(images, vidéos, etc.) dans nos pages web en indiquant au navigateur » à cette
place-là dans ma page, je veux que s’affiche cette image « . Notez que dans ce cas
précis, pour que le navigateur affiche la bonne image, on va lui fournir l’adresse de
l’image dans le code HTML.
Le CSS : langage de styles
Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont
l’abréviation de « Cascading StyleSheets » ou « feuilles de styles en cascade » en
français.

Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert
à définir les différents éléments d’une page, à leur donner du sens. Le CSS, lui, va
servir à mettre en forme les différents contenus définis par le HTML en leur
appliquant des styles.

Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre
de modifier l’apparence des contenus de la page. On va ainsi par exemple pouvoir
définir la taille, la couleur ou l’alignement de certains contenus HTML et
notamment en l’occurrence de certains textes dans notre page.

Pour styliser le contenu lié à un élément HTML en CSS, nous allons pouvoir le cibler
en nous basant sur l’élément HTML en question ou en utilisant d’autres procédés
que nous verrons plus tard dans ce cours.
A retenir : n’utilisez pas le HTML pour
mettre en forme vos contenus !
Voilà une chose que je vais vous répéter encore et encore au fil de ces premiers
chapitres : vous ne devez jamais utiliser le HTML pour faire le travail du CSS.

En effet, si vous affichez la page en HTML créée ci-dessus dans votre navigateur
sans y ajouter de CSS, vous pouvez remarquer que le contenu qui a été déclaré
comme étant un titre s’affiche en grand et en gras, tandis que la taille du texte de
notre paragraphe est plus petite et la police moins grasse.
Certains débutants en déduisent donc « pour mettre un texte en grand et en gras, il
suffit d’utiliser une balise représentant un titre en HTML ». Sortez-vous cela
immédiatement de la tête !

Le HTML est un langage qui a été créé pour structurer des pages et pour donner
du sens au contenu. Le principe même du HTML est d’indiquer aux navigateurs que
tel contenu est un texte qui doit être considéré comme un titre tandis que tel autre
contenu est un texte qui doit être considéré comme un simple paragraphe et etc.

Si votre navigateur affiche par défaut les contenus textuels que vous avez déclaré
comme des titres en HTML en grand et en gras et à l’inverse les paragraphes en
plus petit c’est justement parce que chaque navigateur possède sa propre feuille de
styles (c’est-à-dire son propre code CSS) qui sera utilisé si aucun code CSS n’a été
précisé de notre côté.

Je répète ici car cela me semble très important : chaque navigateur a une feuille de
style dans laquelle sont définis des styles pour chaque contenu HTML qui seront
appliqués par défaut si aucun autre code CSS n’est fourni. Cela permet d’apporter
une mise en forme minimale au contenu dans les cas rares où les styles CSS ne
seraient pas définis ou si notre code CSS ne peut pas être chargé.

En fournissant nos styles CSS pour les différents contenus de notre page, nous
allons donc pouvoir définir l’apparence de ceux-ci puisque les styles que nous
allons fournir vont être considérés comme prioritaires par rapport à ceux du
navigateur.
N’essayez pas forcément de comprendre comment fonctionne le code ci-dessus, ce
n’est pas le but ici. La seule chose que vous devez comprendre est qu’on applique
ici des styles CSS à notre premier contenu HTML placé entre les
balises <h2> et </h2> (qui servent à définir un titre de niveau 2) mais pas au
deuxième.

Pour notre premier titre de niveau 2, on indique qu’on veut une taille de texte de
16px et une couleur de texte orange et c’est donc ce que va afficher le navigateur.
Comme on n’indique aucun style pour le deuxième titre de niveau 2, le navigateur
va charger ses styles par défaut.

Note : Chaque version de chaque navigateur possède sa propre feuille de style, et

c’est la raison pour laquelle une même page peut être rendue différemment d’un
navigateur à un autre ou même d’une version d’un navigateur à une autre version
de ce même navigateur ! Cependant, aujourd’hui, un véritable effort
d’harmonisation a été fait et la plupart des navigateurs utilisent plus ou moins les
mêmes styles par défaut.

En bref, retenez que vous ne devez jamais utiliser le HTML pour modifier
l’apparence d’un contenu car cela est le rôle du CSS. Si vous faussez le tout en
déclarant par exemple des titres qui n’en sont pas, vous pervertissez le rôle du
HTML et cela va impacter fortement la qualité de votre page web, sa validité et
votre référencement global.