HTML Basics
Learn HTML HTML Basics HTML Elements HTML Attributes HTML Comments HTML Colors HTML Style HTML CSS HTML Headings & Paragraphs HTML Formatting HTML Quotations HTML Links HTML Images HTML ListsHTML Intermediate
HTML Tables HTML Blocks HTML Classes & Ids HTML Iframes HTML Head HTML Layouts HTML File Paths HTML Pictures HTML Audio HTML Video HTML YoutubeHTML Advance
HTML Forms HTML Form Attributes HTML POST & GETSEO Tips & Others
SEO Tips Hosting Sites SEO Tools
HTML Lists - Ordered & Unordered Lists
HTML ordered lists
Ordered lists are another name for numbered lists
If you want to create a list which is either numbered or ordered we need to use the <ol> element
There are different numbering methods for ordered lists. We will see an example for each type. For this we need to use the type attribute which define the numbering or ordering method
RunI have also put a start attribute also to show that you can control from which point you want to start the ordered lists
The values for the type must be remembered
Type="1" - is the normal numbering pattern
Type="a" - orders in simple alphabets
Type="A" - orders in capital alphabets
Type="i" - orders in simple roman numericals
Type="I" - orders in capital roman numericals
The <li> tag is used to hold the content for each point. It stands for list item
Unordered lists
These are list which are not following any order
We use the <ul> element to create an unordered list
The <li> tag is used to hold the content for each point. It stands for list item
It is very similar to ordered lists however instead of numbers we use bullet points
Let's see an example
RunThe default are small disc which are filled. However, this could be changed using CSS. This is a very important part in web development and styling as lists could be used as navigation links
Styling Lists with CSS
We will see some ways which we could style the list using the style attribute
We use the list-style-type: property to define what kind of bullet point you want
It can take either oone of these values
disc - this is the default filled discs
circle - small circles
square - small regular square
none - nothing, this is especially used when you want to use the lists as links
we will see an example below
RunThe power of CSS web styling
With CSS you can make unordered list into ordered lists and even more by using CSS coding. However, this is considered to a bad practice.
Here is an example of how unordered lists can be ordered lists
RunThe default are small disc which are filled. However, this could be changed using CSS. This is a very important part in web development and styling as lists could be used as navigation links
Styling Lists with CSS
We will see some ways which we could style the list using the style attribute
We use the list-style-type: property to define what kind of bullet point you want
It can take either oone of these values
disc - this is the default filled discs
circle - small circles
square - small regular square
none - nothing, this is especially used when you want to use the lists as links
we will see an example below
RunThis shows the other values which the list-style-type property could take. This is part of CSS so it will be covered in the web styling(CSS) chapter
This is why CSS is also a very powerful styling langauage but also could be misused. If misused this could badly affect you SEO ranking and making your website be ranked very low
The default are small disc which are filled. However, this could be changed using CSS. This is a very important part in web development and styling as lists could be used as navigation links
Styling Lists with CSS
We will see some ways which we could style the list using the style attribute
We use the list-style-type: property to define what kind of bullet point you want
It can take either oone of these values
disc - this is the default filled discs
circle - small circles
square - small regular square
none - nothing, this is especially used when you want to use the lists as links
we will see an example below
RunHow lists could be used as links
We will see a simple example how a list could be used as links using CSS
RunDescription lists
The final type of lists are called description lists
For you to understand we will use an example
RunThe <dl> element is used to hold the decription list. It stands for description lists
The <dt> is used to define the title of the description point. It stands for description title
The <dd> is used to hold the description data. It stands for description data
CSS will open is what improves the style of lists. So don't worry if your list looks a bit dull