: The Unordered List element
The HTML element represents an unordered list of items, typically rendered as a bulleted list.
Flow content, and if the
|
| Zero or more |
| None, both the starting and ending tag are mandatory. |
| Any element that accepts flow content. |
| list |
| directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree |
| HTMLUListElement |
10 Lists
Contents
- Introduction to lists
- Unordered lists [UL], ordered lists [OL], and list items [LI]
- Definition lists: the DL, DT, and DD elements
- Visual rendering of lists
- The DIR and MENU elements
HTML Unordered List | HTML Bulleted List
HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
- disc
- circle
- square
- none
To represent different ordered lists, there are 4 types of attributes in
- tag.
- Coffee
- Tea
- Milk
- Ordered List
- Unordered list
- Definition List
- Baking Powder
- Flour
- Sugar
- Coco poder
- Lion
- Tiger
- Giraffe
- Camel
- Johny Johny Yes papa
- Wheels on the Bus
- Baa Baa Black Sheep
- Avacado
- Orange
- Pears
- Banana
- type =’disc’ – Gives default bullet structure
- type =’square’ – Looks like solid box bullets
- type =’circle’ – Gives Hollow box structure
- This is Program Agenda.
- First a Welcome Note
- Second We Start with the talks
- First a Welcome Note
- Opening Speech
- Mrs.Claria Winston from Ireland and Eyjolfur From Bank of America.
- Tea Break
- Last part from the topic Data Lake By Surendran Thomas.
- World Of the wars
- Mission Impossible
- Independence Day special
- Behind enemy lines
- Redmi Xiami
- Iphone
- Samsung
- Nokia
- Android
- Windows phone
- Samsung
- Nokia
- Finland is a Scandinavian Country
- Oslo is the capital city
- Iceland is known for its beauty , hiking, fishing
- Ranked among the chillness country in europe
- Harry
- Hermione
- Ron Weasely
- HTML Blocks
- HTML List Styles
- Basic HTML Tags
- HTML Commands
- Physics
- Chemistry
- Mathematics
- Physics
- Chemistry
- Mathematics
- , ,,
- ,
- Html Form MCQs
- Html Headings MCQs
| Type "disc" | This is the default style. In this style, the list items are marked with bullets. |
| Type "circle" | In this style, the list items are marked with circles. |
| Type "square" | In this style, the list items are marked with squares. |
| Type "none" | In this style, the list items are not marked . |
HTML Lists
In this tutorial you will learn how to create different types of lists in HTML.
In HTML Attributes
- HTML TagWhat does
- do?Was used to set list types.
HTML Unordered Lists
The HTML
- tag defines an unordered
[bulleted] list.
HTML
Tag
Example
An unordered HTML list:
More "Try it Yourself" examples below.
Introduction to HTML Unordered List
Lists in HTML are a concept of gathering a number of data or elements arranged in a specific order organized for the purpose of being used in the program execution. HTML uses three types of lists, namely Ordered List, Unordered List and Definition List, where Unordered List is a type of list where the data or elements can be arranged in the list in no specific order. The syntax for the HTML Unordered List is
- ………..
- is the tag that indicates the unordered list type.
The three types of lists we could use to bring order to the web pages. Below are the different types:
Start Your Free Software Development Course
Web development, programming languages, Software testing & others
In this article, we shall go through the unordered list specification with an example. The unordered list is a list that doesn’t require any order of numbering in their list; instead, we use bullets for the list levels.
Syntax ofHTML Unordered List
The syntax for the unordered list is similar to the ordered list we created in the previous article. Unordered list is created using an element named
- element and ends with
- element.
………..
Example #1
This shows how this short item list is implemented in a browser.
Demo on Unordered list
Demo on Unordered list
Ingredients for making of cake
Popular Course in this category
4.5 [8,343 ratings]Course Price
View CourseRelated CoursesBootstrap Training [2 Courses, 6+ Projects]XML Training [5 Courses, 6+ Projects]CSS Training [9 Courses, 9+ Projects]
4.5 [8,343 ratings]
View Course
Output:
This will give you the result like
Example #2
Unordered List with colors and for the positions.
unordered list Demo2
Unordered Disc
Top Rhymes
Fruits Name List
Output:
Types of Attributes for HTML Unordered List
To figure the unordered list, there are three primary types of attributes for this unordered element. The unordered list is used where it is not required to represent the lists in any specific orders. The following sections explain the related attributes and examples of them.
This attribute gives the type of bullets to be used in the list.
1. Attribute type=’disc.’
This is the default type, and all the items are marked as bullets. Here we use type attribute, and all these attributes support in HTML 3, To define under HTML5, we are supposed to implement list-style CSS. Here is an example demo.
Example:
Demo on Unordered list Types
Demo on Unordered list Types
Output:
2. Attribute type=’square.’
Here the items are marked with Square bullets.
Example:
Demonstrating the HTML code with the square bullet embedded with style color and the position.
ul {
list-style: square;
}
ul li::before {
content: "\1022";
color: pink;
font-weight: bold;
display: inline-block;
width: 0.8em;
margin-left: -1em;
}
List of top hollywood movies-Square
Output:
3. Attribute type=’circle.’
This attribute gives hollow bullet values. Below are the example rendering circle and square attribute together with the nested lists.
Example:
EDUCBA List Example
;style>
h3{
color:orange;
}
ul{
list-style: none;
}
ul li::before {
content: "\25AA";
color: brown;
display: inline-block;
width: 1em;
margin-left: -0.8em;
font-weight: bold;
font-size:1rem;
}
List of Mobiles
Mobile Operating System Supports
Output:
Replacing HTML list Items with Customizable Images
This would ultimately enhance the overall theme and makes the website visually good. The default bullets are replaced by native style or even can customizable using images with CSS help. Actually speaking, there are three styling lists to be used in HTML. Here we go with a list-style-type and list-style-image.
Using image bullet is to make the lists more unique and differentiate the information by type, Giving the presentation a look on the web page.
In the below example, the examples are demonstrated by style properties between the list elements.
Example #1 – Style properties between the list elements
HTML unordered list with Styles
ul li {
background: red;
}
ul.in.li {
list-style: circle inside none;
color: red;
left: -20px;
position: inside;
text-align: left;
width: 27px;
}
Output:
This will give out the output like
Example #2 – With image style
ul {
list-style-image: url['sqpurple.gif'];
}
The list-style- Demo
Harry Potter Characters:
Output:
Conclusion
Now that we come across how to build unordered lists in HTML. We have seen how the unordered block element plays a role in creating web pages with different examples and explored some list features. Even this can be used in navigation menus to display vertically. The creation of an Unordered list is very simple; it is key important to consider where to fix this approach for the best bit place. In other words, the perfect document prefers to use an HTML list format.
Recommended Articles
This has been a guide toHTML Unordered List. Here we discuss the syntax and types of attributes forHTML Unordered List with examples. You may also have a look at the following articles to learn more–
HTML Training [12 Courses, 19+ Projects, 4 Quizzes]
12 Online Courses
19 Hands-on Projects
89+ Hours
Verifiable Certificate of Completion
Lifetime Access
4 Quizzes with Solutions
Learn More
HTML List MCQs
HTML List MCQs : This section focuses on "Lists" in Html. These Multiple Choice Questions [mcq] should be practiced to improve the Html skills required for various interviews [campus interview, walk-in interview, company interview], placement, entrance exam and other competitive examinations.
1.Which one of the following is a type of lists that HTML supports?
A. Ordered lists.
B. Unordered lists.
C. Description lists.
D. All of the above
View Answer
Explanation: All the three are types of lists in HTML.
2.By which tag, an unordered list is represented?
A.
B.
C.
D.
View Answer
Explanation:
- tag is for unordered list. is for underline.
3.By which tag, an ordered list is represented?
A.
B.
C.
D.
View Answer
Explanation:
- tag is for an ordered list.
4.Below there is a HTML code.
Fill in the blanks in the above HTML code with a suitable option so as to get the list as follows when executed in a browser.
A. style="list-style-type:square;"
B. style="list-type:square;"
C. style="type:square;"
D. style= "style:square;"
View Answer
Explanation: In order to determine the type of item marker in an unordered list of HTML, list-style-type is used.
5..Fill in the blanks with a suitable option in order to number items of an ordered list with small roman numbers.
A. style= "type:i"
B. style= "list-style-type:i"
C. type= "i"
D. type= "small roman"
View Answer
Explanation: In the ordered list of HTML, type= "i" is used to number the ordered list with small roman numbers.
6.In order to start a list from 10, what attribute should be added in the opening tag of ordered list?
A. begin= "10"
B. start= "10"
C. style= "begin:10"
D. style= "start:10"
View Answer
Explanation:
- will start numbering the items in the list from 10.
7.A HTML code is given below
Fill in the blanks with appropriate option to get the output as below:
A. ,,,
B. ,,,
C.
D. ,,
View Answer
Explanation: This option will give the required output. Here is the description term and
is used to describe the description term.8.In order to get a list without any item marker, which one of the following can be used?
A.
B.
C.
D.
View Answer
Explanation: This option will remove the item marker and will simply display the elements of the list without them.
9.What is the default start of item marker in ordered list?
A. 1
B. i
C. I
D. None of the above
View Answer
Explanation: If the ordered list is written without any attribute, e.g
- , the list will start from 1 by default.
10.What is the default item marker in unordered lists of HTML?
A. Circle
B. Marker
C. disc
D. None of the above
View Answer
Explanation: By default, the unordered list has disc as its item marker.
Also check :
* You must be logged in to add comment.