Web page content must be readable and understandable for the visitors. We have already learned to use paragraphs and headings to organize the text. HTML Lists allow you to present the text content as lists with numbers or bullets. This is a convenient way to manage the related text like a list of components, features of products, etc.
HTML lists also allow the application of similar formatting and styles to the list data.
Features of HTML Lists
- Lists contain similar kinds of data values.
- Lists are either bulleted or numbered.
- All the HTML lists contain the values or text strings called List Elements identified by tag <LI></LI>. All the list elements have to be added within the List tags.
- Formatting can be applied to all the list elements at the List level.
- Lists are used to add readability to information.
- They are also used to highlight the collection of important values on a webpage.
Types of HTML Lists
There are three types of HTML Lists for different needs in a website
- Ordered Lists- The lists where the list elements are displayed with numbers increasing in sequence. You can choose the numbers as integers, Roman numbers, or alphabets.
- Unordered Lists- The lists where the list elements are displayed with bullets. You can choose circular, square, or disk bullets.
- Definition Lists- The lists where the elements are represented as terms and their definitions.
HTML Lists Element Attributes
The ordered lists and unordered lists contain List Elements. Let’s discuss the attributes of the list elements.
ID
This attribute is used to give identification to a list element. The value allowed is an alphanumeric string. The ID value should be unique for a web page. This ID can be used in a script to manipulate it.
CLASS
This attribute is used to associate a list element with a class defined in a style sheet associated with the page or website. The style sheet element specifies the consistent style for multiple elements in a web page.
STYLE
If you want to add additional styling to a list element, a style attribute is used. You can set styles in a string form with CSS element and value pairs separated by semicolons.
TITLE
The Title attribute is used to set tooltip text for a list element. When the user rests the mouse cursor on the list element, a value assigned to the TITLE attribute appears in a small outlined box.
DIR
DIR means direction. This attribute is used to set the direction of the non aligned list element. Possible values are LTR for left to right or RTL for right to left.
TYPE
This attribute is used to define the type of list element. Choose from Square, Circle, or Disc (default) for an unordered list. Choose from A(uppercase alphabet), a(lowercase alphabet), I(Big Roman numbers), i(Small Roman Numbers), or 1(numbers, default) for ordered list.