jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-30 03:03:06 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): Add interactive examples to description lists lesson (#62688)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Giftea ☕
2025-10-10 23:07:56 +01:00
committed by GitHub
parent d3b35ed0f6
commit fbcd965f15
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md
View File

@@ -5,11 +5,15 @@ challengeType: 19
dashedName: what-are-description-lists
---
# --description--
# --interactive--
Description lists are perfect for presenting terms and definitions in an organized and easy-to-read format, like in a glossary, or real dictionary, where you can find words with their corresponding definitions.
This is an example of a description list in HTML with two terms and their corresponding details:
This is an example of a description list in HTML with two terms and their corresponding details.
Uncomment the code to see the new detail item show up in the preview window.
:::interactive_editor
```html
<dl>
@@ -17,14 +21,18 @@ This is an example of a description list in HTML with two terms and their corres
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<!-- <dt>JS</dt>
<dd>JavaScript</dd> -->
</dl>
```
:::
In this case the terms are the acronyms HTML and CSS, and the details are their expansions. The details could also be definitions, or other information related to the terms.
You will need three HTML elements to define a description list. First, the description list element, `dl`, which is the container for the entire list. You can see it wraps around all the other elements of the description list in the example.
Then, one description term element, `dt`, for each term. In this case the description list has two terms, HTML and CSS, so it has two of these elements.
Then, one description term element, `dt`, for each term. In this case the description list has two terms, HTML and CSS, so it has two of these elements.
And finally, after each term you will find a description details element, `dd`, for the description, or details associated with that term. In this example, they are Hypertext Markup Language and Cascading Style Sheets.
@@ -32,15 +40,23 @@ In the browser, you would see each term followed by its corresponding descriptio
But description lists are not limited to only terms and definitions. They are much more versatile than that. Here we have a recipe with two ingredients.
Uncomment the code to see the new detail item show up in the preview window.
:::interactive_editor
```html
<dl>
<dt>Flour</dt>
<dd>2 cups</dd>
<dt>Sugar</dt>
<dd>1/2 cup</dd>
<!-- <dt>Vegetable Oil</dt>
<dd>2 tablespoons</dd> -->
</dl>
```
:::
The entire description list is within a description list element. The first ingredient, `Flour`, is within a description term element. Then, you can see how much of this ingredient you will need: `2 cups`. This is within a description details element directly after its corresponding ingredients.
And the same structure is repeated for `Sugar`. In this case, the recipe has only two ingredients, but if there were more the same structure could be repeated throughout the description list.