feat(curriculum): Add interactive examples to div lesson (freeCodeCamp#62634)

Author: Giftea

curriculum/challenges/english/blocks/lecture-html-fundamentals/670803abcb3e980233da4768.md

@@ -5,37 +5,48 @@ challengeType: 19
 dashedName: what-are-div-elements
 ---
 
-# --description--
+# --interactive--
 
-Now that we understand what HTML is, let's move onto the fun stuff! I am going to look at the Content Division Element - or in other words, the *div*:
+The `div` element is used as a container to group other elements. 
 
-```html
-<div></div>
-```
-
-I like to think of the `div` as a beautiful being that can be anything you want it to be. We can give a `div` a `height`, we can give it a `width`, and we can give it a background color using CSS - or in other words styling, which we will cover in lessons coming up.
+Here is an example of a `div` element. Add another paragraph element inside of the `div` element and see the changes in the preview window.
 
-We can also use it in a very basic form without styling, to hold other elements together. So for example, we can create a `div` and put a heading in it, and put a paragraph in it, and now these two elements will be grouped together:
+:::interactive_editor
 
 ```html
 <div>
-  <h1>I am a heading</h1>
-  <p>I am a paragraph</p>
+  <p>Example paragraph element.</p>
+
 </div>
 ```
 
-Just be aware that there might be better elements to use when grouping these together. You might choose a `section` element, for example:
+:::
+
+You will mainly use the `div` element when you want to group HTML elements that will share a set of CSS styles. You will learn more about CSS in future lessons and workshops. 
+
+Even though the `div` element is commonly used in real world codebases, you should be careful not to overuse it. There are times when another element would be more appropriate. 
+
+For example, if you wanted divide up your content into sections, then the `section` element would be more appropriate than a `div` element. 
+
+Add another `section` element below the first one. Then inside of the `section` element, a `h2` and `p` elements. You can use whatever text you like and you will see the changes in the preview window.
+
+:::interactive_editor
 
 ```html
 <section>
-  <h1>I am a heading</h1>
-  <p>I am a paragraph</p>
+  <h2>Mammals</h2>
+  <p>Mammals are warm-blooded animals with fur or hair. Most give birth to live young.</p>
+  <ul>
+    <li>Lion</li>
+    <li>Elephant</li>
+    <li>Dolphin</li>
+  </ul>
 </section>
 ```
 
-This is because the `section` element has semantic meaning. Semantics are the meaning of words or phrases in a language. In HTML, which is a language, elements have their own semantic meaning too. So, this means if you use a `section` element, the browser will pick up its semantic meaning and understand to treat this as a section - on desktops, mobiles, you name it. 
+:::
 
-We will dive into this topic further later on. For now, just know that the `div`, does not have this. It's like a mysterious ghost. Let's see what else we can do to a `div`, in the next lesson.
+The `section` element has semantic meaning over the `div` element which is not semantic. Semantics are the meaning of words or phrases in a language. In HTML, which is a language, elements have their own semantic meaning too. So, this means if you use a `section` element, the browser will pick up its semantic meaning and understand to treat this as a section - on desktops, mobiles, you name it. 
 
 # --questions--