Select Page

The Unordered List, ul tag, in HTML5


There are basically four types of markers used to list unordered list.


nanadwumor

May 20, 2023

HTML5 - tag


  • <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
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 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
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


Join Other Subscribers on Our YouTube Channel and Don’t Miss a thing!


For example,

Output

ul html tag example

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.

Output

ul tag type

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. 

Output

</p>
<ul> html tag example

Example 2: The value of type is set to square. This changes the marker to square.

Output

</p>
<ul> tag type square

Example 3: The value of type is set to circle. This changes the marker to circle.

Output

</p>
<ul> html tag type circle

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.

Output

</p>
<ul> tag type none

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.

Output

ul tag type

You May Also Like…




0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *