Ce qui contrôle mise en page & design d'une page web : HTML & CSS expliqués

La structure visuelle de toute page web est bâtie par deux technologies cœur travaillant en tandem :

HTML — Structure & Sémantique

• Définit quoi est le contenu : titres (<h1>), paragraphes (<p>), listes (<ul>), images (<img>), liens (<a>), sections (<section>, <article>, <nav>).
• Crée l'arbre DOM (Document Object Model) que navigateurs parsent.
• Crochets accessibilité : alt, aria-*, rôles landmarks.

CSS — Présentation & Mise en page

• Définit comment HTML apparaît : couleurs, polices, espacements, positionnement, breakpoints responsive.
• Modules mise en page clés :
  • Flexbox — Alignement 1D (barres nav, rangées cartes).
  • Grid — Layouts 2D (grilles pages, galeries).
  • Flow / Block formatting — Flux document par défaut.
• Cascade & spécificité déterminent quelle règle gagne.
• Propriétés personnalisées (variables CSS) pour theming.

Comment ils travaillent ensemble

<!-- HTML --> <article class="card"> <img src="photo.jpg" alt="Coucher soleil"> <h2>Titre</h2> <p>Description...</p> <a href="#" class="btn">Lire plus</a> </article> /* CSS */ .card { display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.5rem; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px #0003; } .card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; } .btn { align-self: start; background: #0066cc; color: #fff; padding: .5rem 1rem; border-radius: 4px; text-decoration: none; }

Outillage moderne

• Frameworks : Tailwind CSS, Bootstrap, Material UI — bibliothèques utilitaires/composants.
• Outils build : Vite, Webpack, esbuild — bundle, minify, autoprefix.
• Design systems : Figma → code (Anima, Builder.io).

Rôle de JavaScript

JS manipule DOM/CSSOM dynamiquement (React, Vue, Svelte, vanilla) mais ne remplace pas HTML/CSS pour la mise en page — il enrichit l'interactivité.