Réaliser une page web : structure, contenu et mise en ligne

Comment réaliser une page web utile à une petite entreprise ? Fixez d’abord son rôle et l’action attendue du visiteur, puis bâtissez une structure lisible, rédigez des intertitres explicites, allégez les images, contrôlez l’affichage mobile, l’accessibilité et les mentions légales, et vérifiez chaque lien avant la mise en ligne.

Une page n’est pas un site en miniature : elle répond à une seule question d’un visiteur précis. La page « Escaliers sur mesure » d’un menuisier doit déclencher une demande de devis, tandis que sa page d’accueil oriente vers les bonnes rubriques.

Comment réaliser une page web à partir de son rôle

Avant d’ouvrir le moindre outil, écrivez en une phrase ce que votre page doit obtenir. Cette phrase sert d’arbitre : un bloc, une photo ou un lien qui ne la sert pas quitte la page. Pour réaliser une page qui produit des demandes, répondez à quatre questions :

• qui arrive, et par quel chemin : une recherche, un lien partagé, une carte de visite ;
• ce que ce visiteur veut savoir en premier, dit avec ses mots plutôt qu’avec ceux du métier ;
• l’action attendue : appeler, remplir un formulaire, réserver, passer à l’atelier ;
• le doute qui freine cette action, et la preuve qui le lève.

Une page, une action principale. Le gabarit découle de ce rôle, tout comme le choix entre un modèle existant et une conception dédiée : les critères qui séparent un site vitrine sur mesure d’un thème du commerce aident à trancher sans rouvrir ce débat ici.

Les étages de la page, de l’en-tête au pied

La structure d’une page courante tient en quelques zones superposées. MDN Web Docs, la documentation de référence des technologies du web, associe à chacune un élément HTML dédié, que les lecteurs d’écran utilisent pour aller directement à la navigation ou au contenu principal.

En-tête et navigation

L’en-tête réunit le nom de l’entreprise, son logo et le menu, limité aux liens principaux. Gardez ce menu court : quelques entrées lisibles valent mieux qu’une liste qui déborde sur deux lignes à l’écran d’un téléphone.

Titre principal et premier écran

Le titre principal dit ce que la page propose, à qui et, pour une activité locale, où. MDN recommande un seul titre de niveau 1 par page, la balise h1. Juste dessous, une phrase d’accroche et le bouton d’action restent visibles sans défilement : ce premier écran est la seule zone que tous vos visiteurs voient.

Les sections du corps

Le contenu principal enchaîne des sections courtes, chacune ouverte par un intertitre, dans l’ordre du raisonnement de votre visiteur : le besoin, la réponse proposée, les preuves (réalisations photographiées, étapes d’une intervention), les questions qui reviennent au téléphone, puis le rappel de l’action.

Le bouton d’action et le pied de page

Votre appel à l’action décrit ce qui se passe au clic, « Demander un devis » plutôt que « Envoyer », et revient en fin de page pour le lecteur qui a tout parcouru. Le pied de page porte les coordonnées, les horaires et les liens vers les mentions légales et la politique de confidentialité.

Rédiger le contenu avant de soigner l’apparence

Le texte passe avant la mise en forme. Le parcours d’initiation de MDN Web Docs conseille de commencer par une esquisse au crayon, puis de réunir textes, images et couleurs avant toute ligne de code. Une maquette remplie de faux texte cache les vrais problèmes : titre trop long, section vide, preuve absente.

Rédigez court et concret, une idée par paragraphe, sans jargon interne. Une page web lisible se comprend par ses seuls intertitres, que MDN Web Docs soumet à trois règles :

• respecter la hiérarchie, sans sauter de niveau ;
• ne jamais choisir un niveau pour obtenir une taille de caractères, réglage qui revient au CSS ;
• se limiter à trois niveaux par page, sauf nécessité.

Les WCAG, règles d’accessibilité publiées par le W3C, ajoutent qu’un titre décrit le sujet ou la fonction du passage qu’il ouvre.

Reste le titre d’onglet, celui de la balise title. Google Search Central indique que Google compose le titre d’un résultat à partir de plusieurs sources, dont cette balise, le titre principal visible et le texte des liens qui pointent vers la page. Sa consigne : un texte distinct par page, descriptif et concis, sans accumulation de mots-clés ni intitulé vague comme « Accueil ».

Préparer les images : format, poids, texte alternatif

Choisir le format et alléger le fichier

Le site web.dev, publié par Google pour les développeurs, résume l’usage de chaque format :

Le poids des images dépend d’abord de leurs dimensions : selon web.dev, doubler la résolution quadruple le nombre de pixels et la taille du fichier. Redimensionnez chaque visuel à sa largeur d’affichage réelle et déclarez sa largeur et sa hauteur, qui réservent sa place avant le chargement et évitent, selon MDN, que le texte saute pendant la lecture. Réservez le chargement différé aux images situées plus bas dans la page.

