Introduction au HTML5 : Tutoriel complet pour débutant

Imaginez que vous construisiez une maison. Vous commencez par les fondations, non ? Avant la peinture, le mobilier ou les décorations, il faut des murs solides. Eh bien, dans le monde du web, le HTML5 joue exactement ce rôle : c’est la structure, le squelette de toutes les pages Internet.

Dans ce premier chapitre de notre tutoriel HTML5 pour débutants, nous allons poser ces fameuses fondations. Vous comprendrez ce qu’est le HTML5, à quoi il sert, comment il fonctionne, et pourquoi il est absolument incontournable pour toute personne souhaitant créer un site web.

Prenez une tasse de café, détendez-vous, et plongeons ensemble dans l’univers passionnant du HTML5. Pas besoin d’être un génie de l’informatique : tout ce qu’il faut, c’est un peu de curiosité et l’envie d’apprendre.

Qu’est-ce que le HTML5 ?

Le HTML, pour HyperText Markup Language, est un langage de balisage. Cela signifie qu’il ne sert pas à “programmer” le comportement d’une page, mais à structurer son contenu.

Si vous regardez le code d’un site web, vous verrez plein de mots entourés de chevrons : <html>, <body>, <p>, <h1>… Ce sont des balises HTML. Elles indiquent au navigateur (comme Chrome, Firefox ou Safari) comment afficher le contenu.

Le “5” dans HTML5 désigne la cinquième version majeure de ce langage. Publiée officiellement en 2014, elle a modernisé le web : ajout de la vidéo sans plugin, balises plus sémantiques, compatibilité mobile, et meilleure intégration du multimédia.

Avant HTML5, intégrer une simple vidéo nécessitait un plugin comme Flash Player (et souvent, cela plantait !). Aujourd’hui, une seule ligne suffit :

<video src="ma_video.mp4" controls></video>

Et voilà, votre vidéo fonctionne sur ordinateur, tablette et smartphone, sans rien installer. Magique, non ?

Pourquoi apprendre le HTML5 aujourd’hui ?

Commençons par une évidence : sans HTML, pas de web. Chaque site que vous consultez – du plus petit blog au géant YouTube – repose sur des fichiers HTML.
Apprendre le HTML5, c’est comme apprendre à lire une carte avant de conduire : vous comprenez ce qui se passe sous le capot d’Internet.

Mais au-delà du côté “technique”, maîtriser le HTML5 ouvre de nombreuses portes :

Créer vos propres sites et pages web, même simples.
Modifier un site existant sans tout casser.
Comprendre le travail des développeurs ou des designers.
Donner vie à vos idées, vos projets, vos passions.

Un jour, un étudiant m’a confié : « J’ai appris le HTML un peu par hasard, pour bricoler une page perso… et c’est devenu mon métier. » Comme quoi, on ne sait jamais où un simple tutoriel pour débutant peut nous mener.

Comment fonctionne le HTML5 ?

Le HTML5 fonctionne à partir de balises qui encadrent le contenu. Ces balises sont souvent ouvertes et fermées. Par exemple :

<p>Bonjour, ceci est un paragraphe.</p>

Ici, <p> ouvre la balise “paragraphe”, et </p> la referme. Entre les deux, se trouve votre texte. Le navigateur ne lit pas le texte comme vous et moi. Il interprète les balises, puis affiche le résultat visuel correspondant.

On distingue plusieurs types de balises :

Les balises de structure (comme <html>, <head>, <body>).
Les balises de contenu (comme <h1> pour les titres ou <p> pour les paragraphes).
Les balises multimédias (<img>, <video>, <audio>).
Les balises de mise en forme ou de sémantique (<strong>, <em>, <section>, <article>…).

Chaque balise a un rôle précis, et ensemble elles construisent l’arborescence du document : le DOM (Document Object Model), c’est-à-dire la structure logique de la page.

La structure d’une page HTML5

Avant d’aller plus loin, regardons à quoi ressemble une page HTML5 complète. C’est le point de départ de tout projet web.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page HTML5</title>
  </head>
  <body>
    <h1>Bienvenue dans mon premier site</h1>
    <p>Ceci est un paragraphe d’exemple.</p>
  </body>
</html>

Décortiquons ensemble :

<!DOCTYPE html> indique que le document utilise la norme HTML5.
<html lang="fr"> précise la langue principale de la page (utile pour le référencement et les lecteurs d’écran).
La partie <head> contient les métadonnées : encodage, titre, description, liens vers des fichiers CSS ou JS.
La partie <body> contient le contenu visible : textes, images, vidéos, etc.

Une bonne analogie : imaginez que le <head> soit la “carte d’identité” de la page, et le <body> son “corps”.

Les balises essentielles pour débuter

Vous n’avez pas besoin de tout connaître d’un coup. Mais certaines balises reviennent tout le temps. En voici quelques-unes que vous croiserez dès vos premiers pas :

<h1> à <h6> : les titres (du plus important au moins important).
<p> : un paragraphe de texte.
<a href="..."> : un lien hypertexte.
<img src="..."> : une image.
<div> : une division, souvent utilisée pour regrouper plusieurs éléments.
<span> : pour styliser une partie de texte sans créer de nouvelle ligne.

