HTML Tabs : Tutoriel Complet pour Créer des Onglets Dynamiques en HTML, CSS et JavaScript
L’expérience utilisateur est le pilier central de tout projet web réussi. Sur un site comme Technely, où l’information technique doit être à la fois dense et accessible, l’organisation du contenu devient un art. L’un des outils les plus puissants pour structurer vos pages sans noyer vos lecteurs est sans aucun doute le système d’onglets, plus communément appelé Tabs.
Dans ce tutoriel complet, nous allons explorer comment construire un système d’onglets moderne, léger et entièrement personnalisable. Pas de bibliothèques lourdes, pas de frameworks complexes : juste du code pur pour une performance maximale.
Live demo :
Le Code au Cœur de Technely
Le développement moderne ne se limite pas à l’écriture de lignes de code. Il s’agit de créer des systèmes résilients et performants.
L’Esthétique Fonctionnelle
Le design ne doit pas seulement être beau, il doit être utile. Une interface à onglets bien conçue aide l’utilisateur à traiter l’information.
Priorité à la Sécurité
Nous nous assurons que les utilisateurs naviguant au clavier peuvent interagir avec notre contenu sans entrave.
Pourquoi les onglets sont-ils indispensables en 2026 ?
Imaginez que vous rédigiez une fiche technique pour un nouveau processeur ou un tutoriel de programmation. Vous avez besoin d’afficher le code en Python, en JavaScript et en C++. Si vous affichez tout l’un en dessous de l’autre, votre page devient interminable. C’est ici que les onglets interviennent.
Ils permettent de :
- Segmenter l’information : L’utilisateur choisit activement ce qu’il veut consulter.
- Améliorer la lisibilité : Une interface aérée réduit le taux de rebond.
- Optimiser l’espace mobile : Sur smartphone, chaque pixel compte. Les onglets transforment un défilement infini en une navigation latérale intuitive.
Comprendre la mécanique : Le trio HTML, CSS et JavaScript
Pour un débutant, le fonctionnement d’un onglet peut paraître magique, mais c’est en réalité une logique très simple de « cache-cache ».
- Le HTML (La Structure) : On crée des boutons pour cliquer et des blocs (div) pour le contenu. Chaque bloc de contenu possède un identifiant unique (ID).
- Le CSS (L’Apparence) : On définit le design. Le point crucial est que, par défaut, tous les blocs de contenu sont masqués (
display: none), sauf le premier. - Le JavaScript (L’Interaction) : C’est le cerveau. Lorsqu’on clique sur un bouton, le script dit au navigateur : « Cache tout ce qui est ouvert et n’affiche que le bloc qui correspond à ce bouton ».
Le Code Complet et Prêt à l’Emploi
Voici une solution « tout-en-un ». Vous pouvez copier ce bloc unique dans un fichier nommé index.html et l’ouvrir dans votre navigateur pour voir le résultat instantanément.
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutoriel Tabs Responsives - Technely</title>
<style>
/* --- DESIGN GLOBAL --- */
:root {
--primary-color: #2563eb;
--bg-color: #f8fafc;
--text-color: #1e293b;
--border-color: #e2e8f0;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
padding: 20px; /* Réduit pour mobile */
margin: 0;
}
.main-container {
max-width: 900px;
margin: 20px auto;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
border: 1px solid var(--border-color);
}
/* --- BARRE DE NAVIGATION RESPONSIVE --- */
.tab-header {
display: flex;
background-color: #f1f5f9;
border-bottom: 1px solid var(--border-color);
flex-wrap: wrap; /* Permet le passage à la ligne */
}
.tab-trigger {
flex: 1;
min-width: 120px; /* Empêche les boutons d'être trop étroits */
padding: 18px 15px;
border: none;
background: none;
font-size: 0.95rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
text-align: center;
}
.tab-trigger:hover {
background-color: #e2e8f0;
color: var(--primary-color);
}
.tab-trigger.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
background-color: white;
}
/* --- CONTENU --- */
.tab-pane {
display: none;
padding: 30px; /* Un peu réduit pour mobile */
animation: slideIn 0.4s ease-out;
}
.tab-pane.active {
display: block;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.tab-pane h2 {
margin-top: 0;
color: #0f172a;
font-size: 1.4rem;
}
/* --- MEDIA QUERIES (MOBILE) --- */
@media (max-width: 600px) {
.tab-header {
flex-direction: column; /* Aligne les boutons verticalement */
}
.tab-trigger {
width: 100%;
text-align: left; /* Texte à gauche pour une liste mobile */
padding: 15px 20px;
border-bottom: 1px solid var(--border-color);
border-left: 4px solid transparent; /* Change l'indicateur de côté */
}
.tab-trigger.active {
border-bottom: 1px solid var(--border-color);
border-left: 4px solid var(--primary-color);
background-color: #f8fafc;
}
.tab-pane {
padding: 20px;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="tab-header">
<button class="tab-link tab-trigger active" onclick="switchTab(event, 'content-1')">Développement</button>
<button class="tab-link tab-trigger" onclick="switchTab(event, 'content-2')">Design UI</button>
<button class="tab-link tab-trigger" onclick="switchTab(event, 'content-3')">Sécurité</button>
</div>
<div id="content-1" class="tab-pane active">
<h2>Le Code au Cœur de Technely</h2>
<p>Le développement moderne ne se limite pas à l'écriture de lignes de code. Il s'agit de créer des systèmes résilients et performants.</p>
</div>
<div id="content-2" class="tab-pane">
<h2>L'Esthétique Fonctionnelle</h2>
<p>Le design ne doit pas seulement être beau, il doit être utile. Une interface à onglets bien conçue aide l'utilisateur à traiter l'information.</p>
</div>
<div id="content-3" class="tab-pane">
<h2>Priorité à la Sécurité</h2>
<p>Nous nous assurons que les utilisateurs naviguant au clavier peuvent interagir avec notre contenu sans entrave.</p>
</div>
</div>
<script>
function switchTab(event, sectionId) {
// Cacher tous les panneaux
const panes = document.querySelectorAll('.tab-pane');
panes.forEach(pane => pane.classList.remove('active'));
// Désactiver tous les boutons
const triggers = document.querySelectorAll('.tab-trigger');
triggers.forEach(btn => btn.classList.remove('active'));
// Activer le bon panneau et le bon bouton
document.getElementById(sectionId).classList.add('active');
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>
Analyse technique pour les futurs experts
La structure HTML (Sémantique)
Dans le code ci-dessus, nous utilisons la classe .tab-trigger pour nos boutons. Pourquoi des boutons plutôt que des liens (<a>) ? Parce qu’un bouton indique au navigateur une action au sein de la page, tandis qu’un lien suggère un déplacement vers une autre page. C’est un détail qui compte pour l’accessibilité web.
Le CSS : Flexbox et Animations
La barre d’onglets utilise display: flex. C’est l’outil moderne par excellence pour aligner des éléments. En mettant flex: 1 sur les boutons, ils occupent tous la même largeur, peu importe la taille de l’écran. L’animation slideIn ajoute ce « petit plus » professionnel : le contenu ne se contente pas d’apparaître brutalement, il glisse légèrement vers le haut avec un effet de fondu.
Le JavaScript : La boucle forEach
Le script est conçu pour être « propre ». Au lieu d’utiliser de vieilles boucles for, nous utilisons forEach. C’est plus lisible et moins sujet aux erreurs. Le script nettoie l’interface (enlève le « active » partout) avant de l’appliquer uniquement sur l’élément cliqué. C’est une méthode robuste qui évite d’avoir plusieurs onglets ouverts en même temps.
L’Esthétique Brutaliste : L’Ingénierie au Service de l’Interface
Ce style explore le minimalisme architectural, souvent appelé « Brutalisme digital ». Il se distingue par une rigueur géométrique absolue : ici, pas d’arrondis ni de fioritures, mais des angles droits et des lignes de force qui structurent l’information avec autorité. La véritable prouesse de ce design réside dans sa continuité visuelle totale. Grâce à une manipulation précise des bordures et des niveaux de profondeur ($z-index$), l’onglet actif fusionne littéralement avec son panneau de contenu pour ne former qu’un seul bloc monolithique.
Cette approche « sans couture » élimine toute barrière visuelle et renforce la clarté cognitive. L’utilisateur ne perçoit plus deux éléments séparés, mais une entité logique unique, ce qui est idéal pour les interfaces professionnelles, les outils de monitoring ou les documentations techniques où la précision est reine. En adoptant ce look « Blueprint » (plan technique), vous offrez à votre site une esthétique robuste et intemporelle qui respire la performance et le sérieux.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabs Carrés & Continus - Technely</title>
<style>
/* --- CONFIGURATION --- */
:root {
--accent-color: #000000; /* Noir profond pour un look premium */
--bg-page: #e5e7eb;
--bg-content: #ffffff;
--text-main: #111827;
--border-width: 2px;
}
body {
background-color: var(--bg-page);
font-family: 'Helvetica Neue', Arial, sans-serif;
display: flex;
justify-content: center;
padding-top: 60px;
margin: 0;
}
/* --- STRUCTURE --- */
.tabs-wrapper {
width: 90%;
max-width: 800px;
}
/* Barre de navigation */
.tabs-nav {
display: flex;
gap: 0; /* Aucun espace pour garder le design continu */
}
.tab-item {
padding: 15px 30px;
border: var(--border-width) solid var(--accent-color);
border-bottom: none; /* Important pour la continuité */
background: #d1d5db;
color: #4b5563;
font-weight: 800;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease;
margin-right: -2px; /* Superposition des bordures pour éviter le doublement */
}
/* État Actif : L'onglet fusionne avec le contenu */
.tab-item.active {
background: var(--bg-content);
color: var(--accent-color);
position: relative;
z-index: 2; /* Passe au-dessus de la bordure du contenu */
padding-top: 20px; /* Petit effet d'élévation */
margin-top: -5px;
}
/* --- ZONE DE CONTENU --- */
.content-container {
background: var(--bg-content);
border: var(--border-width) solid var(--accent-color);
position: relative;
z-index: 1;
margin-top: -0px; /* Ajustement pour coller parfaitement aux onglets */
}
.tab-panel {
display: none;
padding: 40px;
animation: sharpFade 0.3s ease-in;
}
.tab-panel.active {
display: block;
}
/* Animation plus brute pour un design carré */
@keyframes sharpFade {
from { opacity: 0; }
to { opacity: 1; }
}
h2 {
font-size: 2rem;
margin-top: 0;
text-transform: uppercase;
border-left: 5px solid var(--accent-color);
padding-left: 15px;
}
p {
line-height: 1.7;
color: #374151;
font-size: 1.1rem;
}
/* --- RESPONSIVE --- */
@media (max-width: 600px) {
.tabs-nav { flex-direction: column; }
.tab-item {
border-bottom: var(--border-width) solid var(--accent-color);
margin-right: 0;
}
.tab-item.active { margin-top: 0; padding-top: 15px; }
}
</style>
</head>
<body>
<div class="tabs-wrapper">
<div class="tabs-nav">
<button class="tab-item active" onclick="changeTab(event, 'dev')">Développement</button>
<button class="tab-item" onclick="changeTab(event, 'design')">Design</button>
<button class="tab-item" onclick="changeTab(event, 'infra')">Infrastructure</button>
</div>
<div class="content-container">
<div id="dev" class="tab-panel active">
<h2>Architecture Brutaliste</h2>
<p>Ce design utilise des lignes fortes et une absence totale d'arrondis. C'est l'esthétique parfaite pour les sites techniques qui veulent dégager une image de précision et de robustesse.</p>
</div>
<div id="design" class="tab-panel">
<h2>Continuité Visuelle</h2>
<p>En supprimant la bordure inférieure de l'onglet actif et en utilisant la même couleur que le panneau de contenu, on crée un flux ininterrompu. L'oeil ne perçoit plus deux éléments distincts, mais un seul bloc cohérent.</p>
</div>
<div id="infra" class="tab-panel">
<h2>Structure Solide</h2>
<p>Chaque pixel est calculé pour s'aligner. Les bordures de 2px en noir pur renforcent l'aspect "blueprint" (plan technique) très apprécié dans l'industrie logicielle.</p>
</div>
</div>
</div>
<script>
function changeTab(event, id) {
// Cacher tous les panneaux
const panels = document.querySelectorAll('.tab-panel');
panels.forEach(p => p.classList.remove('active'));
// Réinitialiser les boutons
const buttons = document.querySelectorAll('.tab-item');
buttons.forEach(b => b.classList.remove('active'));
// Activer l'élément ciblé
document.getElementById(id).classList.add('active');
event.currentTarget.classList.add('active');
}
</script>
</body>
</html>
Conclusion et perspectives
Vous avez maintenant entre les mains un système d’onglets digne des meilleurs sites technologiques. Ce code est une base solide que vous pouvez étendre. Par exemple, vous pourriez ajouter du code pour que les onglets changent automatiquement après quelques secondes (carrousel), ou enregistrer l’onglet ouvert dans le navigateur de l’utilisateur pour qu’il le retrouve à sa prochaine visite.
Maîtriser ces fondamentaux sur Technely, c’est s’assurer de construire un web plus rapide, plus propre et surtout plus agréable pour vos utilisateurs.
Lire aussi :
Créez une Lightbox Moderne et Puissante en 5 Étapes Faciles avec HTML, CSS et JavaScript
