- HTML Basics
- HTML Home
- HTML Basics
- HTML Document Structure
- HTML Data Types
- HTML Attributes
- HTML Fonts
- HTML Headings
- HTML Character Entities
- HTML Horizontal Line
- HTML Line Break
- HTML Paragraph
- HTML Citation Definition
- HTML Quotations
- HTML Comments
- HTML Styles
- HTML Formatting
- HTML CSS
- HTML Tags
- HTML Basic Tags
- HTML All Tags
- HTML Root Tags
- HTML Metadata Tags
- HTML Section Tags
- HTML Head Heading Tags
- HTML Flow Tags
- HTML Phrasing Tags
- HTML Embedded Tags
- HTML Interactive Tags
- HTML Meta Tags
- HTML Texts
- HTML Text Formatting
- HTML Physical Style Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML Arranging Text
- HTML Displaying Lists
- HTML List
- HTML Links Tables
- HTML Links URLs
- HTML Links
- HTML URL Encode
- HTML Tables
- HTML Images Colors
- HTML Images Colors
- HTML Images
- HTML Color Codes
- HTML Canvas
- HTML Backgrounds
- HTML Forms
- HTML Forms
- HTML Form Tag
- HTML Input Tag
- HTML Button Tag
- HTML Multiple-Choice
- HTML Select Tag
- HTML Option Tag
- HTML Optgroup Tag
- HTML Textarea Label
- HTML Fieldset Legend
- HTML Datalist Tag
- HTML Keygen Tag
- HTML Output Tag
- HTML Progress Tag
- HTML Meter Tag
- HTML Submit Form
- HTML enctype Attribute
- HTML action Attribute
- HTML Method Attribute
- HTML Get Method
- HTML Post Method
- HTML Interactive
- HTML Interactive Web
- HTML Details Summary
- HTML Menu Tag
- HTML Command Tag
- HTML KBD Tag
- HTML Time Tag
- HTML Multimedia
- HTML Multimedia
- HTML Multimedia Tags
- HTML Audio Video
- HTML Embedded Multimedia
- HTML EMBED Tag
- HTML OBJECT Tag
- HTML FIGURE FIGCAPTION
- HTML Advance
- HTML Blocks
- HTML Classes
- HTML Iframes
- HTML JavaScript
- HTML Layouts
- HTML Responsive
- HTML Test
- HTML Online Test
- Give Online Test
- All Test List
HTML Lists
HTML list helps us to display the information in the form of lists. There are the following three forms a list can be:
- Ordered Lists
- Unordered Lists
- Description Lists
HTML Ordered List
HTML ordered list starts with the <OL> tag and each items starts with the <LI> tag. Here is an example of the ordered list:
- codes
- cracker
- html
- list
- tutorial
- examples
Example
Here is an example of HTML lists, uses HTML ordered list:
<!DOCTYPE html> <html> <head> <title>HTML Lists Example</title> </head> <body> <ol> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ol> </body> </html>
Here is the sample output produced by the above HTML ordered list example code:

HTML Ordered List Type Attributes
A type attribute can be added to an ordered list, to define the type of the marker. The table given here list and describes the list of marker types used in ordered list.
Type | Description |
---|---|
type="1" | The list items will be numbered with numbers (default) |
type="a" | The list items will be numbered with lowercase letters |
type="A" | The list items will be numbered with uppercase letters |
type="i" | The list items will be numbered with lowercase roman numbers |
type="I" | The list items will be numbered with uppercase roman numbers |
Let's look at the following example (all in one) to make marker as of type 1, A, a, I, i.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ol type="1"> <li>html</li> <li>list</li> </ol> <ol type="A"> <li>html</li> <li>list</li> </ol> <ol type="a"> <li>html</li> <li>list</li> </ol> <ol type="I"> <li>html</li> <li>list</li> </ol> <ol type="i"> <li>html</li> <li>list</li> </ol> </body> </html>
Below is the sample output of the above HTML list example code:

