Programming for beginners: HTML Lists: A Beginner's Guide to Ordered, Unordered, and Definition Lists

In HTML, there are three main types of lists we can use.

1. Ordered Lists (<ol>)

2. Unordered Lists (<ul>)

3. Definition Lists (<dl>)

Ordered Lists

Use an ordered list when the sequence of items is important, such as instructions or steps in a process. Items are numbered automatically (1, 2, 3, etc.), but you can also use different types of numbering (e.g., letters or Roman numerals) with CSS.

Example

<ol>
  <li>Wake up</li>
  <li>Have breakfast</li>
  <li>Go to College</li>
  <li>Attend classes</li>
  <li>Go to play area and play</li>
  <li>Back to home</li>
  <li>Have dinner</li>
  <li>Sleep well</li>
</ol>

· <ol>: This is the container element for the ordered list.

· <li>: Each item within the list is wrapped in a <li> (list item) tag.

ordered-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ordered List Example</title>
</head>
<body>
    
    <ol>
        <li>Wake up</li>
        <li>Have breakfast</li>
        <li>Go to College</li>
        <li>Attend classes</li>
        <li>Go to play area and play</li>
        <li>Back to home</li>
        <li>Have dinner</li>
        <li>Sleep well</li>
      </ol>
      
</body>
</html>

Unordered List

Use an unordered list when the sequence of items is not important, such as a list of ingredients or features. Items are marked with bullet points, but you can change the bullet style (e.g., circles, squares) using CSS.

Example

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

· <ul>: This is the container element for the unordered list.

· <li>: Each item within the list is wrapped in a <li> tag.

unordered-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unordered List Example</title>
</head>
<body>
    
    <ul>
        <li>Apples</li>
        <li>Bananas</li>
        <li>Cherries</li>
        <li>Grapes</li>
        <li>Berries</li>
        <li>Mangoes</li>
    </ul>
      
</body>
</html>

Definition Lists (<dl>)

Use a definition list for pairs of terms and their descriptions, such as a glossary or a list of terms with definitions. In general, terms are aligned to the left, and their definitions are indented under them.

Example

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>HTTP</dt>
  <dd>Hypet Text Transfer Protocol</dd>
</dl>

· <dl>: This is the container element for the definition list.

· <dt>: Each term is wrapped in a <dt> (definition term) tag.

· <dd>: Each definition corresponding to a term is wrapped in a <dd> (definition description) tag.

definition-list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Definition List Example</title>
</head>
<body>
    
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>HTTP</dt>
        <dd>Hypet Text Transfer Protocol</dd>
    </dl>
      
</body>
</html>

Previous Next Home

Programming for beginners

Sunday, 1 December 2024

HTML Lists: A Beginner's Guide to Ordered, Unordered, and Definition Lists

No comments:

Post a Comment