HTML et CSS : créer votre premier site pas à pas

Éditeur de code affichant une page HTML et son rendu dans le navigateur — Un éditeur de texte et un navigateur suffisent pour créer votre première page.

Publié le 2 novembre 2026 · Temps de lecture : 7 minutes

Créer son premier site web n'a jamais été aussi accessible. Il vous faut seulement un éditeur de texte, un navigateur et un peu de curiosité. Dans ce guide, vous allez comprendre le rôle du HTML et du CSS, puis construire pas à pas une petite page de présentation propre, structurée et adaptée aux mobiles.

HTML et CSS : quel est leur rôle ?

Le HTML (HyperText Markup Language) décrit le contenu et la structure d'une page : titres, paragraphes, images, liens. Le CSS (Cascading Style Sheets) s'occupe de l'apparence : couleurs, polices, espacements, mise en page.

Une image simple : le HTML est le squelette d'une maison, le CSS en est la décoration. Séparer les deux rend votre site plus facile à maintenir et plus accessible.

La structure d'une page HTML

Toute page HTML repose sur un squelette identique. Créez un fichier index.html et commencez par ceci :

<!DOCTYPE html> indique au navigateur qu'il s'agit de HTML5.
<html lang="fr"> enveloppe la page et précise la langue.
<head> contient les informations invisibles : titre, encodage, description.
<body> contient tout ce que le visiteur voit.

Les balises indispensables du head

<meta charset="utf-8"> pour afficher correctement les accents.
<meta name="viewport" content="width=device-width, initial-scale=1"> pour le rendu mobile.
<title> pour le titre affiché dans l'onglet et les résultats de recherche.
<meta name="description"> pour le résumé de la page.

La balise viewport est la plus souvent oubliée par les débutants, et c'est elle qui rend un site réellement utilisable sur téléphone.

Les balises sémantiques

Plutôt que d'empiler des <div>, utilisez des balises qui donnent du sens au contenu. Les moteurs de recherche et les lecteurs d'écran s'en servent pour comprendre votre page.

Balise	Usage
`<header>`	En-tête de la page ou d'une section
`<nav>`	Bloc de navigation principal
`<main>`	Contenu principal, unique par page
`<section>`	Regroupement thématique de contenu
`<footer>`	Pied de page

Pensez aussi à respecter la hiérarchie des titres : un seul <h1>, puis des <h2> pour les parties, et des <h3> pour les sous-parties.

Construire votre page de présentation

Notre objectif : une page personnelle avec un en-tête, une courte présentation, une liste de compétences et un pied de page. Dans le <body>, vous placez :

un <header> avec votre nom en <h1> et une phrase d'accroche ;
un <main> avec une section « À propos » (paragraphe et image) ;
une section « Compétences » sous forme de liste <ul> ;
un <footer> avec une mention simple.

N'oubliez jamais l'attribut alt sur vos images : il décrit le visuel aux personnes malvoyantes et s'affiche si l'image ne charge pas.

Les bases du CSS

Créez un fichier style.css et reliez-le dans le head avec <link rel="stylesheet" href="style.css">. Une règle CSS se compose d'un sélecteur et de déclarations : p { color: #333; }.

Couleurs et typographie

Choisissez une palette réduite : une couleur de fond, une couleur de texte, une couleur d'accent. Vérifiez que le contraste entre texte et fond reste suffisant (ratio d'au moins 4,5:1) pour garantir la lisibilité. Pour approfondir ce sujet, consultez notre guide sur la typographie et les couleurs de l'identité visuelle.

Marges, espacements et boîtes

Chaque élément est une boîte composée de son contenu, de son padding (espace intérieur), de sa border et de sa margin (espace extérieur). Ajoutez box-sizing: border-box; à tous les éléments pour que les largeurs restent prévisibles. Un max-width d'environ 800 px, combiné à margin: 0 auto, centre joliment votre contenu.

Flexbox : aligner simplement

Flexbox organise des éléments en ligne ou en colonne. Il suffit d'écrire display: flex; sur le conteneur, puis d'ajuster :

gap pour l'espace entre les éléments ;
justify-content pour l'alignement sur l'axe principal ;
align-items pour l'alignement transversal ;
flex-wrap: wrap pour autoriser le retour à la ligne sur petit écran.

C'est parfait pour un menu, une rangée de cartes ou un en-tête avec logo et liens.

Adapter votre page aux mobiles

Aujourd'hui, la majorité des visites se font sur téléphone. Adoptez la démarche mobile-first : concevez d'abord pour un petit écran, puis enrichissez pour les grands.

Ajoutez la balise viewport dans le head.
Utilisez des unités relatives (rem, %) plutôt que des pixels fixes.
Rendez les images flexibles avec max-width: 100%; height: auto;.
Prévoyez une taille de texte d'au moins 16 px.
Agrandissez les zones cliquables pour les doigts.
Ajoutez une media query, par exemple @media (min-width: 768px), pour passer en deux colonnes sur grand écran.

Testez enfin votre page en réduisant la fenêtre du navigateur ou avec les outils de développement, jusqu'à 320 px de large : rien ne doit déborder.

Bonnes pratiques à retenir

Indentez votre code et nommez vos classes clairement.
Validez votre HTML avec un validateur en ligne.
Gardez un focus clavier visible sur les liens et boutons.
Optimisez vos images avant de les mettre en ligne.
Soignez l'ergonomie : voyez nos conseils sur les essentiels du design d'interface et de l'UX.

Et maintenant ?

Vous savez structurer une page, la styliser et la rendre adaptée aux mobiles. L'étape suivante consiste à la rendre vivante : menus dynamiques, interactions, formulaires. C'est ce que nous abordons dans notre introduction à JavaScript pour ajouter de l'interactivité. Continuez à pratiquer en modifiant votre page : c'est ainsi que les automatismes s'installent.