0% found this document useful (0 votes)
26 viewsLecture 8 - HTML Lists
HTML offers three list types - unordered lists using <ul> with bullet points, ordered lists using <ol> with numbers, and definition lists using <dl> to define terms and their definitions. Lists contain list items <li>. Unordered and ordered lists can specify the bullet/number style using type and start attributes. Definition lists pair terms <dt> with descriptions <dd>.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 viewsLecture 8 - HTML Lists
HTML offers three list types - unordered lists using <ul> with bullet points, ordered lists using <ol> with numbers, and definition lists using <dl> to define terms and their definitions. Lists contain list items <li>. Unordered and ordered lists can specify the bullet/number style using type and start attributes. Definition lists pair terms <dt> with descriptions <dd>.
Uploaded by
Tanveer Ahmed HakroCopyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
/ 36
HTML Lists
Dr. Fareed Ahmed Jokhio
HTML Lists
• HTML offers web authors three ways for
specifying lists of information.
• All lists must contain one or more list
elements.
• Lists may contain:
HTML Lists
• <ul> - An unordered list.
– This will list items using plain bullets.
• <ol> - An ordered list.
– This will use different schemes of numbers to list
your items.
• <dl> - A definition list.
– This arranges your items in the same way as they
are arranged in a dictionary.
HTML Unordered Lists
• An unordered list is a collection of related
items that have no special order or sequence.
• This list is created by using HTML <ul> tag.
• Each item in the list is marked with a bullet.
HTML Unordered Lists
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul>
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
HTML Unordered Lists
The type Attribute
• You can use type attribute for <ul> tag to
specify the type of bullet you like.
• By default it is a disc.
• Following are the possible options:
• <ul type="square">
• <ul type="disc">
• <ul type="circle">
The type Attribute
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul type="square">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ul type="disc">
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul type="disc">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ul type="circle">:
• <html>
• <head>
• <title>HTML Unordered List</title>
• </head>
• <body>
• <ul type="circle">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ul>
• </body>
• </html>
The type Attribute
• This will produce following result:
HTML Ordered Lists
• If you are required to put your items in a
numbered list instead of bulleted list then
HTML ordered list will be used.
• This list is created by using <ol> tag.
• The numbering starts at one and is
incremented by one for each successive
ordered list element tagged with <li>.
HTML Ordered Lists
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol>
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
HTML Ordered Lists
• This will produce following result:
The type Attribute
• You can use type attribute for <ol> tag to
specify the type of numbering you like.
• By default it is a number.
• Following are the possible options:
The type Attribute
• <ol type="1"> - Default-Case Numerals.
• <ol type="I"> - Upper-Case Roman Numerals.
• <ol type="i"> - Lower-Case Roman Numerals.
• <ol type="a"> - Lower-Case Letters.
• <ol type="A"> - Upper-Case Letters.
The type Attribute
• Following is an example where we used <ol type="1">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="1">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ol type="I">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="I">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ol type="i">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="i">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ol type="A">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="A">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The type Attribute
• This will produce following result:
The type Attribute
• Following is an example where we used <ol type="a">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="a">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The type Attribute
• This will produce following result:
The start Attribute
• You can use start attribute for <ol> tag to
specify the starting point of numbering you
need.
• Following are the possible options:
The start Attribute
• <ol type="1" start="4"> - Numerals starts with
4.
• <ol type="I" start="4"> - Numerals starts with
IV.
• <ol type="i" start="4"> - Numerals starts with
iv.
• <ol type="a" start="4"> - Letters starts with d.
• <ol type="A" start="4"> - Letters starts with D.
The start Attribute
• Following is an example where we used <ol type="i" start="4">
• <html>
• <head>
• <title>HTML Ordered List</title>
• </head>
• <body>
• <ol type="i" start="4">
• <li>Beetroot</li>
• <li>Ginger</li>
• <li>Potato</li>
• <li>Radish</li>
• </ol>
• </body>
• </html>
The start Attribute
• This will produce following result
HTML Definition Lists
• HTML and XHTML support a list style which is
called definition lists where entries are listed
like in a dictionary or encyclopedia.
• The definition list is the ideal way to present a
glossary, list of terms, or other name/value
list.
HTML Definition Lists
• Definition List makes use of following three
tags.
• <dl> - Defines the start of the list
• <dt> - A term
• <dd> - Term definition
• </dl> - Defines the end of the list
HTML Definition Lists
• <html>
• <head>
• <title>HTML Definition List</title>
• </head>
• <body>
• <dl>
• <dt><b>HTML</b></dt>
• <dd>This stands for Hyper Text Markup Language</dd>
• <dt><b>HTTP</b></dt>
• <dd>This stands for Hyper Text Transfer Protocol</dd>
• </dl>
• </body>
• </html>
HTML Definition Lists
• This will produce following result:
