Open In App

HTML <ul> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will know the HTML <ul> Tag & its implementation. The <ul> tag in HTML is used to define the unordered list item in an HTML document. It contains the list items <li> element. The <ul> tag requires an opening and closing tag. By using CSS style you can easily design an unordered list.

Syntax: 

<ul> list of items </ul>

Accepted attribute: This tag contains two attributes which are listed below: 

Note: The <ul> attributes are not supported by HTML 5.

Example: In this example, we have created an unordered list of computer parts using the <ul> tag.

HTML




<!DOCTYPE html>
<html>
 
<body>
  <h2>Welcome To GeekforGeeks</h2>
  <ul>
    <li>Mouse</li>
    <li>Keyboard</li>
    <li>Speaker</li>
    <li>Monitor</li>
  </ul>
</body>
 
</html>


Output:

HTML Unordered List

Example 1: This example describes the Unordered List in HTML.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>HTML ul tag</title>
</head>
 
<body>
  <h1>GeeksforGeeks</h1>
  <h2>HTML ul tag</h2>
   
<p>GeeksforGeeks courses List:</p>
 
  <ul>
    <li>Geeks</li>
    <li>Sudo</li>
    <li>Gfg</li>
    <li>Gate</li>
    <li>Placement</li>
  </ul>
</body>
 
</html>


Output:

HTML Unordered List

Example 2: Nested unordered list, a list inside other lists is known as a nested list.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Nested unordered list</title>
</head>
 
<body>
  <h2>Welcome To GeeksforGeeks</h2>
  <ul>
    <li>Hardware</li>
    <li>
      Software
      <ul>
        <li>System Software</li>
        <li>Application Software</li>
      </ul>
    </li>
    <li>MacBook</li>
  </ul>
</body>
 
</html>


Output:

Nested Unordered List

Example 3: Complex nested unordered list.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Nested unordered list</title>
</head>
 
<body>
  <h2>Welcome To GeeksforGeeks</h2>
  <ul>
    <li>Hardware</li>
    <li>
      Software
      <ul>
        <li>System Software</li>
        <li>Application Software</li>
        <ul>
          <li>Skype</li>
          <li>Slack</li>
        </ul>
        <li>Microsoft suite of products</li>
        <ul>
          <li>Office</li>
          <li>Excel</li>
          <li>Word</li>
          <li>Powerpoint</li>
        </ul>
      </ul>
    </li>
    <li>MacBook</li>
  </ul>
</body>
 
</html>


Output:

Complex Nested Unordered List

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Microsoft Edge 12 and above
  • Firefox 1 and above
  • Safari
  • Opera


Last Updated : 01 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads