Mini-cours pour débutants — Niveau 1
Avant d'utiliser des balises, toute page HTML nécessite ce squelette minimal :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Ma première page</title> </head> <body> <!-- Tout le contenu visible va ici --> </body> </html>
<head> contient les informations invisibles (titre, encodage…), <body> contient tout ce que l'utilisateur voit.
HTML propose 6 niveaux de titres. <h1> est le plus grand et le plus important, <h6> le plus petit.
<h1>Titre principal</h1> <h2>Sous-titre</h2> <h3>Section</h3> <h4>Sous-section</h4>
<h1> par page. C'est important pour le référencement (SEO) et l'accessibilité.La balise <p> définit un bloc de texte. Le navigateur ajoute automatiquement un espace avant et après chaque paragraphe.
<p>Bonjour ! Ceci est mon premier paragraphe.</p> <p>Et voici le deuxième. Chaque <p> est séparé par un espace.</p>
Bonjour ! Ceci est mon premier paragraphe.
Et voici le deuxième. Chaque <p> est séparé par un espace.
Affiche le texte en gras, sans importance sémantique particulière.
<p>Ce mot est <b>en gras</b>.</p>
Ce mot est en gras.
Affiche le texte en italique. Utile pour les titres d'œuvres ou termes étrangers.
<p>Le film <i>Inception</i> est génial.</p>
Le film Inception est génial.
Souligne le texte. À utiliser avec parcimonie car les liens sont aussi soulignés par défaut.
<p>Ce mot est <u>souligné</u>.</p>
Ce mot est souligné.
Visuellement identique à <b>, mais signale que le contenu est important. Préféré pour l'accessibilité.
<p><strong>Attention !</strong> Cette action est irréversible.</p>
Attention ! Cette action est irréversible.
Similaire à <i> mais avec une signification : le texte est mis en emphase.
<p>Je <em>vraiment</em> adore le HTML.</p>
Je vraiment adore le HTML.
<b><i>texte gras et italique</i></b> → texte gras et italique
La balise <a> (anchor) crée des liens cliquables. L'attribut href définit la destination.
Redirige vers une page ou un site. Ajoutez target="_blank" pour ouvrir dans un nouvel onglet.
<a href="https://www.google.com">Aller sur Google</a> <!-- Ouvrir dans un nouvel onglet --> <a href="https://www.google.com" target="_blank">Google (nouvel onglet)</a>
Ouvre le logiciel de messagerie avec l'adresse pré-remplie. On peut aussi pré-remplir le sujet et le corps du message.
<a href="mailto:[email protected]">Envoyer un e-mail</a> <!-- Avec sujet et corps pré-remplis --> <a href="mailto:[email protected]?subject=Bonjour&body=Bonjour..."> Écrire un message </a>
Sur mobile, propose d'appeler directement. Toujours utiliser le format international sans espaces.
<a href="tel:+32471234567">📞 +32 471 23 45 67</a> <!-- Format international (sans espaces) --> <a href="tel:+33123456789">Appeler le 01 23 45 67 89</a>
Fait défiler la page jusqu'à un élément avec l'id correspondant. Utile pour les menus de navigation.
<!-- Le lien (en haut de page) --> <a href="#contact">Aller à la section contact</a> <!-- La cible (plus bas dans la page) --> <h2 id="contact">Nous contacter</h2>
Trace une ligne horizontale entre deux sections. C'est une balise auto-fermante (pas de </hr>).
<p>Première partie</p> <hr> <p>Deuxième partie</p>
Première partie
Deuxième partie
Force un retour à la ligne à l'intérieur d'un paragraphe. Aussi auto-fermante. Idéal pour les adresses.
<p> Jean Dupont<br> 12 rue des Lilas<br> 1000 Bruxelles </p>
Jean Dupont
12 rue des Lilas
1000 Bruxelles
Unordered List — liste à puces. Chaque élément est dans une balise <li>.
<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
Ordered List — liste avec numéros automatiques. Idéal pour des étapes ou un classement.
<ol> <li>Ouvrir l'éditeur</li> <li>Écrire le code HTML</li> <li>Ouvrir dans le navigateur</li> </ol>
La balise <img> est auto-fermante. Deux attributs sont essentiels : src (source) et alt (texte alternatif).
<!-- Image locale --> <img src="images/photo.jpg" alt="Ma photo"> <!-- Image depuis une URL avec taille définie --> <img src="https://exemple.com/img.jpg" alt="Description de l'image" width="300" height="200">
<h1> … <h6>Titres hiérarchiques
<p>Paragraphe
<b> / <strong>Texte en gras
<i> / <em>Texte en italique
<u>Texte souligné
<a href>Lien, e-mail, téléphone
<hr>Ligne de séparation
<br>Saut de ligne
<ul> / <ol>Listes à puces / numérotées
<li>Élément de liste
<img>Image