- HTML Tutorial
- HTML - Home
- HTML - History and Evolution
- HTML - Overview
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Formatting
- HTML - Headings
- HTML - Paragraphs
- HTML - Quotations
- HTML - Comments
- HTML - Phrase Tags
- HTML - Meta Tags
- HTML - Style Sheet
- HTML - CSS Classes
- HTML - CSS IDs
- HTML - Images
- HTML - Image Map
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML - Iframes
- HTML - Blocks
- HTML Backgrounds
- HTML - Backgrounds
- HTML Colors
- HTML - Colors
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Code Builder
- HTML References
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <ul> Tag
An unordered list(ul) is used for grouping a collection of items that do not have a numerical ordering. Unordered-list items are displayed as bullets, that can be in various forms, like a dot, a circle, or a square. The unordered list contains the multiple <li> tags inside the <ul></ul> tag to represent an items in the list.
Following is the list of global attributes that you can use within the <ul> tag to display the list of items in different bullet styles −
- compact − It is the Boolean attribute that indicates that an unordered list should be presented in a compact style.
- type − This attribute sets the different bullet styles of the list items.
The type attribute has various bullet formats as follows −
- type ='circle' − for the circle bullet format.
- type ='square' − for the square bullet format.
- type ='disc' − for the number bullet format.
The unordered list includes the global attributes. The global attributes are attributes common to all HTML elements, they can be used on all elements, though they may not affect some elements.
Syntax
Following is the syntax of the <ul> tag −
<ul>.....</ul>
Example
In the following example, we are creating an unordered list in HTML to display the related items of the list in the default bullet format.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Unordered lists</title> </head> <body> <!--create an unordered list--> <ul> <li>RED</li> <li>BLACK</li> <li>GREEN</li> </ul> </body> </html>
When we run the above code, it will generate an output consisting of the list items displayed on the webpage.
Example
Following is another example of the unordered list. Here, we are using the type = ‘square’ attribute to display the list of items in the square bullet formats.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Unordered lists</title> </head> <body> <!--create an unordered list--> <ul type="square"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul> </body> </html>
On running the above code, the output window will pop up, consisting of list items displayed as square format on the webpage.
Example
In this example, we are creating an unordered list and using the type = ‘circle’ attribute within the <ul> tag to display the list of items in the circle bullet format.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Unordered lists</title> </head> <body> <!--create an unordered list--> <ul type="circle"> <li>Raman</li> <li>Kritika</li> <li>Rahul</li> <li>Aman</li> </ul> </body> </html>
When we run the above code, it will generate an output displaying the list items with a circle format on the webpage.
Example
In this program, we are creating an unordered list and giving the type attribute value as "disc" to display the list items in the bullet format.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Unordered lists</title> </head> <body> <!--create an unordered list--> <ul type="disc"> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li> </ul> </body> </html>
On running the above code, it will generate an output displaying the list items with a disc format on the webpage.
Example
In the following example, we are creating the nested unordered list to display the related items of the lists.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Unordered lists</title> </head> <body> <!--create an unordered nested lists--> <ul type="disc"> <li>Fruits</li> <ul type="circle"> <li>Apple</li> <li>mango</li> </ul> <li>Colors</li> <ul type="square"> <li>Red</li> <li>Blue</li> </ul> </ul> </body> </html>
When we run the above code, it will generate an output displaying the nested list items on the webpage.
To Continue Learning Please Login
Login with Google