Le site web.dev situe un bon Largest Contentful Paint, délai d’affichage du plus grand élément visible, à 2,5 secondes au plus, au 75e percentile des chargements, sur mobile comme sur ordinateur. Sur une page de prestation, cet élément est souvent la photo d’en-tête.

Écrire un texte alternatif utile

Le texte alternatif (attribut alt) remplace l’image pour les lecteurs d’écran. MDN Web Docs le veut clair et concis, sans signaler la présence de l’image ni reprendre le nom du fichier ; une image décorative reçoit un texte alternatif vide. « Escalier quart tournant en chêne huilé » informe, « photo escalier 3 » n’apporte rien. Les WCAG classent cette exigence au niveau A.

HTML, CSS et gestionnaire de contenu, en mots simples

MDN Web Docs définit le HTML comme un langage de balisage qui définit la structure du contenu, et le CSS comme le code qui met en forme la page : couleurs, polices, disposition selon la largeur de l’écran. Séparer les deux garde le contenu intact quand l’habillage change.

Le gestionnaire de contenu, installé sur votre serveur ou fourni en ligne par un service, présente des champs à remplir et produit lui-même le HTML à partir de gabarits : vous publiez sans toucher au code. Certaines offres en ligne hébergent même une page sans frais, au prix d’une adresse rattachée à leur domaine et de fonctions limitées ; pour une activité installée, une adresse à votre nom protège la continuité.

Mobile et accessibilité : les contrôles qui comptent

Lire et toucher sur un petit écran

Un affichage sur mobile soigné commence par un réglage de l’en-tête technique qui, selon MDN Web Docs, ajuste la zone d’affichage à la largeur de l’appareil. MDN déconseille aussi de bloquer le zoom, indispensable aux personnes malvoyantes. Les WCAG demandent un contenu lisible sur une largeur équivalente à 320 pixels CSS sans défilement horizontal, et un texte agrandi jusqu’au double de sa taille sans perte de contenu.

Contrastes, textes alternatifs et ordre des titres

En France, la DINUM publie le RGAA, référentiel général d’amélioration de l’accessibilité, dont la version 4.1.2 compte 106 critères de contrôle ; son site accessibilite.numerique.gouv.fr précise qui est soumis à l’obligation légale. Même hors de ce périmètre, vérifiez trois points :

• un contraste d’au moins 4,5 pour 1 entre le texte courant et son fond, de 3 pour 1 pour les grands textes et le contour des boutons (WCAG 2.2, critères 1.4.3 et 1.4.11) ;
• un texte alternatif sur chaque image informative ;
• une suite de titres sans saut de niveau.

Parcourez enfin la page à la seule touche de tabulation : chaque lien et chaque bouton doit recevoir un repère visible.

Les mentions obligatoires d’une page professionnelle

Le site d’une entreprise affiche des mentions légales complètes, en général sur une page reliée au pied de page. La fiche « Mentions obligatoires sur le site internet d’une entreprise » de Service Public Entreprendre, vérifiée le 13 octobre 2026, demande notamment :

• l’identité : nom, prénom et mention « entrepreneur individuel » ou « EI » pour une entreprise individuelle, dénomination, forme juridique et capital pour une société ;
• l’adresse, le courriel, le téléphone et le numéro d’immatriculation, avec le numéro de TVA s’il s’applique ;
• le nom ou la dénomination de l’hébergeur, son adresse et son téléphone ;
• le nom du directeur de la publication et, pour une activité réglementée, l’autorité qui l’a autorisée.

Une page avec formulaire ou mesure d’audience ajoute deux sujets. Le consentement aux cookies, quand il est requis, doit être libre, spécifique, éclairé et univoque, avec un bandeau qui laisse refuser aussi facilement qu’accepter. Le visiteur doit aussi savoir qui traite ses données, dans quel but, combien de temps elles sont conservées et avec quels droits ; la même fiche renvoie aux exemples de mentions d’information de la CNIL. Un manquement à ces obligations expose à une amende.

Une page qui vend ajoute ses conditions générales de vente, sujet traité dans l’arbitrage entre vitrine et boutique en ligne pour un commerce.

Mise en ligne : domaine, hébergement, dernière revue

La mise en ligne repose sur deux briques : un nom de domaine réservé au nom de l’entreprise, dont vous gardez les accès, et un hébergement qui fournit un certificat pour l’adresse en https et des sauvegardes régulières. Leurs frais récurrents sont décomposés dans l’analyse poste par poste du prix d’un site internet. Avant de publier, contrôlez :

• les liens, un par un, et le formulaire, jusqu’à la réception du message ;
• le numéro de téléphone, qui se compose d’un toucher sur mobile ;
• le titre d’onglet et la description, propres à cette page ;
• l’affichage sur un vrai téléphone, avec une connexion moyenne.

Après publication, notez les questions posées au téléphone : celles qui reviennent manquent à votre texte. Prochaine étape : appliquez la même méthode à votre page la plus consultée, puis aux suivantes.