HTML Tutorial
HTML References
HTML Resources
Selected Reading
- HTML - Layouts
- HTML - Javascript
- HTML - Style Sheet
- HTML - Header
- HTML - Marquees
- HTML - Embed Multimedia
- HTML - Forms
- HTML - Fonts
- HTML - Colors
- HTML - Backgrounds
- HTML - Blocks
- HTML - Iframes
- HTML - Frames
- HTML - Email Links
- HTML - Image Links
- HTML - Text Links
- HTML - Lists
- HTML - Tables
- HTML - Images
- HTML - Comments
- HTML - Meta Tags
- HTML - Phrase Tags
- HTML - Formatting
- HTML - Attributes
- HTML - Elements
- HTML - Basic Tags
- HTML - Overview
- HTML - Home
HTML References
- HTML - Deprecated Tags
- HTML - Character Encodings
- Language ISO Codes
- HTML - URL Encoding
- MIME Media Types
- HTML - Events Ref
- HTML - Fonts Ref
- HTML - Entities
- HTML - Color Names
- ASCII Table Lookup
- HTML - ASCII Codes
- HTML - Fonts Reference
- HTML - Events Reference
- HTML - Attributes Reference
- HTML - Tags Reference
HTML Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML - Lists
HTML - Lists
HTML offers web authors three ways for specifying psts of information. All psts must contain one or more pst elements. Lists may contain −
<ul> − An unordered pst. This will pst items using plain bullets.
<ol> − An ordered pst. This will use different schemes of numbers to pst your items.
<dl> − A definition pst. This arranges your items in the same way as they are arranged in a dictionary.
HTML Unordered Lists
An unordered pst is a collection of related items that have no special order or sequence. This pst is created by using HTML <ul> tag. Each item in the pst is marked with a bullet.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ul>
</body>
</html>
This will produce the following result −
The type Attribute
You can use type attribute for <ul> tag to specify the type of bullet you pke. By default, it is a disc. Following are the possible options −
<ul type = "square"> <ul type = "disc"> <ul type = "circle">
Example
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ul>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ul type = "disc"> −
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ul>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ul type = "circle"> −
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ul>
</body>
</html>
This will produce the following result −
HTML Ordered Lists
If you are required to put your items in a numbered pst instead of bulleted, then HTML ordered pst will be used. This pst is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered pst element tagged with <p>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you pke. By default, it is a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals. <ol type = "I"> - Upper-Case Numerals. <ol type = "i"> - Lower-Case Numerals. <ol type = "A"> - Upper-Case Letters. <ol type = "a"> - Lower-Case Letters.
Example
Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ol type = "A" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
Example
Following is an example where we used <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the 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 −
<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.
Example
Following is an example where we used <ol type = "i" start = "4" >
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<p>Beetroot</p>
<p>Ginger</p>
<p>Potato</p>
<p>Radish</p>
</ol>
</body>
</html>
This will produce the following result −
HTML Definition Lists
HTML and XHTML supports a pst style which is called definition psts where entries are psted pke in a dictionary or encyclopedia. The definition pst is the ideal way to present a glossary, pst of terms, or other name/value pst.
Definition List makes use of following three tags.
<dl> − Defines the start of the pst
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the pst
Example
<!DOCTYPE html>
<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>
This will produce the following result −
Advertisements