gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Update packages and fix local dev (#26907)

Browse Source 
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. -->

- [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md).
- [x] My pull request has a descriptive title (not a vague title like `Update index.md`)
- [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
2018-10-23 14:18:46 +01:00
committed by mrugesh mohapatra
parent 153e1c9f38
commit 7da04a348b
341 changed files with 17836 additions and 1026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
mock-guide/english/html/tutorials/how-to-use-lists/index.md Normal file
View File

@ -0,0 +1,78 @@
---
title: How to Use Lists
---
## How to Use Lists
Lists are used to specify a set of consecutive items or related information in well formed and semantic way, such as a list of ingredients or a list of procedural steps.
HTML markup has three different types of lists - **ordered**, **unordored** and **description** lists.
### Ordered Lists
An ordered list is used to group a set of related items, in a specific order.
This list is created with `<ol>` tag. Each list item is surrounded with `<li>` tag.
##### Code
```html
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
```
##### Example
<ol>
<li>Mix ingredients</li>
<li>Bake in oven for an hour</li>
<li>Allow to stand for ten minutes</li>
</ol>
### Unordered Lists
An unordered list is used to group a set of related items, in no particular order. This list is created with `<ul>` tag. Each list item is surrounded with `<li>` tag.
##### Code
```html
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
```
#### Example
<ul>
<li>Chocolate Cake</li>
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
### Description Lists
A description list is used to specify a list of terms and their descriptions. This list is created with `<dl>` tag. Each list item is surrounded with `<dd>` tag.
##### Code
```html
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
```
##### Output
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
#### Styling List
You can also control the style of the list. You can use `list-style` property of lists. Your list can be bullets, square, in roman numearls or can be images you want.
`list-style` property is a shorthand for `list-style-type`, `list-style-position`, `list-style-image`.
#### More Information:
[HTML lists · WebPlatform Docs](https://webplatform.github.io/docs/guides/html_lists/
)