HTML

HTML (HyperText Markup Language) est le langage standard utilisé pour créer les pages web. Il définit la structure et le contenu d’un site à l’aide d’un système de balises simples et hiérarchisées.

Voir les discussions
HTML

Prérequis

Aucun prérequis

Aucun prérequis pour cette catégorie.

Prochaine étape

Javascript image
Javascript

JavaScript (souvent abrégé JS) est le la...

CSS3 image
CSS3

CSS (Cascading Style Sheets) est le lang...

À propos de HTML

HTML (HyperText Markup Language) est le langage de base du web. Il permet de structurer et de présenter le contenu des pages web à l’aide de balises. Chaque page web que vous consultez repose sur du code HTML, qui définit les titres, paragraphes, images, liens, formulaires et autres éléments visibles dans le navigateur.

HTML n’est pas un langage de programmation, mais un langage de balisage : il décrit la structure du document. Il est souvent utilisé avec CSS (pour le style) et JavaScript (pour l’interactivité).

Installation et usage

Aucune installation n’est nécessaire pour utiliser HTML. Il suffit d’un éditeur de texte (comme VS Code, Sublime Text, ou même le Bloc-notes) et d’un navigateur web (comme Chrome, Firefox ou Edge).

Pour créer une page HTML, enregistrez un fichier avec l’extension .html, par exemple index.html.

Exemple de structure de base

 1<!DOCTYPE html>
 2<html lang="fr">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Ma première page HTML</title>
 7</head>
 8<body>
 9    <h1>Bienvenue sur ma page web</h1>
10    <p>Ceci est un paragraphe de texte écrit en HTML.</p>
11</body>
12</html>

Cette structure est la base de toute page HTML. La balise <head> contient les métadonnées et le titre de la page, tandis que la balise <body> contient le contenu visible.

Exemple d’éléments courants

Voici quelques exemples d’éléments HTML fréquemment utilisés :

 1<h2>Titre de section</h2>
 2<p>Un paragraphe simple avec un <strong>texte en gras</strong> et un <em>texte en italique</em>.</p>
 3 
 4<a href="https://www.larafrique.com">Visiter Larafrique</a>
 5 
 6<img src="image.jpg" alt="Description de l’image" width="400">
 7 
 8<ul>
 9    <li>Premier élément de liste</li>
10    <li>Deuxième élément</li>
11    <li>Troisième élément</li>
12</ul>

Formulaires et interactions

Les formulaires permettent de recueillir des données auprès des utilisateurs :

1<form action="/inscription" method="POST">
2    <label for="nom">Nom :</label>
3    <input type="text" id="nom" name="nom" required>
4 
5    <label for="email">Email :</label>
6    <input type="email" id="email" name="email" required>
7 
8    <button type="submit">Envoyer</button>
9</form>

Outils et bonnes pratiques

  • Valider le code : utilisez le validateur du W3C (https://validator.w3.org) pour vérifier la conformité de vos pages.
  • Structurer correctement : respectez la hiérarchie des titres (<h1> à <h6>).
  • Accessibilité : ajoutez des attributs alt aux images et utilisez des balises sémantiques (<header>, <main>, <footer>, etc.) pour améliorer l’accessibilité et le référencement.
  • Compatibilité : testez vos pages sur plusieurs navigateurs et appareils.

HTML est le fondement de tout site web. Simple à apprendre, il reste indispensable pour tout développeur souhaitant créer des interfaces claires, structurées et accessibles sur le web.