HTML

Introduction à HTML

HTML (HyperText Markup Language) est le langage de base du web. Il permet de structurer le contenu d'une page web, comme les titres, paragraphes, images, liens et tableaux. Tous les sites web utilisent HTML pour afficher du contenu dans le navigateur.

HTML n'est pas un langage de programmation : il sert à décrire la structure et le contenu, et non à créer de la logique. Pour rendre une page interactive, on utilise JavaScript, et pour la styliser, on utilise CSS.

Structure de base d'un document HTML

Chaque page HTML commence par une structure minimale :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>>Ma première page</title>
  </head>
  <body>
    Contenu visible sur la page
  </body>
</html>

Explications :

<!DOCTYPE html> : indique au navigateur que le document utilise HTML5.
<html lang="fr"> : enveloppe tout le contenu de la page, avec la langue définie pour l’accessibilité.
<head></head> : contient des informations invisibles pour l’utilisateur (titre, styles, métadonnées).
<body></body> : contient tout ce qui sera affiché à l’écran.

Balises essentielles

Les balises HTML permettent d’organiser le contenu. Voici les principales :

<h1>...</h1> à <h6>...</h6> : titres, du plus important au moins important.
<p>...</p> : paragraphe.
<strong>...</strong> : texte important (gras).
<em>...</em> : texte mis en emphase (italique).
<br> : saut de ligne.
<hr> : ligne horizontale pour séparer du contenu.

Attributs importants

Les balises peuvent avoir des attributs qui ajoutent des informations :

id : identifiant unique pour cibler un élément avec CSS ou JavaScript.
class : permet de grouper des éléments pour le style.
src : source d’une image ou d’un média.
alt : description d’une image pour l’accessibilité et le référencement.
href : adresse d’un lien.

Liens et images

Pour ajouter un lien vers un site externe :

<a href="https://www.example.com">Visiter Example</a>

Pour afficher une image :

<img src="image.jpg" alt="Description de l'image">

Listes

On peut créer des listes non ordonnées (ul) ou ordonnées (ol) :

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>

<ol>
  <li>Premier</li>
  <li>Deuxième</li>
</ol>

Formulaires

Les formulaires permettent de collecter des informations des utilisateurs. Exemple :

<form action="/submit" method="post">
  <label for="nom">Nom :</label>
  <input type="text" id="nom" name="nom">
  <label for="email">Email :</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Envoyer">
</form>

Types d'input utiles :

text : texte classique
email : email (validation automatique)
password : mot de passe masqué
number : nombres
submit : bouton d'envoi du formulaire

Bonnes pratiques HTML

Respecter l’indentation pour faciliter la lecture.
Utiliser des titres hiérarchiques pour structurer la page.
Vérifier que toutes les balises importantes sont fermées.
Ajouter des alt aux images et des label aux champs de formulaire.
Tester la page dans différents navigateurs et sur mobile.

Avec ces bases, vous pouvez créer votre première page web complète, y ajouter des textes, images, liens, listes et formulaires. Ensuite, vous pourrez passer au CSS (voir cours-css) pour le style et au JavaScript (voir cours-js) pour l’interactivité.