feat(curriculum): add interactive examples to Proper Heading Level Structure lesson (#64077)

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--