Comme nous l’avons vu dans l’article sur l’éclairage technique consacré au Web, le HTML est un langage de balisage (ou de marquage) utilisé comme « squelette » pour structurer une page Web. L’acronyme signifie HyperText Markup Language, soit Langage de Balisage Hypertexte.

Les rôles du HTML

Structuration de la page Web

Notion de Heading structure de page HTMLSi l’on peut placer du contenu dans une page Web sans aucune structuration, la pratique n’est pas recommandée. Ça reviendrait à écrire en français, sans aucune règle grammaticale.

D’autant que le balisage d’une page sert à identifier des régions de la page, pour placer un style particulier à un endroit précis ou un effet (comme par exemple un « afficher-masquer »).

Ce qu’il faut retenir dans la structuration d’une page, c’est son importance sur le référencement de votre site Web. Nous y reviendrons dans un article consacré 😉

Contenu multimédia

Contenu multimédia HTMLLe HTML permet de placer du contenu multimédia. Non seulement des images ou du contenu vidéo notamment stockés sur votre hébergement Web, mais aussi depuis des sites Web externes.
Si la pratique peut être mal vu, il est tout-à-fait courant que des sites proposent du partage (forme de publicité en fait). C’est le cas notamment de You Tube.
Dans cet exemple, You Tube propose un peu plus qu’un contenu vidéo hébergé sur un de ses serveurs, c’est en réalité d’un cadre d’une page appelé Iframe. En effet, il est possible d’attacher à une page Web un morceau d’une autre page Web externe et distante.

L’hypertexte

Notion de lien hypertexteC’est surtout sa fonction de création de lien (le fameux terme « hypertexte ») qui est la véritable raison d’être de cette grammaire du Web. La toile ne pourrait pas être ce qu’elle est sans l’hypertexte (là encore, je vous invite à relire le précèdent article).

Ainsi, un contenu texte peut contenir une valeur cachée, à savoir l’adresse d’une page (et/ou d’une ancre – position précise dans une page) : je suis un contenu hypertexte à la différence de « je ne suis pas un contenu hypertexte ».

On reconnaît ces liens par un changement du pointeur de la souris (la fameuse petite main ^^’).

L’hypertexte est évidemment applicable sur d’autres types de contenu que le texte, comme les images.

 

Passons maintenant à la démonstration pratique !

Apprentissage rapide des bases du HTML

Le HTML s’apprend très rapidement grâce à sa grande simplicité, et certaines subtilités viendront se compléter à votre expérience au fur et à mesure.

Il faut tout d’abord comprendre ce qu’est une balise.

<html>

Une balise est toujours encadrée des chevrons < et >. Les balises sont généralement composées d’une balise ouvrante et d’une balise fermante (un genre de « contre-balise »). Ainsi, on peut identifier clairement une zone de la page.

<html>
</html>

Le HTML se divise en deux grandes parties :

  1. « Head », destiné essentiellement aux robots qui visitent votre site Web,
  2. « Body », destiné aux internautes (et aussi aux robots ^^’)

 

<html>

<head>

</head>

<body>

</body>

</html>

En copiant le code ci-dessus dans un simple éditeur de texte (en texte brut), puis en enregistrant le document sous un titre de votre choix (tel que « mapage ») et sous l’extension « .html », vous obtiendrez une page HTML – ici mapage.html – créée ex nihilo. Il suffit de l’ouvrir avec votre navigateur Web préféré pour contempler une splendide… page blanche 🙂

Exemple HTML 1
Logique puisqu’il n’y a aucun contenu, ni aucun style ! Pourtant, la page est « prête » et correctement formatée (même s’il manque quelques balises importantes).

Les balises HEAD

La partie HEAD n’est pas directement visibles par les visiteurs « humaines » de votre site. Seuls le titre et l’icône du site sont visibles dans l’onglet du navigateur Web.

Cette partie sert à mieux indexer la page et, depuis quelques temps, à proposer un cadre formaté pour les réseaux sociaux en cas de partage.

C’est dans cette partie qu’on trouve enfin l’encodage du texte, le paramètre du style et éventuellement des scripts (j’y reviendrai).

Le code ne reprend qu’une partie du code de la page (par souci de simplification).
<head>

<title>Titre de ma page</title>

<meta name="description" content="Description de la page pour une présentation dans les moteurs de recherche." />

</head>

Les balises BODY

C’est la région visible par l’internaute.

Si je devais résumer très vite, voici 4 types de balises qu’on trouve très souvent dans cette zone :

  1. la balise DIV (sorte de boîte qui peut contenir d’autres boîtes)
  2. la balise P (encadre les paragraphes)
  3. la balise A (le cœur même du HTML : notre fameux lien !)
  4. la balise IMG (qiu sert à placer une image)
<body>

<div>

<p>Voici du contenu texte.</p>

<p>Voici un <a href="#">lien</a>.</p>

<p>Voici un contenu de type image : </p>

<img src="/image/mon-image.jpg" alt="texte alternatif qui décrit l'image" />

</div>

</body>

Résultat du code ci-dessus :

Exemple HTML 2

Le HTML 5

HTML5La dernière version du HTML s’appelle le HTML 5. Cette mouture est davantage tournée vers le Web « universel », c’est-à-dire qui doit fonctionner sur ordinateur et sur les mobiles.

En fait, cette appellation suppose un groupement de systèmes Web, dont le CSS3 et le langage de programmation JavaScript (sous forme de bibliothèque notamment, comme le Jquery).
Car, comme nous allons le voir plus en détail, le style (CSS) et les « effets » (scripts) sont séparés du HTML.

Ce qu’il faut retenir du HTML5, c’est surtout de nouvelles balises désormais jugées comme incontournables :

  • « Main » et « section »
  • « Header » et « Footer » (à ne pas confondre avec « head » et « body », « header » et « footer » sont enfants de « body »)
  • « Nav » (là où l’on place le menu de navigation)

Il y a bien d’autres nouvelles balises avec des fonctions très utiles (langage, multimédia, etc.).