HTML -

Trang chủ » Html5 Ul Tag » HTML -

    Tag - Tutorialspoint

Có thể bạn quan tâm

HTML - <ul> Tag Previous Next

Introduction to <ul>l Tag

The HTML <ul> tag is used to create an unordered list. Items in an unordered-list are displayed as bullets, which can take various forms, such as dots, a circles, or a squares.

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

Syntax

Following is the syntax of <ul> tag −

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

Attributes

The HTML <ul> tag supports Global and Event attributes. It also accepts some specific attributes, 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 for list items(Deprecated).

Example: Creating an Unordered List

In the following example, we create an unordered list in HTML to display related items in the default bullet format. This HTML code creates a webpage with a heading and an unordered list, displaying "HTML", "CSS", and "JavaScript".

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

Example: Different Bullet Styles

Here is another example of an unordered list. In this example, we use the type attribute to display the list of items in 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>

Example: Nested Unordered List

In the following example, we create a nested unordered list to display related items. This HTML code generates a webpage with a heading and a nested unordered list, showcasing various web development tools and technologies.

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