HTML Lists
1.Unordered Lists
2.Ordered Lists
3.Definition Lists
4.Nested Lists
Unordered Lists
An Unordered lisat is a list of items.
The list items are marked with bullets.
An unordered list starts with the <ul> tag
Each list item starts with <li> tag
<html>
<body>
<h4>An unordered List:</h4>
<ul>
<li>coffee</li>
<li>Tea</li>
<li>milk</li>
</ul>
</body>
</html>
Inside a line item you can put paragraphs, line breaks, images,links, other lists, and so on.
you can display different kinds of bullets in an unorderd list by using the type attribute.
<html>
<body>
<h4> Disc bullets list:</h4>
<ul type=''disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4> Circle bullets list:</h4>
<ul type=''circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4> Square bullets list:</h4>
<ul type=''square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
</body>
</html>
Ordered Lists
the list items are numbered sequencially
An orderedlist starts with <ol> tag
Each list item starts with <li> tag
<html>
<body>
<h4>An ordered list:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>milk</li>
</ol>
</body>
</html>
Defferent Types of Ordering
<html>
<body>
<h4> Letters list list:</h4>
<ol type=''A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4> Lowercase letters list:</h4>
<ol type=''a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
<html>
<body>
<h4> Roman numbers list::</h4>
<ol type=''I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4> Lower Roman numbers list:</h4>
<ol type=''i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
Defination Lists
A definition list is not a list of single items.
It is a list of items/terms, together with a description of each item/term
A defination list starts with a <dl> tag(definition list).
Each term starts with a <dt>tag(definition term)
Each description starts with a <dd> tag(definition description)
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
<dl>
</body>
</html>
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other links, and so on.
Nested Lists
Lists within another list
second list is indented another level and the item markars will appear differently than the original list,
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffeee</li>
<li>tea
<ul>
<li>black tea</li>
</li>green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffeee</li>
<li>tea
<ul>
<li>black tea</li>
</li>green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
List Tags
TAG Description
<ol> Defines an ordered list
<ul> Defines an unorderd list
<li> Defines a list item
<dl> Defines a defination list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<dir> Deprecated. Use <ul>instead
<menu> Deprecated. Use<ul>instead
1.Unordered Lists
2.Ordered Lists
3.Definition Lists
4.Nested Lists
Unordered Lists
An Unordered lisat is a list of items.
The list items are marked with bullets.
An unordered list starts with the <ul> tag
Each list item starts with <li> tag
<html>
<body>
<h4>An unordered List:</h4>
<ul>
<li>coffee</li>
<li>Tea</li>
<li>milk</li>
</ul>
</body>
</html>
Inside a line item you can put paragraphs, line breaks, images,links, other lists, and so on.
you can display different kinds of bullets in an unorderd list by using the type attribute.
<html>
<body>
<h4> Disc bullets list:</h4>
<ul type=''disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4> Circle bullets list:</h4>
<ul type=''circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
<h4> Square bullets list:</h4>
<ul type=''square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ul>
</body>
</html>
Ordered Lists
the list items are numbered sequencially
An orderedlist starts with <ol> tag
Each list item starts with <li> tag
<html>
<body>
<h4>An ordered list:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>milk</li>
</ol>
</body>
</html>
Defferent Types of Ordering
<html>
<body>
<h4> Letters list list:</h4>
<ol type=''A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4> Lowercase letters list:</h4>
<ol type=''a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
<html>
<body>
<h4> Roman numbers list::</h4>
<ol type=''I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
<h4> Lower Roman numbers list:</h4>
<ol type=''i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
</ol>
</body>
</html>
Defination Lists
A definition list is not a list of single items.
It is a list of items/terms, together with a description of each item/term
A defination list starts with a <dl> tag(definition list).
Each term starts with a <dt>tag(definition term)
Each description starts with a <dd> tag(definition description)
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
<dl>
</body>
</html>
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other links, and so on.
Nested Lists
Lists within another list
second list is indented another level and the item markars will appear differently than the original list,
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffeee</li>
<li>tea
<ul>
<li>black tea</li>
</li>green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffeee</li>
<li>tea
<ul>
<li>black tea</li>
</li>green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
List Tags
TAG Description
<ol> Defines an ordered list
<ul> Defines an unorderd list
<li> Defines a list item
<dl> Defines a defination list
<dt> Defines a term (an item) in a definition list
<dd> Defines a description of a term in a definition list
<dir> Deprecated. Use <ul>instead
<menu> Deprecated. Use<ul>instead
1 comment:
nice article for beginners.thank you.
python tutorial
java tutorial
Post a Comment