From 2f7772b716c168f13d5f68d8976f6a47b51793e3 Mon Sep 17 00:00:00 2001
From: ABHIRAM <abhirammanikantareddymallidi@gmail.com>
Date: Sun, 23 Nov 2025 20:36:53 +0530
Subject: [PATCH] feat(curriculum): add interactive examples to Proper Heading
 Level Structure lesson (#64077)

---
 .../672a538c029f9e8c1687460e.md               | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/curriculum/challenges/english/blocks/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md b/curriculum/challenges/english/blocks/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
index d3ac2231b55..d11147af8a1 100644
--- a/curriculum/challenges/english/blocks/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
+++ b/curriculum/challenges/english/blocks/lecture-importance-of-accessibility-and-good-html-structure/672a538c029f9e8c1687460e.md
@@ -5,18 +5,44 @@ challengeType: 19
 dashedName: how-does-proper-heading-level-structure-affect-accessibility
 ---
 
-# --description--
+# --interactive--
 
 You previously learned about proper heading level structure. Now, you will learn how a good heading structure affects accessibility.
 
 Proper use of headings creates a visual hierarchy for users to navigate and understand your web page. Using a logical heading hierarchy allows screen reader users to understand the structure of your content and navigate your content quickly. Creating appropriate heading text that accurately describes the content that follows helps everyone find the information they need on your site. As an additional benefit, well-formed headings may also improve the SEO of your site.
 
+Here is a basic example:
+
+:::interactive_editor
+
+```html
+<h1> Music Store Page</h1>
+
+<h2>Featured Albums</h2>
+<p>Check out our featured albums below:</p>
+```
+
+:::
+
 Think of headings as the foundation of your site. Without a good foundation, the accessibility of your content will suffer.
 
 Let's look at how you can make your web projects friendly for people who use assistive technologies by using headings correctly.
 
 Headings, ranging from `h1` to `h6`, create a navigational structure for screen reader users. Screen readers can list all headings on a page, allowing users to jump directly to the sections they need. So, correctly arranging headings is important for helping these users avoid unnecessary content and finding the information they are looking for quickly.
 
+:::interactive_editor
+
+```html
+<h1>I am an h1 heading</h1>
+<h2>I am an h2 heading</h2>
+<h3>I am an h3 heading</h3>
+<h4>I am an h4 heading</h4>
+<h5>I am an h5 heading</h5>
+<h6>I am an h6 heading</h6>
+```
+
+:::
+
 People with partial sight or cognitive disabilities need to process information quickly and easily to reduce cognitive load.
 
 While proper arrangement of headings is important, it is also necessary to make heading texts clear and descriptive.
@@ -32,6 +58,8 @@ Here are some key practices to follow to use headings properly:
 
 Here's a basic markup that represents how you should use headings on a page:
 
+:::interactive_editor
+
 ```html
 <!-- Page title -->
 <h1>What is HTML</h1>
@@ -56,6 +84,8 @@ Here's a basic markup that represents how you should use headings on a page:
 </section>
 ```
 
+:::
+
 # --questions--
 
 ## --text--