CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-22 21:08:12 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Giftea ☕ 2025-10-09 17:36:19 +01:00 committed by GitHub
parent b4ccd9db62
commit 02e4292f90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>
```
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.
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.
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--