HTML pour le propriétaire de site : le minimum à comprendre lors de la réception des travaux
HTML est le "squelette" de la page : titres, texte, boutons, formulaires, liens. Sans lui, le navigateur ne sait pas où est le titre principal, le prix du produit ou le formulaire de contact. Vous n'avez pas besoin d'écrire le balisage vous-même, mais comprendre HTML lors de l'acceptation du site par le prestataire permet de repérer les erreurs avant paiement : titres vides pour le SEO, formulaires cassés, "image au lieu de texte" pour Google, absence d'alt sur les photos, H1 dupliqué sur chaque page. Ce n'est pas un cours de programmation - c'est une checklist de bon sens de 30 minutes.
- HTML - structure de page lue par le navigateur et le moteur de recherche
- Pour le propriétaire - accepter le travail en connaissance de cause, ne pas perdre SEO et conversion à cause du balisage
- À vérifier - titres, formulaires, liens, alt des images, version mobile
- Avec CSS et JS - HTML dit "quoi", CSS - "à quoi ça ressemble", JavaScript - "comment ça se comporte"
- Risque principal - bel écran avec un balisage vide ou défectueux en dessous
HTML en langage simple
HTML (HyperText Markup Language) est un langage de balisage, pas de programmation. Il décrit les blocs avec des balises : <h1> - titre principal, <p> - paragraphe, <a> - lien, <form> - formulaire, <img> - image.
Exemple (simplifié) :
<h1>Rénovation d'appartement à Tachkent</h1>
<p>Délai à partir de 14 jours. Mesure gratuite.</p>
<a href="/contacts/">Envoyer une demande</a>
Le navigateur ne montre pas le HTML comme du code - il construit la page selon ces instructions. Google et Yandex s'appuient aussi sur le HTML : <title>, <h1>, texte des liens.
| Technologie | Rôle | Analogie |
|---|---|---|
| HTML | Structure et sens des blocs | Ossature du bâtiment |
| CSS | Couleurs, polices, marges, responsive | Finition et façade |
| JavaScript | Clics, panier, sliders, chat | Ascenseur, climatisation |
| PHP / backend | Données serveur, commandes, e-mail | Installations techniques |
Important : un site WordPress, Tilda, Bitrix ou Django livre quand même du HTML au navigateur. Le CMS le génère automatiquement. À la réception, vérifiez le résultat, pas le code manuel.
Checklist à la réception
1. Titres et balisage SEO
- Un
<h1>par page - Hiérarchie H2, H3 logique
<title>unique, avec mot-clé- Meta description utile, non vide
2. Texte vs "image avec texte"
Tarifs ou promos uniquement en JPG/PNG - le moteur ne lit pas. Audit SEO - signal rouge.
Règle : texte important en HTML.
3. Images : alt
- alt sur chaque photo produit
- Logo - alt avec nom de l'entreprise
4. Liens
tel:et vrais liens messagerie- Pas de 404 internes
- Texte de lien significatif
5. Formulaires
- Champs avec name, id
<button type="submit">- Message de succès clair
- Mobile : types
tel,email
6. Mobile
Texte lisible, menu utilisable, formulaire complet. Impact sur UX et promotion GEO.
7. Langue
lang="fr"sur<html>- UTF-8 correct
Sémantique
| Balise | Rôle |
|---|---|
<header> |
En-tête |
<nav> |
Menu |
<main> |
Contenu principal |
<article> |
Article, actualité |
<section> |
Section logique |
<footer> |
Pied de page |
La sémantique aide Google à trouver le texte principal. Tout en <div> - moins bon pour le SEO.
HTML, CSS, JavaScript - qui fait quoi ?
| Plainte | Cause probable | Interlocuteur |
|---|---|---|
| "Police ou couleur laide" | CSS | Designer |
| "Bouton mort / panier vide" | JavaScript | Frontend |
| "Google ne voit pas le texte" | HTML / SSR | Dev + SEO |
| "E-mail formulaire absent" | Backend (PHP) | Backend |
| "Mobile cassé" | CSS + HTML | Intégration |
Pas de texte dans le balisage - HTML et contenu, pas design.
Erreurs typiques du prestataire
- Même
<title>partout - H1 générique
- Meta vides
- Site constructeur sans accès aux textes - dépendance
- Texte caché SEO - risque de pénalité
- Page entière en iframe PDF - faible pour SEO
Voir le HTML sans programmer
- Afficher le code source
- DevTools (F12) - Elements
- Extensions SEO
- Google Search Console
- Validateur W3C - optionnel
Parcours 30 min : accueil, service, contact, une fiche produit.
Quand exiger des corrections HTML ?
| Situation | Action |
|---|---|
| Pas de title/H1 uniques | Avant signature |
| Tarifs seulement en PNG | Texte en HTML |
| Formulaire "envoyé" sans mail | Backend + HTML |
| Site blanc sans JS | Contenu en HTML (JavaScript) |
| Pas d'alt produits | Avant publicité |
Exiger le résultat business, pas un W3C parfait sur CMS.
Conclusion
HTML est la base invisible jugée par navigateur, recherche et qualité du prestataire. Checklist, pas d'image à la place du texte, accès CMS pour title, H1, alt.
Un mauvais HTML coûte des positions et des leads.
Foire aux questions
Faut-il apprendre HTML en tant que dirigeant ?
Non au quotidien - CMS et checklist suffisent. Oui au niveau de base si vous recevez le site et pilotez le SEO. 2-3 heures évitent une erreur de title sur l'accueil.
Différence HTML / CSS ?
HTML - quoi sur la page. CSS - comment ça paraît. Structure - HTML ; apparence - CSS.
D'où vient le HTML sur mon WordPress ?
Le CMS génère le HTML automatiquement. Vous éditez l'interface. Voir WordPress, Bitrix et OpenCart.
Comment savoir si le HTML est mal fait ?
Même title partout, H1 absent ou multiple, texte seulement en image, formulaires sans labels, liens morts, pas d'alt. Outils : source, extension SEO, audit SEO.
Le HTML influence-t-il SEO et ventes ?
Oui. Title, H1, texte indexable, alt, formulaires stables sur mobile, liens tel:. Un mauvais HTML draine le trafic pendant des mois.