html 5
Description courte
HTML5 : Les Fondamentaux du Web pour Débutants
Bienvenue dans le monde du développement web ! L'HTML (HyperText Markup Language) est le langage universel utilisé pour créer la structure de toutes les pages web. En seulement 5 minutes, vous allez découvrir ce qu'est l'HTML5, à quoi il sert et comment il fonctionne avec les autres langages du web. Préparez-vous à poser la première pierre de votre futur site internet.
01 Qu'est-ce que le HTML5 et à quoi sert-il ?
Imaginez que vous construisez une maison. Le HTML serait les fondations, les murs, le toit et les cloisons intérieures. C'est la structure brute qui donne sa forme et son organisation à la maison. De la même manière, le HTML (HyperText Markup Language) est un langage de balisage qui permet de structurer sémantiquement le contenu d'une page web. Il utilise des "balises" pour définir les différents éléments : un titre, un paragraphe, une image, un lien, etc. Le "5" dans HTML5 indique qu'il s'agit de la cinquième version majeure du langage, qui a apporté des améliorations significatives pour rendre le web plus interactif et structuré.
Le rôle du HTML est donc de donner du sens au contenu. Il ne s'occupe pas de la mise en forme (couleurs, polices, disposition), qui est le travail du CSS (Cascading Style Sheets), ni des interactions complexes, qui sont gérées par le JavaScript. Pour reprendre l'analogie de la maison, le CSS serait la décoration intérieure (peinture, papier peint) et le JavaScript serait l'électricité et la plomberie, rendant la maison véritablement fonctionnelle. Le HTML est donc la base indispensable sur laquelle tout le reste repose.
| Technologie | Rôle (Analogie de la maison) | Exemple concret |
|---|---|---|
| HTML5 | La structure : fondations, murs, pièces. | Définir un titre, un paragraphe, une liste à puces. |
| CSS | Le style : couleurs, taille des fenêtres, décoration. | Mettre le titre en rouge, centrer le texte, ajouter un fond bleu. |
| JavaScript | L'interactivité : interrupteurs, robinets, ouverture des portes. | Afficher une pop-up au clic sur un bouton, valider un formulaire. |
À retenir : HTML5 est le squelette de toute page web. Il utilise des balises pour organiser le contenu, sans se soucier de son apparence visuelle. C'est la base à apprendre avant tout autre langage web.
02 La Structure d'une Page HTML et les Balises Essentielles
Une page HTML est un fichier texte, généralement avec l'extension .html, qui contient une série de balises. Ces balises sont les instructions données au navigateur web (comme Chrome ou Firefox) pour interpréter et afficher le contenu. Une balise s'écrit généralement entre chevrons : <nom_de_la_balise>. La plupart des balises fonctionnent par paires : une balise ouvrante <titre> et une balise fermante </titre> (avec un slash "/"). Le contenu se trouve entre les deux.
Tout document HTML5 commence par une déclaration spécifique <!DOCTYPE html> qui indique au navigateur la version du langage utilisée. Ensuite, la balise racine <html> englobe tout le contenu de la page. À l'intérieur, on trouve deux grandes sections : <head> et <body>. Le <head> contient des informations sur la page (son titre, l'encodage des caractères, les liens vers les fichiers CSS), qui ne sont pas affichées directement sur la page. Le <body>, quant à lui, contient tout le contenu visible par l'utilisateur : titres, paragraphes, images, etc.
Voici un petit tableau des balises de contenu les plus courantes que vous rencontrerez en tant que débutant :
| Balise HTML | Description | Exemple d'utilisation |
|---|---|---|
<h1> à <h6> | Définit les titres (Heading). <h1> est le plus important, <h6> le moins important. | <h1>Titre Principal</h1> |
<p> | Définit un paragraphe (Paragraph). | <p>Ceci est un texte.</p> |
<a> | Crée un lien hypertexte (Anchor). L'attribut href donne la destination. | <a href="https://exemple.com">Cliquez ici</a> |
<img> | Affiche une image (Image). Balise auto-fermante. Les attributs src et alt sont essentiels. | <img src="photo.jpg" alt="Description"> |
<ul> et <li> | Crée une liste non ordonnée (à puces) (Unordered List / List Item). | <ul><li>Item 1</li><li>Item 2</li></ul> |
Point clé : Une page HTML suit un squelette précis : <!DOCTYPE html>, <html>, <head> (pour les infos) et <body> (pour le contenu visible). Les balises s'emboîtent comme des poupées russes, c'est ce qu'on appelle l'imbrication.
Conclusion
En seulement 5 minutes, vous avez découvert les piliers du HTML5. Vous savez maintenant qu'il est le langage de structure du web, qu'il fonctionne en collaboration avec le CSS et le JavaScript, et vous connaissez la structure de base d'une page ainsi que quelques balises essentielles. C'est une première étape fondamentale et passionnante dans votre parcours de développeur web.
- ✅ Le HTML5 est un langage de balisage qui sert à structurer le contenu d'une page web (comme les fondations d'une maison).
- ✅ Une page HTML est constituée de balises (ex:
<p>,<h1>,<img>) qui s'imbriquent les unes dans les autres. - ✅ La structure minimale d'une page comprend la déclaration
<!DOCTYPE html>, les sections<head>(pour les métadonnées) et<body>(pour le contenu visible).