Back to Freecodecamp

Working With Text Lesson H

curriculum/challenges/english/blocks/top-working-with-text/637f4e3e72c65bc8e73dfe24.md

latest2.3 KB
Original Source

--description--

If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list.

Unordered lists are created using the <ul> element, and each item within the list is created using the list item element <li>.

Each list item in an unordered list begins with a bullet point:

<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/powjajd?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=powjajd&amp;user=TheOdinProjectExamples&amp;name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_powjajd"></iframe>

If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list.

Ordered lists are created using the <ol> element. Each individual item in them is again created using the list item element <li>. However, each list item in an ordered list begins with a number instead:

<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_2" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/yLXYvYp?height=300&amp;theme-id=dark&amp;default-tab=html%2Cresult&amp;slug-hash=yLXYvYp&amp;user=TheOdinProjectExamples&amp;name=cp_embed_2" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_yLXYvYp"></iframe>

--assignment--

Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above.


Make an unordered shopping list of your favorite foods.


Make an ordered list of todo’s you need to get done today.


Make an unordered list of places you’d like to visit someday.


Make an ordered list of your all time top 5 favorite video games or movies.

--questions--

--text--

What HTML tag is used to create an unordered list?

--answers--

<li>


<ul>


<ol>

--video-solution--

2