Skip to content
Related Articles

Related Articles

Improve Article

HTML <ul> Tag

  • Last Updated : 14 Sep, 2021

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:

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>

Attribute: This tag contains two attributes which are listed below: 

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

Example 1: 

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: 
 

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:

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:

Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :