From 3d80f5896e7a2b93f4243738d0a226b6825be767 Mon Sep 17 00:00:00 2001
From: Noratrieb <48135649+Noratrieb@users.noreply.github.com>
Date: Fri, 10 Apr 2026 20:22:14 +0200
Subject: [PATCH] use custom elements instead of classes

---
 index.css                     |  2 +-
 index.html                    |  2 +-
 lesson-0.html                 | 10 +++++-----
 lesson-1.html                 | 14 +++++++-------
 lesson-2.html                 | 14 +++++++-------
 lesson-3.html                 |  6 +++---
 practice/primitive-types.html |  2 +-
 7 files changed, 25 insertions(+), 25 deletions(-)
diff --git a/index.css b/index.css
index 76d5438..b8268c2 100644
--- a/index.css
+++ b/index.css
@@ -15,7 +15,7 @@ body {
   height: 100%;
 }
 
-.main {
+main {
   width: 100%;
   height: 100%;
 
diff --git a/index.html b/index.html
index 56be0a7..60650e8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content">
         <h1>Learn C++ Itanium Symbol Mangling</h1>
         <noscript>
diff --git a/lesson-0.html b/lesson-0.html
index fbeb5f7..5f251c1 100644
--- a/lesson-0.html
+++ b/lesson-0.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -31,7 +31,7 @@
             For every exercise, there will be a small quiz. If you complete the
             quiz, you can continue
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>To complete the first quiz, press the button below.</p>
             <form data-challenge="1">
               <button
@@ -43,7 +43,7 @@
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -81,7 +81,7 @@ extern "C" {
             But once again, the symbol name will simply be
             <code>main</code> because no mangling is applied.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 extern "C" {
@@ -99,7 +99,7 @@ extern "C" {
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>Congrats on answering your first mangling question!</p>
diff --git a/lesson-1.html b/lesson-1.html
index 61b1dd1..957b11c 100644
--- a/lesson-1.html
+++ b/lesson-1.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -54,7 +54,7 @@ void f() {}
             We will see the <code>v</code> function type a lot in the rest of
             this guide. It stands for a function that takes no arguments.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>
               Which of these symbols cannot possibly be a mangled C++ symbol?
               Answer with the name of the symbol.
@@ -79,7 +79,7 @@ void f() {}
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -97,7 +97,7 @@ void hello_world() {}
             then appended to the previously mentioned prefix <code>_Z</code> and
             then we add the type, which is just <code>v</code> here, at the end.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangling of the following identifier?</p>
             <pre class="code">
 void meow() {}
@@ -117,7 +117,7 @@ void meow() {}
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>
@@ -172,7 +172,7 @@ namespace a {
             previously mentioned characters around them.
           </p>
 
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangling of the following identifier?</p>
             <pre class="code">
 namespace cats {
@@ -196,7 +196,7 @@ namespace cats {
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="3" class="step">
           <p>
diff --git a/lesson-2.html b/lesson-2.html
index ab75743..6369497 100644
--- a/lesson-2.html
+++ b/lesson-2.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -85,7 +85,7 @@ void a(int x, int *y, double &z) {}
             <code>int*</code> (<code>Pi</code>), and a
             <code>double&</code> (<code>Rd</code>).
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 void hello(int **programmer, long day, float &r) {}
@@ -102,7 +102,7 @@ void hello(int **programmer, long day, float &r) {}
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p>
@@ -115,7 +115,7 @@ namespace outer::inner {
 }
           </pre>
           <p>This will be mangled as <code>_ZN5outer5inner3yesEiiRl</code></p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 namespace very::much::nested {
@@ -137,7 +137,7 @@ namespace very::much::nested {
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="2" class="step">
           <p>Let's look at a few more common types.</p>
@@ -155,7 +155,7 @@ namespace very::much::nested {
             In the future there might be a part of the website where you can
             memorize these encodings more easily.
           </p>
-          <div class="quiz-section">
+          <quiz-section>
             <p>What is the mangled symbol of the following function?</p>
             <pre class="code">
 void name(unsigned long long a, unsigned short b, char c, int d) {}
@@ -175,7 +175,7 @@ void name(unsigned long long a, unsigned short b, char c, int d) {}
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
 
         <section data-step="3" class="step">
diff --git a/lesson-3.html b/lesson-3.html
index 0640d82..afc580a 100644
--- a/lesson-3.html
+++ b/lesson-3.html
@@ -7,7 +7,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href=".">Learn C++ Itanium Symbol Mangling</a>
@@ -104,7 +104,7 @@ int main() {
               that isn't stored in the symbol for efficiency)
             </li>
           </ul>
-          <div class="quiz-section">
+          <quiz-section>
             <p>
               What is the mangled symbol of the following instantiation of
               empty?
@@ -128,7 +128,7 @@ int main() {
               </button>
               <div class="error"></div>
             </form>
-          </div>
+          </quiz-section>
         </section>
         <section data-step="1" class="step">
           <p class="lesson-last-paragraph">
diff --git a/practice/primitive-types.html b/practice/primitive-types.html
index 9d0ca61..abcde8b 100644
--- a/practice/primitive-types.html
+++ b/practice/primitive-types.html
@@ -8,7 +8,7 @@
     <title>Womangling</title>
   </head>
   <body>
-    <main class="main">
+    <main>
       <div class="content" id="content-area">
         <h1>
           <a class="root-link" href="..">Learn C++ Itanium Symbol Mangling</a>