Prenons un petit exemple concret :

<h1>Apprendre le HTML5 facilement</h1>
<p>Ce tutoriel pour <strong>débutant</strong> vous explique comment créer votre première page web.</p>
<a href="https://blog.crea-troyes.fr">Visitez le site du Créa-blog</a>

Le résultat affichera un titre, un paragraphe avec un mot en gras, et un lien cliquable. Rien que cela, c’est déjà un mini site !

L’importance de la sémantique en HTML5

Avant HTML5, les développeurs utilisaient principalement des balises génériques comme <div> pour tout organiser. Mais cela rendait le code difficile à comprendre, aussi bien pour les humains que pour les moteurs de recherche.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Avec HTML5, sont apparues des balises dites sémantiques : <header>, <nav>, <main>, <article>, <section>, <footer>, etc.

Elles ne changent pas l’apparence visuelle, mais elles donnent du sens au contenu. C’est la sémantique.

Par exemple :

<header>
  <h1>Mon blog de voyage</h1>
</header>
<main>
  <article>
    <h2>Découverte du Japon</h2>
    <p>Un pays fascinant entre tradition et modernité...</p>
  </article>
</main>
<footer>
  <p>© 2025 - Mon Blog</p>
</footer>

Le code devient plus clair : on comprend la structure au premier coup d’œil. De plus, Google adore cela : les balises sémantiques améliorent le référencement naturel (SEO). Autrement dit, un site bien structuré en HTML5 a plus de chances d’être bien classé dans les résultats de recherche.

Les attributs HTML : des précisions utiles

Les balises peuvent contenir des attributs, c’est-à-dire des informations supplémentaires. Par exemple :

<a href="https://code.crea-troyes.fr" target="_blank">Découvrez nos exercices HTML</a>

Ici :

href indique la destination du lien.
target="_blank" précise qu’il s’ouvre dans un nouvel onglet.

Les attributs permettent de personnaliser le comportement des éléments. Une image, par exemple, utilise l’attribut alt pour décrire son contenu :

<img src="image-chat.jpg" alt="Un chat assis sur un clavier d’ordinateur">

Cette description est essentielle pour les personnes malvoyantes, mais aussi pour le SEO. Oui, même un chat peut aider votre référencement !

Un peu d’histoire pour briller en société

Petite anecdote : le HTML a été inventé au début des années 90 par Tim Berners-Lee, un chercheur au CERN.

Son but ? Permettre aux scientifiques de partager facilement des documents. La première page web, publiée en 1991, expliquait… comment créer une page web ! Depuis, le web a évolué, mais le principe reste le même : du contenu structuré avec des balises.

Et saviez-vous que le code HTML de cette première page tient sur moins de 200 lignes ? Cela montre qu’il n’est pas nécessaire d’être un expert pour comprendre le fonctionnement du web.

HTML5 et les autres langages du web

Le HTML5 n’est qu’une partie du trio magique du développement web.
À ses côtés, on trouve :

CSS (Cascading Style Sheets), qui s’occupe de l’apparence : couleurs, polices, mise en page.
JavaScript, qui gère l’interactivité : animations, formulaires dynamiques, menus déroulants, etc.

On pourrait dire que :

Le HTML est le squelette.
Le CSS est les vêtements.
Le JavaScript est la personnalité.

En combinant les trois, on obtient des sites modernes, beaux et interactifs. Mais attention, il faut commencer par le début. C’est pourquoi ce tutoriel HTML5 pour débutants est la première étape indispensable avant d’aborder les autres technologies.

Créez votre premier fichier HTML dès maintenant

Rien de mieux que la pratique pour comprendre. Ouvrez un simple éditeur de texte comme Notepad (Windows), TextEdit (Mac) ou un outil moderne comme VS Code.

Copiez le code suivant :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon premier site</title>
  </head>
  <body>
    <h1>Bonjour tout le monde !</h1>
    <p>Je découvre le HTML5 grâce à ce tutoriel pour débutant.</p>
  </body>
</html>

Enregistrez-le sous le nom index.html, puis double-cliquez dessus. Et voilà ! Votre tout premier site web s’ouvre dans votre navigateur. Ce moment est souvent magique pour les débutants : vous venez littéralement de créer une page web à partir de rien. C’est un peu comme voir votre première œuvre prendre vie.

Le HTML5, une porte ouverte sur le monde du web

Vous venez de franchir une étape importante : comprendre ce qu’est le HTML5, comment il fonctionne, et pourquoi il est au cœur de tout site Internet. Bien sûr, nous n’avons fait qu’effleurer la surface : chaque balise, chaque attribut, chaque notion cache un monde de possibilités. Mais désormais, vous avez les premières fondations pour continuer.

Apprendre le HTML5, c’est bien plus qu’une compétence technique : c’est une façon de créer, communiquer et partager. Et surtout, c’est accessible à tous.

Avec un peu de curiosité, vous serez bientôt capable de donner forme à vos idées, de créer vos propres projets, et pourquoi pas… de concevoir le prochain site qui changera le monde.

Dans les prochains chapitres, nous irons toujours plus loin.Mais d’ici là, prenez un instant pour savourer cette première victoire : vous êtes officiellement entré dans le monde du développement web.

Tutoriel :