Les éléments HTML

Titres

Les titres se déclinent sur six niveaux de profondeur de h1 à h6.

<h1>Titre principal</h1>
<h2>Titre secondaire</h2>
...

Paragraphes

Les paragraphes sont définis par la balise p.

<p>Ceci est un paragraphe...</p>

Mise en forme

Le texte peut être mis en gras avec la balise strong et en italique avec la balise em.

<strong>Texte en gras</strong> <em>Texte en italique</em>

Listes

Les listes non ordonnées utilisent la balise ul avec des éléments li, et les listes ordonnées la balise ol.

<ul>
  <li>Élément de liste</li>
  <li>Autre élément</li>
</ul>

<ol>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
</ol>

Images

Les images sont insérées avec la balise img, qui est auto-fermante. Elle utilise plusieurs attributs essentiels.

<img src="img/image.jpg" alt="Description de l'image" width="300" height="200" />

• src : chemin ou URL de l'image
• alt : texte alternatif (accessibilité et SEO)
• width / height : dimensions en pixels

Liens

L'élément <a>

Un lien hypertexte est créé avec la balise <a>. L'attribut href définit la destination du lien.

<a href="https://monsite.com">Visiter mon site.</a>

Types de liens

Liens absolus

Pointent vers une URL complète (protocole inclus). Utilisés pour les ressources externes.

<a href="https://www.mozilla.org">Mozilla</a>

Liens relatifs

Pointent vers une ressource du même site, en partant de la page courante.

<!-- Même dossier -->
<a href="contact.html">Contact</a>
<!-- Sous-dossier -->
<a href="blog/article.html">Un article</a>
<!-- Dossier parent -->
<a href="../index.html">Retour à l'accueil</a>

Liens d'ancre

Permettent de naviguer vers une section précise de la page via l'attribut id.

<h2 id="section-contact">Contact</h2>

<a href="#section-contact">Aller au contact</a>

Liens mailto et tel

Pour ouvrir le client mail ou composer un appel téléphonique.

<a href="mailto:[email protected]">Nous écrire</a> <a href="tel:+33600000000">Nous appeler</a>

Attributs courants

Attribut	Rôle
href	URL de destination (obligatoire)
target	Contexte d'ouverture (_blank pour un nouvel onglet)
title	Info-bulle au survol
download	Force le téléchargement du fichier cible

<!-- Ouvrir dans un nouvel onglet (+ sécurité) -->
<a href="https://example.com" target="_blank"> Ouvrir dans un nouvel onglet </a>

<!-- Télécharger un fichier -->
<a href="/files/rapport.pdf" download>Télécharger le rapport</a>