Présentation du langage HTML (Cours)

Introduction

Qu’est-ce que le langage HTML ?

Le sigle HTML correspond à « HyperText Markup Language » que l’on peut traduire en français par « Langage HyperTextuel à balises ». Il s’agit d’un langage informatique permettant de définir le contenu et la structure d’une page Web. De nombreuses technologies peuvent être utilisées pour définir les éléments d’une page Web, mais la base la plus minimaliste d’une page est construite en HTML.

Le langage HTML est un langage de description sujet à interprétation. Le principe du langage est de décrire la structure et le contenu d’une page. Il va permettre de définir les différentes zones d’affichages (en-tête, corps de la page, pied de page, menu, …) et d’intégrer son contenu (texte, image, tableau, vidéo, …).

Cette description est lue par un navigateur (Firefox, Chrome, Edge, …) qui va interpréter le code afin de l’afficher. Cela implique qu’une même page peut donc s’afficher différemment en fonction du navigateur utilisé. Avant l’arrivée des règles d’interprétation de la version 5 du langage HTML, le code non-valide n’était pas interprété de la même manière par les navigateurs. Les navigateurs, plutôt permissifs, traitaient le code même s’il n’était pas valide. Ce qui donnait parfois des résultats surprenants. Les navigateurs modernes posent aujourd’hui beaucoup moins de problèmes en utilisant des règles d’interprétation standards pour le code non-valide.

Pourquoi connaître le langage HTML ?

On peut naturellement se poser la question de l’intérêt pour un étudiant de connaître le langage HTML. Normalement, les langages informatiques sont réservés aux informaticiens !?! La particularité du langage HTML est que la plupart des internautes ont déjà créé du code HTML sans même le savoir. Lorsque vous rédigez un email ou un commentaire sur un site web, dès lors que vous ajoutez des paramètres de mise en forme comme du gras ou de la couleur, cela signifie que vous produisez du HTML et éventuellement un autre langage, le CSS.

Si vous avez déjà produit du HTML sans le savoir, il peut donc paraître encore plus inutile de connaître ce langage… En effet, il est possible de générer du code HTML sans connaître le langage. Cependant, il s’avère que l’on va très vite se retrouver limité par les fonctionnalités de l’éditeur utilisé, voir même complètement bloqué par des problèmes de code impossibles à corriger.

Dès lors que vous envisagez de rédiger du contenu publié sur le Web, il est très fortement recommandé de connaître le langage HTML. Il ne s’agit pas dans ce cas-là de connaître par cœur tous les éléments du langage. Mais simplement d’en comprendre les principes afin d’être capable de « plonger les mains dans le code » si nécessaire.

Par ailleurs, si cela peut faire peur au premier abord, vous allez voir que les principes du langage sont très simples à appréhender.

Quel logiciel utiliser ?

Lorsque l’on s’apprête à coder une page web, trois types de logiciels s’offrent à nous : un éditeur WYSIWYG, un éditeur de texte brut ou un IDE.

L’éditeur WYSIWYG pour « What You See Is What You Get » est un logiciel spécifiquement conçu pour éviter à l’utilisateur de connaître le langage. Le principe est d’avoir une interface graphique permettant de créer des pages un peu à la manière d’un logiciel de traitement de texte. L’utilisateur peut concevoir visuellement une page web, le code HTML correspondant est généré automatiquement. Le logiciel de ce type le plus connu est Dreamweaver développé par Adobe, mais il existe d’autres solutions comme SeaMonkey, Amaya ou encore Kompozer. Ce type de logiciel est déconseillé pour deux raisons :

1. Le code généré n’est pas toujours très qualitatif ;
2. L’impression de coder sans connaître le langage est un leurre, car il va falloir très rapidement accéder au code pour y apporter des corrections.

