Course Content
Learn HTML, CSS, and JavaScript from Scratch
About Lesson

LIST

If we compose or develop a web page, we often need to add a bulleted or numbered list to the text. This can be done with HTML lists. In this case, the lists are not in a specific order. Unordered lists can be used to show things like a list of things to do or a list of things to buy.

We must use the <ul> tag with nested <li> tags for the list of items to do this. The <ul> tag in the code means “unordered lists”; it tells the browser to list your items in an unorderly manner, While <li> tag (list items), Check the below example:

Loading

ORDERED LISTS

An ordered list is fairly similar to an unordered list, except we will want to use the <ol> tag to declare the list. List items are still wrapped in a <li> tag. The list items will be numbered rather than the bulleted items we saw previously.

From the screenshot below, you’d notice I listed some of our company’s @aptlearn_io.”
products using the <ol> tag, which means ordered list The difference between <ol> and <ul> is that <ul> uses • to list the items <ol> uses numbers

Loading

Examples

Changing the bullet type from disc to square using the type attributes

Loading

The TYPE and START type attributes allow us to change the style of either the
bullets for unordered lists or the numbering scheme for ordered lists.

Unordered list type values include -circle -disc -square.

Ordered list-type values can be used to change the numbering scheme and include the following:

•1: Default numeric scheme

•I: Upper-case Roman numerals

•i: Lower-case Roman numerals

•A: Upper-case Alphabet

•a: Lower-case Alphabet

Ordered lists have an additional start attribute that can be used to start the numbering at a value other than the default of 1.

If you look at the input (start =“5”) is me telling the code to start listing from number 5, I won’t include that if I want to start from 1

Loading

What if you want to start the numbering from 5?

You can try

type="1" start="5"

Important HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

For complete LIST tags, see here.

Lastly, learning to code is simple, but you need to practice and be consistent to climb the level you desire.

0% Complete