<!DOCTYPE html>
<html lang="fr">
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7537661489587327"
crossorigin="anonymous"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SNF6WNBRLY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SNF6WNBRLY');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="description" content="Dictionnaire d'accords de piano en ligne gratuit. Retrouvez les notes de tous les accords (majeurs, mineurs, 7e...), écoutez-les et apprenez à les jouer facilement. Clavier interactif et notation sur portée.">
<meta name="keywords" content="accords piano, accord piano, Do majeur, La mineur, accord septième, apprendre piano, théorie musicale, clavier interactif, progressions accords, cercle des quintes">
<meta name="author" content="Piano Accord">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large">
<title>Accords Piano : Dictionnaire Complet des 120 Accords | AccordsPiano.fr</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/favicon.svg">
<!-- Canonical -->
<link rel="canonical" href="https://www.accordspiano.fr/">
<!-- Langue et geo-targeting -->
<meta name="language" content="fr">
<meta name="geo.region" content="FR">
<meta name="geo.placename" content="France">
<meta http-equiv="content-language" content="fr-FR">
<link rel="alternate" hreflang="fr" href="https://www.accordspiano.fr/">
<link rel="alternate" hreflang="x-default" href="https://www.accordspiano.fr/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.accordspiano.fr/">
<meta property="og:title" content="Accords Piano : Dictionnaire Complet des 120 Accords | AccordsPiano.fr">
<meta property="og:description" content="Dictionnaire d'accords de piano en ligne gratuit. Retrouvez les notes de tous les accords, écoutez-les et apprenez à les jouer. Clavier interactif et notation sur portée.">
<meta property="og:locale" content="fr_FR">
<meta property="og:site_name" content="AccordsPiano.fr">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Accords Piano : Dictionnaire Complet des 120 Accords | AccordsPiano.fr">
<meta name="twitter:description" content="Dictionnaire d'accords de piano en ligne gratuit. 120 accords avec clavier interactif, écoute audio et notation sur portée.">
<!-- Structured Data - WebSite (SEO + GEO) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "AccordsPiano.fr",
"alternateName": "Piano Accord",
"url": "https://www.accordspiano.fr/",
"description": "Dictionnaire d'accords de piano en ligne gratuit avec clavier interactif, écoute audio et notation sur portée.",
"inLanguage": "fr-FR",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.accordspiano.fr/accord/{search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
<!-- Structured Data - EducationalOrganization (GEO) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "AccordsPiano.fr",
"url": "https://www.accordspiano.fr/",
"applicationCategory": "EducationalApplication",
"operatingSystem": "Web",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "EUR"
},
"description": "Application web gratuite pour apprendre les accords de piano avec un clavier interactif, l'écoute audio des accords, la notation sur portée musicale et des guides pas-à-pas.",
"inLanguage": "fr-FR",
"audience": {
"@type": "EducationalAudience",
"educationalRole": "student",
"audienceType": "Pianistes débutants et intermédiaires"
},
"about": [
{
"@type": "MusicComposition",
"name": "Accords de piano",
"musicalKey": "Toutes les tonalités (Do, Ré, Mi, Fa, Sol, La, Si et dièses)"
}
]
}
</script>
<!-- Structured Data - ItemList pour les types d'accords (GEO) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"name": "Types d'accords de piano",
"description": "Liste complète des types d'accords de piano disponibles sur Piano Accord",
"numberOfItems": 10,
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Accord Majeur", "url": "https://www.accordspiano.fr/accord/do/majeur"},
{"@type": "ListItem", "position": 2, "name": "Accord Mineur", "url": "https://www.accordspiano.fr/accord/do/mineur"},
{"@type": "ListItem", "position": 3, "name": "Accord 7 (dominante)", "url": "https://www.accordspiano.fr/accord/do/7-dominante"},
{"@type": "ListItem", "position": 4, "name": "Accord Maj7", "url": "https://www.accordspiano.fr/accord/do/maj7"},
{"@type": "ListItem", "position": 5, "name": "Accord Min7", "url": "https://www.accordspiano.fr/accord/do/min7"},
{"@type": "ListItem", "position": 6, "name": "Accord Sus2", "url": "https://www.accordspiano.fr/accord/do/sus2"},
{"@type": "ListItem", "position": 7, "name": "Accord Sus4", "url": "https://www.accordspiano.fr/accord/do/sus4"},
{"@type": "ListItem", "position": 8, "name": "Accord Augmenté", "url": "https://www.accordspiano.fr/accord/do/augmente"},
{"@type": "ListItem", "position": 9, "name": "Accord Diminué", "url": "https://www.accordspiano.fr/accord/do/diminue"},
{"@type": "ListItem", "position": 10, "name": "Accord Dim7", "url": "https://www.accordspiano.fr/accord/do/dim7"}
]
}
</script>
<link rel="stylesheet" href="/css/style.css?v=1778678924">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<!-- ===== MAIN NAV ===== -->
<nav class="main-nav" id="mainNav" aria-label="Navigation principale">
<div class="container main-nav-inner">
<a href="/" class="mn-logo">AccordsPiano</a>
<!-- Desktop: site links -->
<div class="main-nav-links">
<a href="/#notesNav" class="mn-link" data-section="accords">Accord par tonalité</a>
<a href="/#typesNav" class="mn-link">Accord par type</a>
<a href="/outils/piano-virtuel/" class="mn-link">Piano virtuel</a>
<a href="/blog/" class="mn-link">Blog</a>
<a href="/partitions/" class="mn-link">Partitions</a>
<a href="/outils/" class="mn-link">Outils</a>
<a href="/theorie/" class="mn-link">Théorie</a>
<a href="/glossaire/" class="mn-link">Glossaire</a>
<a href="/progressions" class="mn-link">Progressions</a>
<a href="/cercle-des-quintes" class="mn-link">Cercle des quintes</a>
</div>
<!-- Mobile: hamburger -->
<button class="mn-burger" id="mnBurger" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
<!-- Desktop mega menu -->
<div class="mega-menu" id="megaMenu">
<div class="container">
<div class="mega-grid" id="megaGrid"></div>
</div>
</div>
</nav>
<!-- Mobile drawer (hors .main-nav : backdrop-filter y crée un containing block qui piège position:fixed) -->
<div class="mn-drawer" id="mnDrawer" aria-hidden="true">
<div class="mn-drawer-section">
<a href="/#notesNav" class="mn-drawer-link">Accord par tonalité</a>
<a href="/#typesNav" class="mn-drawer-link">Accord par type</a>
<a href="/outils/piano-virtuel/" class="mn-drawer-link">Piano virtuel</a>
<a href="/blog/" class="mn-drawer-link">Blog</a>
<a href="/partitions/" class="mn-drawer-link">Partitions</a>
<a href="/outils/" class="mn-drawer-link">Outils</a>
<a href="/theorie/" class="mn-drawer-link">Théorie</a>
<a href="/glossaire/" class="mn-drawer-link">Glossaire</a>
<a href="/progressions" class="mn-drawer-link">Progressions</a>
<a href="/cercle-des-quintes" class="mn-drawer-link">Cercle des quintes</a>
</div>
</div>
<!-- Legacy nav containers (hidden, kept for setupNav JS compat) -->
<div id="navBar" class="hidden" aria-hidden="true">
<div id="navRoots"></div>
<div id="navTypes"></div>
</div>
<!-- ===== BREADCRUMBS ===== -->
<nav class="breadcrumbs hidden" id="breadcrumbs" aria-label="Fil d'Ariane">
<div class="container">
<ol id="breadcrumbList"></ol>
</div>
</nav>
<!-- ===== HOME VIEW ===== -->
<main class="container view" id="homeView">
<section class="home-hero" id="intro">
<h1 class="home-hero-title">Dictionnaire des <span class="accent">120 accords</span> piano</h1>
<p class="home-hero-sub">Trouvez les notes, écoutez et apprenez tous les accords au piano — majeurs, mineurs, 7e, sus, augmentés et diminués.</p>
</section>
<section class="notes-legend" id="notesNav">
<h2 class="notes-legend-title">Accords par note</h2>
<div class="legend-grid notes-legend-grid">
<a href="/accord/do" class="legend-item notes-legend-item">
<span class="badge badge-note">Do</span>
<p>10 accords de Do (C)</p>
</a>
<a href="/accord/do-diese" class="legend-item notes-legend-item">
<span class="badge badge-note">Do#</span>
<p>10 accords de Do# (C#)</p>
</a>
<a href="/accord/re" class="legend-item notes-legend-item">
<span class="badge badge-note">Ré</span>
<p>10 accords de Ré (D)</p>
</a>
<a href="/accord/re-diese" class="legend-item notes-legend-item">
<span class="badge badge-note">Ré#</span>
<p>10 accords de Ré# (D#)</p>
</a>
<a href="/accord/mi" class="legend-item notes-legend-item">
<span class="badge badge-note">Mi</span>
<p>10 accords de Mi (E)</p>
</a>
<a href="/accord/fa" class="legend-item notes-legend-item">
<span class="badge badge-note">Fa</span>
<p>10 accords de Fa (F)</p>
</a>
<a href="/accord/fa-diese" class="legend-item notes-legend-item">
<span class="badge badge-note">Fa#</span>
<p>10 accords de Fa# (F#)</p>
</a>
<a href="/accord/sol" class="legend-item notes-legend-item">
<span class="badge badge-note">Sol</span>
<p>10 accords de Sol (G)</p>
</a>
<a href="/accord/sol-diese" class="legend-item notes-legend-item">
<span class="badge badge-note">Sol#</span>
<p>10 accords de Sol# (G#)</p>
</a>
<a href="/accord/la" class="legend-item notes-legend-item">
<span class="badge badge-note">La</span>
<p>10 accords de La (A)</p>
</a>
<a href="/accord/la-diese" class="legend-item notes-legend-item">
<span class="badge badge-note">La#</span>
<p>10 accords de La# (A#)</p>
</a>
<a href="/accord/si" class="legend-item notes-legend-item">
<span class="badge badge-note">Si</span>
<p>10 accords de Si (B)</p>
</a>
</div>
</section>
<section class="home-types" id="typesNav">
<h2 class="notes-legend-title">Types d'accords</h2>
<div class="legend-grid">
<a href="/type/majeur" class="legend-item notes-legend-item">
<span class="badge badge-major">Majeur</span>
<p>Sonorité brillante et joyeuse. Fondement de la musique occidentale.</p>
</a>
<a href="/type/mineur" class="legend-item notes-legend-item">
<span class="badge badge-minor">Mineur</span>
<p>Sonorité mélancolique et introspective.</p>
</a>
<a href="/type/7-dominante" class="legend-item notes-legend-item">
<span class="badge badge-seventh">7ème</span>
<p>Ajoute tension et mouvement. Essentiel en jazz et blues.</p>
</a>
<a href="/type/maj7" class="legend-item notes-legend-item">
<span class="badge badge-seventh">Maj7</span>
<p>Élégance jazz — un son doux et sophistiqué.</p>
</a>
<a href="/type/min7" class="legend-item notes-legend-item">
<span class="badge badge-seventh">Min7</span>
<p>Douceur soul — velouté et fluide.</p>
</a>
<a href="/type/sus2" class="legend-item notes-legend-item">
<span class="badge badge-sus">Sus2</span>
<p>Sonorité ouverte, aérienne et lumineuse.</p>
</a>
<a href="/type/sus4" class="legend-item notes-legend-item">
<span class="badge badge-sus">Sus4</span>
<p>Suspend la tierce pour une sonorité flottante.</p>
</a>
<a href="/type/augmente" class="legend-item notes-legend-item">
<span class="badge badge-aug">Augmenté</span>
<p>Quinte augmentée pour une tension ascendante.</p>
</a>
<a href="/type/diminue" class="legend-item notes-legend-item">
<span class="badge badge-dim">Diminué</span>
<p>Sonorité instable et mystérieuse, appelle une résolution.</p>
</a>
<a href="/type/dim7" class="legend-item notes-legend-item">
<span class="badge badge-dim">Dim7</span>
<p>Symétrie parfaite — tension maximale.</p>
</a>
</div>
</section>
<section id="chordGrid" class="chord-grid"></section>
</main>
<!-- ===== CHORD PAGE VIEW ===== -->
<article class="view hidden" id="chordPageView">
<div class="container" id="chordPageContent"></div>
</article>
<!-- ===== PROGRESSIONS VIEW ===== -->
<section class="view hidden" id="progressionsView">
<div class="container" id="progressionsContent"></div>
</section>
<!-- ===== CIRCLE OF FIFTHS VIEW ===== -->
<section class="view hidden" id="circleView">
<div class="container" id="circleContent"></div>
</section>
<!-- ===== FOOTER ===== -->
<footer>
<div class="container">
<div class="footer-links">
<a href="/">Accueil</a>
<a href="/blog/">Blog</a>
<a href="/partitions/">Partitions</a>
<a href="/outils/">Outils</a>
<a href="/theorie/">Théorie</a>
<a href="/glossaire/">Glossaire</a>
<a href="/progressions">Progressions</a>
<a href="/cercle-des-quintes">Cercle des quintes</a>
</div>
<p>AccordsPiano.fr — Dictionnaire interactif des accords de piano</p>
</div>
</footer>
<!-- ===== SCRIPTS ===== -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script>
<script src="/js/audio.js?v=1778678924"></script>
<script src="/js/keyboard.js?v=1778678924"></script>
<script src="/js/staff.js?v=1778678924"></script>
<script src="/js/chords.js?v=1778678924"></script>
<script src="/js/faq-data.js?v=1778678924"></script>
<script src="/js/howto-data.js?v=1778678924"></script>
<script src="/js/progressions.js?v=1778678924"></script>
<script src="/js/root-data.js?v=1778678924"></script>
<script src="/js/chord-content-data.js?v=1778678924"></script>
<script src="/js/mega-menu.js?v=1778678924"></script>
<script src="/js/nav.js?v=1778678924"></script>
<script src="/js/seo.js?v=1778678924"></script>
<script src="/js/router.js?v=1778678924"></script>
<script src="/js/app.js?v=1778678924"></script>
</body>
</html>