Un éditeur de texte « brut » est probablement la meilleure solution pour débuter à apprendre le langage HTML. Il ne s’agit pas d’un logiciel de traitement de texte comme Word ou LibreOffice, mais plutôt d’un logiciel à l’image du bloc-notes de Windows. C’est-à-dire un logiciel permettant de saisir du texte sans mise en forme. Vous aurez l’embarras du choix pour ce type de logiciel quel que soit votre système d’exploitation, nous pouvons citer par exemple Notepad++ (Windows), BBedit (Mac) ou Brackets (Windows et Mac). Si vous pouvez tout à fait utiliser le Bloc-notes de Windows, un logiciel un peu plus adapté vous permettra de bénéficier de fonctionnalités vous facilitant le codage, comme la coloration automatique du code ou l’autocomplétion (le logiciel vous propose de compléter le texte lorsque vous saisissez du code).

Un IDE pour « Integrated Development Environment » est un ensemble de logiciels permettant de répondre aux besoins spécifiques des programmeurs. Autour de l’éditeur de texte destiné à la programmation, de nombreuses fonctionnalités complémentaires vont se greffer, comme la gestion de l’historique des modifications des fichiers ou encore un client FTP permettant de placer les fichiers directement sur un serveur. Si la construction d’une page Web reste la même avec ce type de logiciel, l’environnement peut toutefois rebuter les codeurs débutants d’autant que ces logiciels ne sont pas développés spécifiquement pour coder du HTML, mais vont souvent prendre en compte des langages plus complexes comme par exemple le PHP. C’est la raison pour laquelle un éditeur de texte simple est préconisé. Si vous souhaitez néanmoins essayer ce type de logiciel, vous pourrez en trouver un grand nombre gratuitement, les plus connus étant Eclipse ou Netbeans.

La notion de code source

Dès lors que l’on commence à parler de pages web, la notion de « code source » apparaît très rapidement, mais de quoi s’agit-il ?

Quand vous affichez une page web dans votre navigateur, vous ne voyez pas le code HTML qui la compose mais plutôt l’interprétation qui en est faite par votre navigateur. Le code source d’une page HTML est donc le code qui la constitue est qui va permettre au navigateur d’en faire une interprétation visuelle.

Sur la plupart des navigateurs, vous pouvez visualiser le code source des pages que vous affichez. La manipulation va dépendre du navigateur utilisé. Par exemple sur Firefox, faites un clic droit sur une page Web et choisissez « Code source de la page ». Votre navigateur va alors afficher le code HTML de la page sans l’interpréter.

Lorsque vous allez créer une page HTML avec un éditeur de texte de base (et non un logiciel de traitement de texte), vous allez donc travailler directement sur le code source de vos pages.

Un langage standardisé

Le World Wide Web Consortium, que l’on évoque généralement via son abréviation W3C, est un organisme de standardisation. Cet organisme à but non lucratif a été fondé en 1994 par Tim Berners-Lee qui est le principal inventeur du World Wide Web. Sa mission est de promouvoir la compatibilité des technologies du World Wide Web telles que le langage HTML. Son rôle est donc de rédiger des préconisations de fonctionnement pour les langages utilisés sur Internet afin que ceux-ci fonctionnent de façon identique pour tout le monde.

Concernant le HTML, il s’agit de faire en sorte que la totalité des navigateurs (Firefox, Chrome, Edge…) interprète correctement le langage HTML afin d’afficher les pages web de manière identique. Le leitmotiv du W3C est « Un seul web partout et pour tous ».

Un langage à balises ?

Qu’est-ce qu’une balise ?

Une balise ou « tag » en anglais est une commande interprétable par votre navigateur. En HTML, les commandes en question sont encadrées par le signe < (inférieur à) et > (supérieur à). Voici un exemple de balise HTML :

<p>Hello world !</p>

Dans cet exemple, vous trouvez une balise dite « ouvrante » <p> et une balise « fermante » </p>. Les balises fermantes sont identiques aux balises ouvrantes, mais contiennent un slash / en plus immédiatement après le signe <. Ces deux types de balises encadrent le contenu sur lequel elles s’appliquent.

Les balises ouvrantes indiquent le début d’application d’une commande et les balises fermantes indiquent la fin d’application de la commande. La balise <p></p> permet de créer un paragraphe dans une page web. Le code précédent pourrait ainsi être lu par un humain :

<début_du_paragraphe>Hello World !</fin_du_paragraphe>

Balises orphelines ou autofermantes

