HTML Lists CS 1150 Fall 2016 Types of

HTML Lists CS 1150 Fall 2016

Types of Lists • Ordered lists are lists where each item in the list is numbered • Unordered lists are lists that begin with a bullet point (rather than characters that indicate order) • Definition lists are made up of a set of terms along with the definitions for each of those terms

The <li> element • Each item in a list is placed between an opening <li> tag and a closing </li> tag (the li stands for list item) • Browsers indent lists by default • The different types of lists are created with <ol> (ordered list), <ul> (unordered list), and <dl> (definition list)

Ordered Lists • The ordered list is created with the <ol> element • Each item in the list is placed between an opening <li> tag and a closing </li> tag • Example: https: //cs. mtsu. edu/~crn 2 k/public/courses/1150/ordered_list. html

Unordered Lists • The unordered list is created with the <ul> element • Each item in the list is placed between an opening <li> tag and a closing </li> tag • Example: https: //cs. mtsu. edu/~crn 2 k/public/courses/1150/unordered_list. html

Definition Lists • The definition list is created with the <dl> element • Inside the <dl> elements you will usually see pairs of <dt> and <dd> elements • • <dt> is used to contain the term being defined <dd> is used to contain the definition • Example: https: //cs. mtsu. edu/~crn 2 k/public/courses/1150/definition_list. html

Nested Lists • You can put a second list inside a <li> element to create a sub-list or nested list • Browsers display nested lists indented further than the parent list • In nested unordered lists, the browser will usually change the style of the bullet point too • Example: https: //cs. mtsu. edu/~crn 2 k/public/courses/1150/nested_list. html