feat(curriculum): Add interactive examples to presentational html lesson (#62682)

curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md

@@ -5,45 +5,62 @@ challengeType: 19
 dashedName: what-is-the-difference-between-presentational-and-semantic-html
 ---
 
-# --description--
+# --interactive--
 
 Presentational HTML focuses on the appearance and style of the content. In the early days of HTML, developers would use elements like the `center`, `big`, and `font` elements. But in modern web development you shouldn't use these types of elements, because of their limitations and negative impact on accessibility and maintainability.
 
 Many presentational HTML elements are deprecated, which means that they are outdated and no longer recommended. There are better ways to get the same results. However, it is helpful to know that they exist, so we'll take a look at some examples.
 
-The `font` element is a deprecated element used to set the font size and color of the text. Here's an example of a `font` element:
+The `font` element is a deprecated element used to set the font size and color of the text. Here's an example of a `font` element.
+
+Change the size from 5 to 7 to see the font increase.
+
+:::interactive_editor
 
 ```html
 <font size="5" color="blue">This text is blue and large.</font>
 ```
 
+:::
+
 This example sets the color of the text to `blue` and the size to a value of `5`. The range for the `size` attribute is from `1` to `7`, with `1` being the smallest and `7` being the largest. The default value is `3`, if you don't set the value explicitly.
 
 While this element still works, you should not use it because the font size and color should always be set in CSS, not in HTML. 
 
-The `center` element is another deprecated element that is used to center the content horizontally within its container. Here's an example of the `center` element that contains text and a paragraph element:
+The `center` element is another deprecated element that is used to center the content horizontally within its container. Here's an example of the `center` element that contains text and a paragraph element.
+
+Add `center` tags around the `<p>Another example text.</p>` to see it centered on the page.
+
+:::interactive_editor
 
 ```html
 <center>
   This text is centered.
   <p>HTML is awesome.</p>
 </center>
+
+<p>Another example text.</p>
 ```
 
-In the browser, you would see all of the content within the `center` element centered horizontally.
+:::
 
-And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts:
+And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts.
+
+Add `big` tags around the `Some other text` and see the changes in the preview window.
+
+:::interactive_editor
 
 ```html
 <p>
   This text has a normal font size.
   <big>This text is larger.</big>
+  Some other text.
 </p>
 ```
 
-The first part has normal sized text, while the second part enclosed within the `big` element will be displayed in a larger font size. In the browser, you would see the text within the `big` element looks larger compared to the surrounding text.
+:::
 
-However, remember that font size should always be set with CSS, so you should not use this element in modern HTML.
+Remember that font size should always be set with CSS, so you should not use this element in modern HTML.
 
 These were examples of presentational HTML elements. But all of them are deprecated and no longer recommended. So what should you use instead? Let's see.
 
@@ -58,18 +75,26 @@ Examples of semantic HTML elements include:
 - The `section` element for grouping related information.
 - The `figure` element for illustrations and diagrams.
 
-This is an example of a `header` element that contains a navigation section element:
+This is an example of a `header` element that contains a navigation section element.
+
+Add a `<a href="#">Products</a>` inside of the `nav` and see the changes in the preview window.
+
+:::interactive_editor
 
 ```html
 <header>
   <nav>
     <a href="#">Home</a>
     <a href="#">About</a>
+    <!--Add the products link here-->
+
     <a href="#">Contact</a>
   </nav>
 </header>
 ```
 
+:::
+
 The semantic elements clearly show their purpose within the HTML structure. There are many different semantic HTML elements. You will definitely find one that fits the needs of your project.
 
 Great work. Now you know the difference between presentational and semantic HTML: semantic HTML describes the content, while presentational HTML focuses on the appearance.