La plupart des éléments HTML sont écrits avec des couples de balises ouvrantes et fermantes. Mais certaines balises ne nécessitent pas de balise de fermeture, on les appelle les balises autofermantes ou orphelines.

C’est le cas de la balise <br> qui permet d’ajouter un saut de ligne à l’intérieur d’un paragraphe. Vous pouvez voir dans l’exemple ci-dessous que cette balise n’a pas d’équivalent en balise de fermeture.

<p>Première ligne<br>Deuxième ligne</p>

Exemple de code

Nous avons vu pour le moment deux exemples de balises <p></p> et <br>. Nous pouvons donc déjà commencer à écrire du code HTML.

<p>Bonjour,<br>
Voici un exemple de code HTML qui utilise des paragraphes et des
sauts de ligne.</p>
<p>Comme vous pouvez le voir, je peux insérer
des sauts de lignes dans le code HTML. Tant que je n’utilise
pas
la
balise br,
ces sauts de ligne ne se verront pas...</p>

Résultat dans un navigateur :

Les balises de titre

Les balises <p></p> permettent d’insérer un paragraphe standard. Il existe en parallèle d’autres balises de paragraphes qui ont un statut particulier, puisque les paragraphes concernés seront alors considérés comme des titres. Il s’agit des balises <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> et <h6></h6>. Le h de la commande correspond à « heading » en anglais et le numéro qui suit correspond au niveau hiérarchique du titre.

Si vous utilisez des balises de titre dans une page HTML, vous verrez que le navigateur va les distinguer visuellement en jouant sur la graisse, la taille des caractères et les espacements.

<h1>Titre de la page</h1>
<p>Un paragraphe de contenu qui contient du texte pour le contenu 
du paragraphe de contenu.</p>

<h2>Titre de niveau 2</h2>
<p>Un second paragraphe de contenu qui contient encore du texte pour 
le second paragraphe de contenu.</p>

<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Résultat dans un navigateur :

Les balises d’emphase

« Emphasis » en latin, comme en anglais, signifie accent ou insistance. La traduction littérale française emphase pose un petit problème car il y a une notion d’exagération. Dans le cadre de ce cours, nous utiliserons malgré tout ce terme sans tenir compte de cet aspect péjoratif.

Il existe donc deux balises permettant de mettre l’emphase sur une chaîne de caractères. Elles permettent d’identifier les mots importants pour les faire ressortir visuellement comme vous pouvez le faire avec un traitement de texte, mais elle apporte surtout, comme les titres, une valeur sémantique au contenu en question. Nous reviendrons plus en détail sur la sémantique dans le chapitre suivant.

Les deux balises sont <strong></strong> et <em></em> qui permettent respectivement d’appliquer une emphase forte et modérée. Par défaut, les navigateurs vont distinguer visuellement ces balises lors de l’affichage en appliquant au contenu du gras pour la première balise (strong) et de l’italique pour la deuxième (em). Mais attention, ces balises ne sont pas des balises de gras ou d’italique mais bien des balises d’emphase. Il existe effectivement des balises sans valeur sémantique pour mettre du gras <b></b> et de l’italique <i></i>, mais elles ne doivent plus être utilisées aujourd’hui si vous tenez à respecter les bonnes pratiques qui préconisent l’utilisation d’un autre langage : le langage CSS pour la mise en forme d’une page Web.

<p>Du texte avec <strong>une emphase importante</strong><br>
Et du texte avec <em>une emphase modérée</em>.</p>

Résultat dans un navigateur :

La valeur sémantique des balises

Nous avons évoqué précédemment le fait que certaines balises ont une valeur sémantique. Il est temps d’expliquer un peu plus en détail le principe.

Lorsque vous consultez une page Web, dans une langue étrangère que vous ne connaissez pas, même si vous ne comprenez pas du tout le contenu de la page, vous êtes capable de distinguer le statut des différents textes.

Dans la page Web ci-contre tiré du site d’un journal suédois, vous êtes capable d’identifier visuellement le titre de l’article, son chapeau, des mots clés mis en valeur dans le texte, la légende de l’image, etc.