HTML Unordered List
HTML unordered list starts with the <UL> tag and each items starts with the <LI> tag. Here is an example of unordered list.
- codes
- cracker
- html
- list
- tutorial
- examples
The list items will be marked with bullets (small black circles) by default
Example
Here is an example of HTML unordered list.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Following is the sample output of the above HTML unordered list example code:

HTML Unordered Lists Style Type Attributes
A style attribute can be added to an unordered list, to define the style of the marker. The table given below list and describes attributes of the HTML unordered list style type.
Style | Description |
---|---|
list-style-type:circle | The list items will be marked with circles |
list-style-type:disc | The list items will be marked with bullets (default) |
list-style-type:square | The list items will be marked with squares |
list-style-type:none | The list items will not be marked |
HTML Make Marker as Disc
Let's look at the following example to make marker as Disc:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:disc"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Since it is the default marker style, therefore you will watch the same output as of the above output:

HTML Make Marker as Circle
Let's look at the following example to make marker as Circle:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:circle"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Here is the sample output of the above HTML make marker as circle example code:

HTML Make Marker as Square
Let's look at the following example to make marker as Square:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:square"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
Here is the sample output of the above HTML make marker as square example code:

HTML Remove Marker from List
Let's look at the following example shows how to remove marker from the list:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul style="list-style-type:none"> <li>codes</li> <li>cracker</li> <li>html</li> <li>list</li> <li>tutorial</li> <li>examples</li> </ul> </body> </html>
It will display the following result:

HTML Description Lists
A description list, is a list of terms, with a description of each term.
The <DL> tag defines a description list, the <DT> tag defines the term (name), and the <DD> tag defines the data (description).
Here is an example uses description list in HTML:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <dl> <dt>html</dt> <dd>hyper text markup language</dd> <dt>list</dt> <dd>organized, unorganized, description list</dd> </dl> </body> </html>
Here is the sample output of the above HTML description list example code:

HTML Nested Lists
You are free to nest one list to another, also called as nested list. Here is an example shows how to use nested list in an HTML document.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> </head> <body> <ul> <li>html <ul> <li>list <ul> <li>list tutorial</li> <li>list example</li> </ul> </li> <li>list tag <ul> <li>list tag tutorial</li> <li>list tag examples</li> </ul> </li> </ul> </li> </ul> </body> </html>
Here is the sample output produced by the above HTML Nested list example code:

HTML Create Horizontal Lists
You can also create horizontal list in HTML using CSS. Here is an example shows how to create horizontal list in HTML:
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> <style> ul li{display:inline;} </style> </head> <body> <ul> <li>codes</li> - <li>cracker</li> - <li>html</li> - <li>list</li> - <li>tutorial</li> - <li>examples</li> </ul> </body> </html>
Below is the sample output of the above HTML horizontal list example code:

HTML Create Fancy or Interactive Horizontal Lists
With a little extra style, you can make the lists more fancy and interactive. Here is an example shows how to create fancy or interactive horizontal list in HTML.
<!DOCTYPE html> <html> <head> <title>HTML List Example</title> <style> ul { padding: 0; } ul li { display: inline; } ul li a { background-color: red; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0; line-height:50px; } ul li a:hover { background-color: white; color:red; } </style> </head> <body> <ul> <li><a href="http://codescracker.com/html">HTML</a></li> <li><a href="http://codescracker.com/js">JS</a></li> <li><a href="http://codescracker.com/css">CSS</a></li> <li><a href="http://codescracker.com/java">Java</a></li> <li><a href="http://codescracker.com/c">C</a></li> <li><a href="http://codescracker.com/cpp">CPP</a></li> </ul> </body> </html>
Here is the sample output produced by the above HTML Fancy or Interactive Horizontal list example code:

Here is the live demo output of the above fancy or interactive horizontal list example code.
Previous Page Next Page