Skip to main content

Hypertext Markup Language (HTML) / Langage de balisage hypertexte (HTML)

TL;DR

HTML (Hypertext markup Language) est un langage utilisé pour créer des pages web. Certaines pages peuvent être écrites directement en HTML, tandis que d'autres peuvent utiliser des constructeurs de pages ou d'autres outils afin de créer des pages web qui produisent également des sorties HTML, qui à leur tour peuvent être lues par les navigateurs.

Que signifie HTML ?

HTML signifie Hypertext Markup Language et c'est le langage utilisé pour créer des pages web. Il utilise des balises pour définir et styliser les éléments. Par exemple, il peut définir les polices, les couleurs, la position, les liens, etc. Même si la plupart des créateurs de sites web n'écrivent pas directement en HTML, les résultats finaux qui sont lus et interprétés par les navigateurs web sont au format HTML. C'est pourquoi, en cliquant avec le bouton droit de la souris sur une page web et en appuyant sur "view page source", la première ligne de texte dans la fenêtre résultante doit être <!doctype html>.

Quelle est la structure d'une page HTML ?

Bien que les structures puissent varier, certains des éléments que vous devriez trouver dans tout HTML sont les suivants (avec des explications en italique). Vérifiez cela sur n'importe quelle page web en cliquant avec le bouton droit de la souris n'importe où sur celle-ci et en cliquant sur "view page source" :

<!DOCTYPE html> - ceci indique au navigateur web qu'il s'agit d'un fichier HTML qu'il peut lire

<html lang="en"> - indique la langue dans laquelle la page web est écrite

<head> - ceci marque le début de la section de tête, où les codes généraux sont placés

<title>Titre de la page</title> - il s'agit d'une méta-tague indiquant le titre de la page, qui s'affiche dans l'onglet du navigateur

<meta name="description" content="..." /> - ceci est utilisé pour décrire le sujet de la page, pour les moteurs de recherche

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - il s'agit d'une commande indiquant comment la page web doit être affichée sur différentes tailles d'écran

<meta name="robots" content="index,follow" /> - ceci indique aux robots qui parcourent la page qu'ils peuvent l'indexer et l'ajouter aux résultats des moteurs de recherche

<link rel="stylesheet" type="text/css" href="/css/style/style.css"> - ceci relie le HTML à un fichier CSS, où un style plus détaillé pour le texte est placé

<script src="/js/random.js" type="text/javascript"></script> - cela permet de se connecter à un fichier Javascript, utilisé pour exécuter une action sur la page web

<link rel="canonical" href="https://yourpage.com"/> - si des pages ont un contenu similaire ou si la page peut être trouvée à plusieurs URL, cela indique aux crawlers quelle URL doit être prise en compte à des fins d'autorité

</head> - ceci ferme la section de tête

<body> - ceci ouvre la section body, où le contenu de la page est placé

<div class="container"> - cela ouvre une section appelée container, qui définit généralement le cadre d'un certain contenu

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="Visitor Analytics logo" height="52" width="180"></a> - c'est une façon de placer une image de logo qui renvoie à votre page d'accueil

<div class="first-text">Ce sont les premiers mots qui s'affichent effectivement sur votre site web</div> - du texte qui peut être stylisé dans le fichier CSS connecté

...

</corps>