Vous êtes d’ailleurs capable de distinguer bien d’autres choses comme des dates, des numéros de téléphone, des adresses postales, etc.

Si un humain peut faire cette distinction, ce n’est pas forcément le cas des robots utilisés par les moteurs de recherche. La sémantique HTML est donc là pour pallier à ce problème.

Un moteur de recherche n’a pas besoin de savoir si un texte est en gras, en couleurs ou avec un corps de texte plus ou moins important, il ne se base pas sur la mise en forme. Pour permettre aux moteurs de recherche de mieux identifier les éléments importants de contenu afin d’avoir une indexation plus performante des pages, il leur faut un balisage sémantique.

Si par exemple vous utilisez la balise <h1></h1>, le moteur de recherche saura qu’il s’agit d’un titre. De la même manière si vous utilisez la balise <strong></strong>, il saura que cela concerne des mots-clé importants. A contrario, si vous effectuez la mise en forme d’un paragraphe <p></p> avec du gras, de la couleur et une taille de caractère plus importante pour l’afficher comme un titre, cela fonctionnera pour les internautes qui visiteront le site, mais cela ne pourra pas être interprété comme tel par un moteur de recherche, ni par un lecteur d’écran utilisé par des personnes avec des déficiences visuelles. La sémantique HTML est donc essentielle pour un web plus « intelligent ».

Balise bloc versus balise en-ligne

Deux grandes catégories de balises existent avec des caractéristiques propres à chacune : les balises de type bloc (« block » en anglais) ou en-ligne (« in-line » en anglais).

Les balises de type bloc occuperont toujours par défaut la totalité de la largeur de la page (ou plus précisément de leurs conteneurs). C’est le cas de la balise <p></p> ou de l’ensemble des balises de titre comme <h1></h1>. Dans la mesure où ces balises occupent la totalité de la page, cela implique que ce qui suit sera automatiquement renvoyé en dessous lors de l’affichage.

Les balises en ligne ont pour dimension par défaut celle de leur contenu. C’est le cas des balises <strong></strong> et <em></em>. Elles n’impliquent donc pas de retour à la ligne.

Il existe deux balises sans valeur sémantique qui sont très utilisées en HTML <div></div> et <span></span>. <div></div> est une balise de type bloc utilisée principalement pour structurer le contenu de la page en délimitant les différentes zones. <span></span> est l’équivalent de type en-ligne permettant principalement d’appliquer à des chaines de caractères une mise en forme via un langage additionnel, le langage CSS.

Les attributs de balise

Il est possible d’ajouter des options, appelées attributs, aux balises HTML. Pour cela, il suffit de suivre la syntaxe suivante :

<commande attribut="valeur" attribut2="valeur">...</commande> 

Les attributs sont placés dans la balise ouvrante, suivis du signe = et de la valeur entre guillemets. Il est possible de mettre autant d’attributs que vous le souhaitez en les mettant les uns à la suite des autres.

Voici un exemple pour la balise <p></p> où l’attribut align permet de définir l’alignement horizontal. Cet exemple est utilisé uniquement pour sa facilité de compréhension, en effet il s’agit d’une mauvaise pratique. L’alignement d’un paragraphe est une caractéristique de mise en forme et la totalité de la mise en forme doit être gérée via un langage que nous avons déjà évoqué plusieurs fois, le langage CSS.

<p align="right">Paragraphe aligné à droite</p>

<p align="center">Paragraphe aligné au centre</p>

Voici quelques exemples d’attributs qui ressemblent plus à ce que vous pouvez trouver sur Internet pour les sites respectant les bonnes pratiques.

<p class="intro_art" id="intro_first">texte</p>

<p><span class="label">texte</span></p>

Il faut avouer que ces attributs class ou id sont moins évidents à comprendre intuitivement. L’attribut class est équivalent au fait d’appliquer un style sur un paragraphe dans un logiciel de traitement de texte. L’attribut id quant à lui permet de donner un nom unique à un élément HTML.

La structure de base d’une page HTML

Toute page HTML a une structure de base constituée d’un en-tête et d’un corps placés à l’intérieur de la balise <html></html>, sous la forme suivante :

<!DOCTYPE html>
<html>

    <head>

    </head>

    <body>

    </body>

</html>

Le doctype

La déclaration du doctype est la toute première ligne d’une page HTML. Elle se trouve avant la balise ouvrante <html>. Ce n’est pas à proprement parler du HTML, il s’agit uniquement d’une instruction pour votre navigateur afin de lui indiquer quelle version du langage HTML vous utilisez.

La version 5 de HTML a considérablement simplifié la déclaration du doctype sous la forme :

<!DOCTYPE html>

Il est évidemment préconisé d’utiliser cette déclaration de doctype, mais si vous allez fouiller dans le code source des pages que vous fréquentez sur Internet, vous risquez fort de tomber sur des déclarations nettement plus complexes qui précisent les règles respectées par le développeur de la page. Sans rentrer plus dans le détail en voici un exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

L’élément <html>

La balise <html></html> indique à votre navigateur qu’il s’agit d’un document HTML et que vous commencez à coder dans ce langage. Il s’agit de l’élément racine (« root » en anglais) de votre page web qui contiendra la totalité du code HTML de votre page.

C’est donc dans cette balise que vous allez placer les principaux éléments hiérarchiques de votre page : <head></head> et <body></body>.

Il est important de noter que vous ne devez avoir qu’une seule et unique balise <html></html> dans votre page, l’ouvrante à la deuxième ligne de votre page sous la déclaration du doctype et la fermante tout à la fin de votre page.

L’attribut lang est très souvent ajouté dans la balise ouvrante <html>, il précise la langue utilisée pour le contenu de la page. C’est une question de référencement par les moteurs de recherche et d’accessibilité pour permettre aux outils de synthèse vocale d’employer le bon accent.

<html lang="fr">

L’élément <head>

Comme son nom l’indique la balise <head></head> correspond à l’en-tête d’une page HTML. Il va principalement contenir des métadonnées sur la page ou des liens vers d’autres fichiers comme des fichiers CSS ou JavaScript. La plupart des informations inscrites dans l’en-tête ne sont pas visibles directement par l’internaute.

La balise <title></title>

La balise <title></title> est un élément incontournable qui se place dans l’en-tête. Elle permet de définir le titre de la page. Ce titre ne va pas s’afficher dans le corps de votre page, il sera visible dans l’onglet de votre navigateur, dans vos favoris lorsque vous enregistrez une page et sera également utilisé pour le référencement de votre page web.

<!DOCTYPE html>
<html>
    <head>
        <title>Mon titre</title>
    </head>
    <body>

    </body>
</html>

La balise <meta>

La balise <meta> est une balise autofermante et permet de saisir des métadonnées sur la page.

Une métadonnée (mot composé du préfixe grec meta, indiquant l’auto-référence ; le mot signifie donc proprement « donnée de/à propos de donnée ») est une donnée servant à définir ou décrire une autre donnée quel que soit son support (papier ou électronique)

(Source : Métadonnée. (2017, juillet 2). Wikipédia, l’encyclopédie libre. Page consultée le 10 juillet 2017 à l’adresse http://fr.wikipedia.org)

Les métadonnées sont utilisées par les navigateurs pour l’affichage de la page et par les moteurs de recherches pour le référencement. Nous n’allons pas faire la liste exhaustive des usages de la balise <meta>, nous nous contenterons de présenter les deux principaux :

• Charset

<meta charset="UTF-8">

Cette commande permet d’indiquer au navigateur l’encodage des caractères utilisé lors de la création d’une page web. L’encodage indiqué doit correspondre à celui utilisé par le logiciel pour créer la page web. La plupart des logiciels actuels utilisent par défaut l’encodage . Si vous ne précisez par le bon encodage, vous pouvez avoir des résultats assez surprenants lorsque vous insérez des caractères accentués comme dans l’exemple ci-dessous :

• Description

<meta name="description" content="Une initiation au langage HTML...">

Cette balise permet de décrire le contenu d’une page web. Si cette balise est définie, elle sera utilisée pour le texte affiché en dessous des liens dans les résultats des moteurs de recherche. En son absence, le texte en dessous du lien sera construit en fonction des mots clés de la recherche identifiés dans le contenu de la page.

Lorsque l’on recherche « Lyon 2 » sur un moteur de recherche comme Google, on peut constater qu’il n’y a pas de description. Le texte en dessous du lien est défini en fonction des mots clés trouvés dans la page.

Si l’on effectue le même test avec « Lyon 1 », on peut alors constater qu’une description est présente en dessous du lien.

La balise <style></style>

La balise <style></style> permet d’intégrer du code CSS afin de définir la mise en forme d’une page web. Le principe des styles en CSS est très proche des styles sur un logiciel de traitement de texte.

<style type="text/css">
    body { 
        font-family : Arial ; 
    }
    h1 { 
        color : red ; 
    }
</style>

La balise <link></link>

La balise <link></link> est la méthode préconisée dans la plupart des cas pour l’ajout de styles CSS. Elle permet de lier un fichier distinct de la page HTML ce qui permet de réutiliser le même fichier CSS sur plusieurs pages.

<link rel="stylesheet" href="mafeuilledestyles.css">

L’élément <body>

La balise <body></body> correspond au corps de la page HTML. Elle contient la totalité du contenu de la page comme le texte, les images, les tableaux, etc.

Lorsque la structure de page de la page HTML a été créée, toutes les modifications HTML se trouveront donc entre <body> et </body>.

Les éléments <html>, <head> et <body> sont-ils obligatoires ?

D’après les spécifications de la version 5 d’HTML, il est théoriquement possible d’omettre ces trois éléments structurants. Cependant, il s’agit d’une mauvaise pratique, qui n’est pas sans poser problème pour certains navigateurs.

Vous devez donc toujours veiller à avoir la structure de base lors de la création d’une page HTML.

Voici donc la structure de base minimale que vous devriez avoir pour toutes vos pages :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mon titre</title>
    </head>
    <body>

    </body>	
</html>

Règles de codage

Dans la pratique vous pourrez constater que la transgression des règles de codage que nous allons évoquer ne posera pas forcément de problèmes à votre navigateur qui est souvent très permissif. A contrario, un simple oubli de > ou de ", peut empêcher réellement votre contenu de s’afficher.

Prenez garde, même si votre page s’affiche telle que vous le souhaitez, un code « propre » et respectueux des règles est essentiel lors de la création de pages web pour les codeurs débutant comme pour les développeurs chevronnés. C’est la garantie d’une meilleure lisibilité du code, ce qui en facilite grandement la compréhension et ainsi le « débogage » (le fait de corriger les erreurs d’un programme).

Règle n°1 : Imbrication des balises

La première balise ouverte doit être la dernière balise fermée.

<p>Hello <strong>World</p></strong> <!-- INCORRECT -->

<p>Hello <strong>World</strong></p> <!-- CORRECT -->

Dans l’exemple précédent, la balise <p> a été ouverte, puis c’est le tour de la balise <strong>. <strong> se trouve ainsi dans <p></p> et doit donc être refermée avant </p>.

Sémantiquement les balises HTML ne peuvent pas toutes s’imbriquer les unes dans les autres. Les imbrications suivantes n’ont en effet aucun sens :

<p><p>Un paragraphe contenu dans un autre paragraphe</p></p> <!-- INCORRECT -->
<h1><p>Un paragraphe contenu dans un paragraphe de titre</p></h1> <!-- INCORRECT -->

Règle n°2 : Casse des balises

Les noms des balises et des attributs doivent être écrits en minuscules.

<P ID="txtPerso">Texte</P> <!-- INCORRECT -->

<p id="txtPerso">Texte</p> <!-- CORRECT -->

Règle n°3 : Guillemets obligatoires

Toutes les valeurs des attributs doivent être entre guillemets doubles ou simples.

<p id=txtPerso>Texte</p> <!-- INCORRECT -->


<p id="txtPerso">Texte</p> <!-- CORRECT -->

<p id=’txtPerso’>Texte</p> <!-- CORRECT -->

Règle n°4 : Valeur pour attributs

Les attributs doivent toujours avoir une valeur associée. Il existe cependant certains attributs HTML qui échappent à cette règle et peuvent se passer d’une valeur. C’est le cas par exemple de l’attribut checked qui permet de cocher une case par défaut dans un formulaire.

<input type="radio" class checked> <!-- INCORRECT -->

<input type="radio" class="form-demo" checked="checked"> <!-- CORRECT -->
<input type="radio"  class="form-demo" checked> <!-- CORRECT -->

Conseils et bonnes pratiques

Pensez à aérer votre code

N’hésitez surtout pas à aérer votre code ! Un code aéré sera beaucoup plus lisible qu’un code compact. Il est tout à fait possible de rédiger une page sur une seule ligne mais cela complique grandement sa lecture pour le développeur.

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Mon titre</title></head><body><p>Il est possible, de faire <strong>une page complète</strong> sur une seule ligne...<br>Mais c'est nettement plus difficile à lire !</p></body></html>

Lorsque vous rédigez votre code HTML, vous pouvez aérer votre code en ajoutant des retours chariot (touche entrée du clavier). Vous gagnerez en lisibilité et les retours chariot ne seront pas pris en compte lors de l’affichage.

C’est le cas également des espaces consécutifs. Si vous ajoutez 10 espaces consécutifs dans votre texte, un seul sera visible lors de l’affichage de la page dans le navigateur.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mon titre</title>
    </head>
    <body>
        <p>
            Il est possible, de faire <strong>une page complète</strong>
            sur une seule ligne...<br>
            Mais c'est nettement plus difficile à lire !
        </p>
    </body>
</html>

Indentation des balises

Toujours dans un souci de lisibilité, il est très fortement recommandé d’indenter son code. L’indentation consiste à décaler le code à chaque fois que vous imbriquez une balise de type bloc dans une autre, comme vous avez pu le voir dans les exemples précédents.

L’indentation améliore la lisibilité et permet de mieux voir l’imbrication et la hiérarchisation des éléments HTML d’une page. Pour décaler votre code, il suffit d’insérer une tabulation en début de ligne.

<body>
<div>
<h1>...</h1>
<p>...</p>
<p>...</p>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</body>

<body>
    <div>
        <h1>...</h1>
        <p>...</p>
        <p>...</p>
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</body>

Saisie des balises fermantes

Écrivez toujours la balise fermante immédiatement après avoir écrit l’ouvrante.

Lorsque, par exemple, vous souhaitez utiliser la balise <strong></strong>. Saisissez d’un seul coup l’ouvrante et la fermante, vous revenez ensuite entre les balises pour saisir le texte que vous souhaitez mettre en valeur. Vous aurez peut-être l’impression de perdre du temps lors de la saisie, mais c’est la meilleure méthode pour ne pas oublier les balises fermantes et ne pas vous emmêler les pinceaux dans l’imbrication des balises.

Préparez votre </body>

Comme cela a déjà été dit, la totalité du contenu de votre page doit se trouver dans la section <body></body>, afin d’éviter les erreurs de débutant, nous vous conseillons donc d’ajouter une série de retours chariot entre la balise ouvrante <body> et la balise fermante </body> afin de faire descendre la balise de fermeture plus bas dans votre fenêtre de travail et pour éviter par la suite de coder en dehors de cet élément. Vous aurez donc en bas de page </body></html>.

Les commentaires

Tous les langages informatiques permettent de commenter le code, le HTML ne fait pas exception en la matière. Il est donc possible d’ajouter des commentaires dans votre code afin d’en faciliter la relecture sans que ces commentaires ne soient visibles directement dans votre navigateur.

Pour insérer un commentaire il suffit de saisir <!-- au début du commentaire et --> à la fin du commentaire.

<!-- Un commentaire HTML -->

En HTML, les commentaires ne sont pas complètement invisibles n’importe quel internaute qui affichera le code source de la page pourra les voir.

Ainsi se termine cette introduction au langage HTML, vous pouvez maintenant aller un peu plus loin et consulter les articles suivants :

• Les listes en HTML
• Les liens hypertextes en HTML
• Les images en HTML

Sauf mention contraire*, l'article Présentation du langage HTML (Cours) et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.