There are basically four types of markers used to list unordered list.
nanadwumor
- <ul> tag in html is used to list items in no particular order
- The <ul> tag lists items and they are marked with bullets
- the type attribute of <ul> is deprecated in html5.
RECOMMENDED ARTICLES
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name of the web page. An absolute reference or url contains all the information necessary to locate a resource or target A relative reference does not...
Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That's, immediately after ending on a horizontal space, next block element goes to nest line. A block level element is like a container. It can contain other elements. Examples of...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers. It also has pretty good developer tools. We recommend you use this browser to learn HTML5 Chrome Firefox Opera Apple Safari...
The <ul> tag is used for unordered list. That’s, it is used to list items that are not in any particular order.
The <ul> tag lists items and they are marked with bullets (small black circles) by default.
Syntax
|
1 2 3 4 5 |
<ul> <li>...</li> <li>...</li> <li>...</li> </ul> |
Join Other Subscribers on Our YouTube Channel and Don’t Miss a thing!
For example,
|
1 2 3 4 5 6 |
<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Attributes of <ul>
type
The type attribute shows the type of marker or bullet to use, whether it’s disc, square, circle or none. For example, this example uses a square bullet.
|
1 2 3 4 5 6 |
<ul type="square"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Markers of <ul> tag
The marker is the symbol that precedes each item in the list. There are basically four types of markers used to list unordered list. These are:
disc – This is the default style. Items in the list are marked with bullets.
circle – list items are marked with circles.
square – list items are marked with squares.
none – list items are not marked
Example 1: The markers or bullets are black disc shapes by default.
|
1 2 3 4 5 6 |
ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Example 2: The value of type is set to square. This changes the marker to square.
|
1 2 3 4 5 6 |
<ul type="square"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Example 3: The value of type is set to circle. This changes the marker to circle.
|
1 2 3 4 5 6 |
<ul type="circle"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Example 4: The value of type is set to none. This changes the marker to none. In other words, there will be no marker in front of the items in the list.
|
1 2 3 4 5 6 |
<ul type="none"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
Unfortunately, the type attribute is deprecated in HTML5. That’s, it’s not supported in HTML5. The reason is that HTML5 places emphasis on the fact that HMTL should be about structure of the page while CSS adds the style or cosmetics. Instead of using the type attribute of the <ul> tag, use the CSS list-style-type property.
Using CSS
If you want to change the type of the bullet or marker in <ul>, use CSS. HTML5 encourages the separation of structure (HTML) from style (CSS). Therefore, some HTML tags or attributes that add styles or appear to work like CSS are deprecated. The type attribute of the <ul> tag is one of these HTML attributes abandoned in HTML5.
The CSS property, list-style-type, is used to change the bullet type.
|
1 2 3 4 5 6 |
ul style="list-style-type : square"> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> </ul> |
Output
You May Also Like…
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name...
Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That's, immediately after...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it...
0 Comments