HTML -

Trang chủ » Html5 Ul Tag » HTML -

    Tag - Tutorialspoint

Có thể bạn quan tâm

HTML - <ul> Tag Previous Next

HTML <ul> tag is used to create an unordered list. Unordered-list items are displayed as bullets, that can be in various forms, like a dot, a circle, or a square.

An unordered list(ul) is used for grouping a collection of items that do not have a numerical ordering. The unordered list contains the multiple <li> tags that used to create list items.

Syntax

<ul> ..... </ul>

Attribute

HTML ul tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed below.

Attribute Value Description
compact compact Specifies that an unordered list should be presented in a compact style(Deprecated).
type disccirclesquare Specifies the different bullet styles of the list items(Deprecated).

Examples of HTML ul Tag

Bellow examples will illustrate the usage of ul tag. Where, when and how to use ul tag. How to create nested uonordered list as well.

Creating an Unordered List

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 ul Tag</title> </head> <body> <!-- Creating an Unordered list--> <h3> List of technologies for Basic Web Development </h3> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>

Creating different Bullets of Unordered List

Following is another example of the unordered list. Here, we are using the type attribute to display the list of items in the different bullet formats.

<!DOCTYPE html> <html lang="en"> <head> <title>HTML ul Tag</title> </head> <body> <!-- Creating an Unordered list--> <h3>Default or Disc Unordered List</h3> <ul type="disc"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h3>Cicle Unordered List</h3> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h3>Square Unordered List</h3> <ul type="square"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </body> </html>

Nested Unordered List

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 ul Tag</title> </head> <body> <!-- Creating an Unordered Nested list--> <h3>List of Tools and Technologies for Web Development</h3> <ul type="disc"> <li>HTML</li> <li>CSS <ul> <li>Bootstrap / Tailwind CSS</li> <li>SASS / LESS</li> </ul> </li> <li>JavaScript <ul> <li>ReactJS</li> <li>NodeJS</li> </ul> </li> </ul> </body> </html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
ul Yes Yes Yes Yes Yes
html_tags_reference.htm Print Page Previous Next Advertisements

Từ khóa » Html5 Ul Tag