Cours – 12 Septembre 2025

Récapitulatif de la session précédente

Retour sur les notions vues précédemment : accessibilité numérique, structure HTML et importance de la sémantique dans le code.

Référencement – Introduction

Le référencement est un ensemble de techniques permettant d’améliorer la visibilité d’un site sur les moteurs de recherche.

Principe du système d’enchères

Les moteurs de recherche utilisent un système d’enchères basé sur le prix au clic (PPC). Les annonceurs paient lorsqu’un utilisateur clique sur leur lien sponsorisé.

Le SEO (Search Engine Optimization), ou référencement naturel, consiste à aider les moteurs de recherche à interpréter le contenu d’un site et à aider les internautes à le trouver.

💡 Objectif : améliorer la compréhension du contenu par les moteurs de recherche pour augmenter le trafic organique.

Différence entre SEO et SEA

Ces deux approches sont complémentaires mais reposent sur des stratégies distinctes :

Critère SEO (Search Engine Optimization) SEA (Search Engine Advertising)
Type de trafic Organique (gratuit, long terme) Payant (publicités, court terme)
Outils Optimisation du code, contenu, mots-clés Campagnes Google Ads, Microsoft Ads…
Objectif Améliorer la visibilité naturelle Attirer immédiatement du trafic ciblé
⚙️ Un code HTML propre et bien structuré améliore à la fois le référencement et l’accessibilité.

Accessibilité et outils d’assistance

Les outils d’assistance permettent de rendre le web accessible aux personnes en situation de handicap.

“Essentiel pour certains, utile pour tous !”

Reprise du cours : Contenu HTML

Les textes et paragraphes sont placés dans la balise <p>.

Lorem ipsum est un texte factice utilisé pour tester la mise en page sans ajouter de contenu réel.

Balises de mise en forme

<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe avec <strong>du texte important</strong> et <em>un mot en italique</em>.</p>
<p>On peut aussi <mark>surligner</mark> une partie du texte.</p>
💬 Voir les commentaires sur le fichier test dans VS Code pour les exemples de code et de structure.
Télécharger le fichier test

Création de liens – Base du web

La balise <a> permet de créer un lien hypertexte.

<a href="https://www.example.com" target="_blank">Visiter le site</a>
<a href="#section2">Aller à la section 2</a>
🌐 Les liens sont la base du web : ils relient les contenus entre eux et structurent la navigation.

Balises de tableau

Les tableaux se construisent avec les balises suivantes :

<table>
  <tr><td>Nom</td><td>Prénom</td></tr>
  <tr><td>Dupont</td><td>Marie</td></tr>
</table>

On découvre également la fusion de cellules avec les attributs colspan et rowspan.

<td colspan="2">Cellule fusionnée</td>
📘 Voir le fichier test sur VS Code pour les exemples pratiques de fusion de cellules.