Which tag is used to display unordered list in your document? *

UL [Unordered List]

An unordered list typically is a bulleted list of items. HTML 3.0 gives you the ability to customise the bullets, to do without bullets and to wrap list items horizontally or vertically for multicolumn lists.

The opening list tag must be

. It is followed by an optional list header [caption] and then by the first list item [
• ]. For example:
  Table Fruit
  • apples
  • oranges
  • bananas

  which could be rendered as:

  Table Fruit

  • apples
  • oranges
  • bananas

  Note: Some legacy documents may include headers or plain text before the first LI element. Implementors of HTML 3.0 user agents are advised to cater for this possibility in order to handle badly formed legacy documents.

  MENU and DIR elements

  These elements are superceded by extensions to the UL element. User agents are advised to continue to support them for the sake of legacy documents. Both MENU and DIR consist of one or more LI elements, similar to UL. MENU lists are typically rendered without bullets in a more compact style than UL. You can get the same effect with

  . DIR lists are used to present lists of items containing up to 20 characters each. Items in a DIR list are arranged in columns. You can get the same effect with
  .

  Permitted Attributes for the UL Element

  IDAn SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.LANGThis is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.CLASSThis a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.CLEARThis attribute is common to all block-like elements. When text flows around a figure or table in the margin, you sometimes want to start an element like a header, paragraph or list below the figure rather than alongside it. The CLEAR attribute allows you to move down unconditionally:
  
  clear=leftmove down until left margin is clearclear=rightmove down until right margin is clearclear=allmove down until both margins are clear

  Alternatively, you can decide to place the element alongside the figure just so long as there is enough room. The minimum width needed is specified as:
  
  

  clear="40 en"move down until there is at least 40 en units freeclear="100 pixels"move down until there is at least 100 pixels free

  The style sheet [or browser defaults] may provide default minimum widths for each class of block-like elements.

  PLAINThe presence of this attribute suppresses the display of bullets, e.g.
  .SRCSpecifies an image for use as a bullet. The image is specified as a URI. This attribute may appear together with the MD attribute.MDSpecifies a message digest or cryptographic checksum for the associated graphic specified by the SRC attribute. It is used when you want to be sure that a linked object is indeed the same one that the author intended, and hasn't been modified in any way. For instance, MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which specifies an MD5 checksum encoded as a base64 character string. The MD attribute is generally allowed for all elements which support URI based links.DINGBATSpecifies an iconic image for use as a bullet. The icon is specified as an entity name. A list of standard icon entity names for HTML 3.0 is given in an appendix of this specification, e.g. folder is the entity name for an icon denoting a directory or folder.WRAPThe WRAP attribute is used for multicolumn lists. Use wrap=vert if you want to arrange the list items down the page before wrapping to the next column. Use wrap=horiz if you want to arrange the items across the page [less useful]. The user agent is responsible for determining how many columns are appropriate.COMPACTThe presence of this attribute indicates the user agent should use reduced interitem spacing. In practice, there are several ways to increase the compactness of lists: reduced vertical interitem spacing, smaller font size, or even to avoid line breaks between items. This is best handled through associated style sheets and the class attribute.

  10 Lists

  Contents

  1. Introduction to lists
  2. Unordered lists [UL], ordered lists [OL], and list items [LI]
  3. Definition lists: the DL, DT, and DD elements
     1. Visual rendering of lists
  4. The DIR and MENU elements

  : The Unordered List element

  The

  HTML element represents an unordered list of items, typically rendered as a bulleted list.
  Content categoriesPermitted contentTag omissionPermitted parentsImplicit ARIA rolePermitted ARIA rolesDOM Interface

  Flow content, and if the element's children include at least one element, palpable content.

  Zero or more , and elements.

  None, both the starting and ending tag are mandatory.

  Any element that accepts flow content.

  list

  directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

  HTMLUListElement

  HTML Unordered List | HTML Bulleted List

  HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:

  • disc
  • circle
  • square
  • none

  To represent different ordered lists, there are 4 types of attributes in

  tag.
  TypeDescription

  Type "disc"	This is the default style. In this style, the list items are marked with bullets.
  Type "circle"	In this style, the list items are marked with circles.
  Type "square"	In this style, the list items are marked with squares.
  Type "none"	In this style, the list items are not marked .

  How to Make Lists in HTML

  In HTML, we can list items either in an ordered or unordered fashion.

  An ordered list uses numbers or some sort of notation that indicates a series of items.

  For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

  Here is an example of an ordered list with students' names and marks.

  Ordered list of students

  On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.

  Unordered TODO list

  There is one more type of list called a description list that we will learn as well below.

  Now let's get into a bit more detail and see how to create each type of list in HTML.

  How to create an unordered list in HTML ?

  In this article, we will know how to create an unordered list in HTML. An Unordered list

  tag in HTML is used to define the unordered list item in an HTML document. It contains the list items
  • element. The
    tag requires opening and closing tags.

    Syntax:

    List of items

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

    • compact: It will render the list smaller.
    • type: It specifies which kind of marker is used in the list.

    Note: The

    attributes are not supported by HTML 5.

    Example: This example illustrates the use of an unordered list by using the

    tag.
    
    
    
    
    HTML
    
    
    
    
    
    Unordered list Welcome To GeeksforGeeks Learning List of available courses Data Structures & Algorithm Web Technology Aptitude & Logical Reasoning Programming Languages

    Output:

    HTML Unordered list

    There are several list-type attributes that can be used with unordered list items.

    HTML

    • type Attribute: The
    • type attribute in HTML is used to specify the type of a list items. This attribute also defines the style of the bullet point of the list items.

    • Attribute Values:

      • disc: It is the default value. It creates a filled circle.
      • circle: It creates an unfilled circle.
      • square: It creates a filled square.

      Note: The

    • type attribute is not supported by HTML 5.

      Example: This example describes the HTML Unordered List.

      HTML

      
      

      
      
      

      How to define an unordered list GeeksforGeeks HTML5: How to define an unordered list? GeeksforGeeks courses List: Geeks Sudo Gfg Gate Placement

      Output:

      HTML Unordered list

      The HTML unordered list has various list item markers:

      Disc: It is used to set the list item marker to a bullet i.e default.

      Example 1: This example illustrates the use of an unordered list with a disc bullet by setting the list-style-type property to disc.

      HTML

      
      

      
      
      

      HTML ul tag GeeksforGeeks Unordered List with Disc Bullets GeeksforGeeks courses List: Geeks Sudo Gfg Gate Placement

      Output:

      Unordered list with disc list item marker

      Circle: It is used toset the list item marker to a circle.

      Example 2: In this example, we have used an unordered list with a circle bullet by setting the list-style-type property to circle.

      HTML

      
      

      
      
      

      GeeksforGeeks Unordered List with Circle Bullets GeeksforGeeks courses List: Geeks Sudo Gfg Gate Placement

      Output:

      Unordered list with circle list item marker

      Square: It is used to set the list item marker to a square.

      Example 3: In this example, we have used an unordered list with a square bullet by setting the list-style-type property to square.

      HTML

      
      

      
      
      

      GeeksforGeeks Unordered List with Square Bullets GeeksforGeeks courses List: Geeks Sudo Gfg Gate Placement

      Output:

      Unordered list with square list item marker

      none: It is used to set the list item marker with no mark.

      Example 4: This example illustrates the use of an unordered list with a no bullet by setting the list-style-type property to none.

      HTML

      
      

      
      
      

      GeeksforGeeks Unordered List with No Bullets GeeksforGeeks courses List: Geeks Sudo Gfg Gate Placement

      Output:

      Unordered list without list item marker

      Nested Unordered List: It is used to nest the list items i.e., list inside another list.

      Example: This example describes the use of the unordered list in a nested format.

      HTML

      
      

      
      
      

      GeeksforGeeks Nested Unordered List GeeksforGeeks courses List: DSA Array Linked List stack Queue Web Technologies HTML CSS JavaScript Aptitude Gate Placement

      Output:

      Nested Unordered lIst

      Supported Browsers:

      • Google Chrome 94.0 & above
      • Firefox 92.0 & above
      • Microsoft Edge 93.0
      • IE 11.0
      • Safari 14.1
      • Opera 78.0
      
      
      
      
      
      Article Tags :

      HTML

      Web Technologies

      Web technologies Questions

      HTML-Attributes

      HTML-Questions

      HTML-Tags
      Practice Tags :

      HTML
  Read Full Article

  HTML Lists

  In this tutorial you will learn how to create different types of lists in HTML.

  Video liên quan