Le HTML ou HyperText Markup Language est un langage très populaire et incontournable : c’est lui qui permet de créer les pages web !

Ce n’est pas un langage de programmation à proprement parler, mais plutôt un langage de balisage (ou marquage).

Ce balisage prend tout son sens quand l’HTML est associé à son acolyte : le CSS.

HTML : Un peu d’histoire

Promis, nous n’ouvrons pas le grand livre d’histoire de la programmation, mais nous allons juste présenter, en quelques mots, l’évolution de ce langage.

Le HTML est né dans les années 1990. Plusieurs versions se sont succédées pour arriver à celle qui est utilisée aujourd’hui, la version 5 (depuis 2014).

Le HTML suit les évolutions du web et s’améliore dans le temps.

Parlons rapidement du XHTML, car certains font la confusion. C’est un langage parallèle à l’HTML qui aurait même pu le remplacer. Mais c’est bien l’HTML qui a survécu et qui a même englobé certaines fonctions très pratiques de ce dernier.

C’est le langage utilisé par les développeurs front-end 😉

Comment fonctionne l’HTML

Le HTML est un langage lu côté client. C’est-à-dire que c’est votre navigateur qui lit le fichier et retranscrit le résultat à l’image.

Le texte qui apparaît à l’écran est divisé en balises intégrées dans le code HTML. Le langage structure et donne du sens au contenu du fichier. Les balises se suivent ou s’imbriquent et affichent leur contenu. Toutefois ce n’est pas lui qui gère la mise en page. C’est le rôle du CSS.

Le navigateur lit les balises et les affiche à la suite.

Les balises à utiliser sont prédéfinies et il existe différentes règles à respecter. Elles s’apprennent facilement.

Une balise se note entre les <>. Par exemple le titre de la page s’écrit ainsi <title>.

La majorité des balises s’ouvrent et se ferment. Après l’indication du titre, il faut mettre </title>.

Certaines balises sont dites auto-fermantes : elles ne contiennent pas de texte. Comme la balise indiquant la présence d’une image qui s’écrit : 

<img src="monImage.jpg" alt="description de l’image">

La balise a un nom et il est possible de lui donner différents attributs.

Dans l’exemple précédent, l’attribut src indique l’url de l’image, alt définit un texte de remplacement quand l’image ne peut être affichée.

Pour connaître toutes les balises, il suffit de les apprendre et de les positionner.

Au final, en lisant le fichier HTML, le navigateur sait ce qui est :

  • un paragraphe, p,
  • un titre plus ou moins important, h1, h2…,
  • une image, img,
  • les div : ces blocs si importants pour assembler de jolies pages web
  • et d’autres éléments (mais pas tant que ça, au bout du compte).

Son lien avec le CSS

Mettre en forme une page web uniquement avec de l’HTML est très (très) fastidieux (et pas très joli : êtes-vous assez vieux pour vous rappeler des sites des années 90 ?)

Le CSS permet de déterminer la forme, la couleur et la taille de chaque balise, entre autres.

💡 L’HTML permet donc d’écrire le contenu d’une page web et le CSS définit sa mise en forme.

Souvent vous entendrez parler d’HTML5/CSS3. 

Comment créer un fichier HTML

Il suffit d’un éditeur de texte pour créer un fichier HTML, puis de sauvegarder son fichier avec l’extension .html.

Ensuite il faut établir le squelette d’une page HTML. C’est une structure standard.

Tout fichier démarre par <!DOCTYPE html> qui donne l’indication du type de code au navigateur. À l’intérieur de la balise html qui suit, s’intègrent les balises :

  • head qui permet d’englober les réglages de la page, d’appeler le fichier css, les métadonnées,
  • body qui englobe le contenu de la page html.

Une fois le fichier enregistré, n’importe quel navigateur saura l’ouvrir. Seulement parce qu’il est nommé avec l’extension html (ou htm, du temps ou les extensions de fichiers étaient limitées à 3 caractères).

Vous savez comment créer votre premier fichier HTML, et donc votre première page web 😙

Voici un petit exercice pour vous entraîner !  Il ne reste plus qu’à travailler ce langage (et d’autres souvent) pour créer un site complet ! Car ce n’est que le début d’un long chemin.

Vidéo issue du tutoriel Apprendre les bases du HTML, CSS, Javascript et PHP en moins de 3 semaines !

Vous aussi, formez-vous au métier de Développeur !

Tuto.com vous propose des parcours de formation entièrement dédiés au métier de Développeur avec notamment plusieurs spécialités :

Chacun d’eux regroupe des centaines d’heures de formation 100% à distance pour une évolution à votre rythme, le tout aux côtés d’un mentor.

Vous avez des questions à ce sujet ? N’hésitez pas à contacter notre équipe support !

(4604)