HTML ‘Description List’ full tutorial with examples.
HTML TUTORIAL (PART-11)
HTML Description List
HTML (Hyper Text Markup Language) Description List are commonly used to implement a glossary or to display metadata. HTML description list are also used to define different type of data in one group un our website and webpages.
It is effects to improve our website SEO (Search Engine Optimization).
Element and function of Description List in HTML
|
Elements |
Functions |
| <dl> | It defines a Description List; it encloses a group of term. |
| <dt> | It defines a Description Term, it enclosed description list. |
| <dd> | It defines a Description Details. It enclosed by the description list. |
Examples of Description List;
Simple Example of HTML Description List
<!DOCTYPE html> <html> <head> <title>Description List</title> </head> <body> <dl> <dt>lion;</dt> <dd>Lion is the king of forest.</dd> <dt>Dog;</dt> <dd>Dogs are our pets animal.</dd> <dt>giraffe;</dt> <dd>giraffe is the tallest animal.</dd> <dt>Elephant;</dt> <dd>Elephants are the biggest animal.</dd> </dl> </body> </html> |
Output of above example (Description List)
| lion;
Lion is the king of forest. Dog; Dogs are our pet’s animal. Giraffe; giraffe is the tallest animal. Elephant; Elephants are the biggest animal. |
Example of Description List
Here we take some different examples of Description List. Different from above example.
<!DOCTYPE html> <html> <head> <title>Description List</title> </head> <body> <dl> <dt>lion;</dt> <dd>Lion is the king of forest. African lion are the most social of big cats. </dd> <dt>Dog;</dt> <dd>The dogs are domestic animals, Domestic dogs are mostly kept as pets. </dd> <dt>Giraffe;</dt> <dd>giraffe is the tallest living terrestrial animal and largest ruminant. They can run fast as 35 miles an hour. </dd> <dt>Elephant;</dt> <dd>Elephants are the largest existing land animal. Indian elephants are smaller than African elephants, African elephants are biggest land animals. </dd> </dl> </body> </html> |
Output of above Example
| lion;
Lion is the king of forest. African lion are the most social of big cats. Dog; The dogs are domestic animals, Domestic dogs are mostly kept as pets. Giraffe; giraffe is the tallest living terrestrial animal and largest ruminant. They can run fast as 35 miles an hour. Elephant; Elephants are the largest existing land animal. Indian elephants are smaller than African elephants, African elephants are biggest land animals. |
HTML Description List with CSS Style
We can also style HTML Description List, when we style our description list in our website and webpages it looks beautiful and impress the website visitors.
The Example below contain internal and inline styling, see the output and understand it.
Styling Description List Example:
<!DOCTYPE html> <html> <head> <title>Description List</title> <style type="text/css"> dt { font-weight: bold; text-decoration: underline; color: chocolate;} dd { font-style: italic; color: darkgreen;} </style> </head> <body> <dl> <dt>lion;</dt> <dd>Lion is the king of forest. African lion are the most social of big cats. </dd> <dt>Dog;</dt> <dd>The dogs are domestic animals, Domestic dogs are mostly kept as pets. </dd> <dt>Giraffe;</dt> <dd>Giraffe is the tallest living terrestrial animal and largest ruminant. They can run fast as 35 miles an hour. </dd> <dt>Elephant;</dt> <dd>Elephants are the largest existing land animal. Indian elephants are smaller than African elephants, African elephants are biggest land animals. </dd> </dl> </body> </html> |
Output of above example styling Description List
| lion;
Lion is the king of forest. African lions are the most social of big cats. Dog; The dogs are domestic animals, Domestic dogs are mostly kept as pets. Jiraff; giraffe is the tallest living terrestrial animal and largest ruminant. They can run fast as 35 miles an hour. Elephant; Elephants are the largest existing land animal. Indian elephants are smaller than African elephants, African elephants are biggest land animals. |
Above you can see the all examples of HTML Description List, like style description list and non-styling description list. I hope, you are understanding this Description list in HTML.
In next HTML Tutorial we learn existing one other new topic of html.
Learn Also-
- Definition list in html example,
- Definition list program in html
- dl html,
- Definition list example,
- Definition list tag in html,
- Ordered list html,
- dt> tag in html nested list html,
1 Comment
zoritoler imol · June 30, 2022 at 12:19 pm
I have been examinating out a few of your posts and i must say pretty nice stuff. I will make sure to bookmark your site.