HTML Lists

9–12 MINS READ

Agenda

  1. HTML Lists
  2. Unordered Lists
  3. Ordered Lists
  4. CSS Lists Properties
  5. start attribute
  6. Description Lists

HTML Lists

  • There are 2 kinds of lists in HTML: unordered or bulleted lists and ordered or numbered lists.

Unordered list tag pairs

  • An unordered list contains a list of items that don’t need to be in a particular order.
  • The <ul> and </ul> tags are used to create unordered or bulleted lists.
  • Items in the lists are added by using the <li> and </li> tags.
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>Most Popular Web Browsers</h1>
    <ul>
      <li>Mozilla Firefox</li>
      <li>Google Chrome</li>
      <li>Opera Browser</li>
      <li>Microsoft Edge</li>
      <li>Safari Browser</li>
    </ul>
  </body>
</html>

Ordered list tag pairs

  • An ordered list is useful for presenting a series of steps that the user should perform in order.
  • The <ol> and </ol> tags are used to create ordered lists or numbered lists.
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
  <body>
    <h1>Phases of Web Development Life Cycle</h1>
    <ol>
      <li>Planning</li>
      <li>Analysis</li>
      <li>Design</li>
      <li>Development</li>
      <li>Testing</li>
      <li>Implementation</li>
      <li>Maintenance</li>
    </ol>
  </body>
</html>

CSS Lists Properties

  • Set different list item markers for ordered lists.
  • Set different list item markers for unordered lists.
  • Set an image as the list item marker.
  • Add background colors to lists and list items.

list-style-type property

  • The list-style-type property is used to define the style of the list item marker.
  • The following values below explains how to change the marker for unordered list items.
    1. The disc value sets the list item marker to a bullet.
    2. The circle value sets the list item marker to a circle.
    3. The square value sets the list item marker to a square.
    4. The none value will not display markers on list items.

disc value

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: disc;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Output

Most Popular Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Opera Browser
  • Microsoft Edge
  • Safari Browser

circle value

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: circle;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Output

Most Popular Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Opera Browser
  • Microsoft Edge
  • Safari Browser

square value

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: square;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Output

Most Popular Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Opera Browser
  • Microsoft Edge
  • Safari Browser

none value

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-type: none;">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Output

Most Popular Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Opera Browser
  • Microsoft Edge
  • Safari Browser

list-style-type property

  • The following values sets the marker for ordered list items.
    1. The lower-alpha value is used to set the marker of a list item in lowercase letters.
    2. The upper-alpha value is used to set the marker of a list item in uppercase letters.
    3. The lower-roman value is used to set the marker of a list item in lowercase roman numbers.
    4. The upper-roman value is used to set the marker of a list item in uppercase roman numbers.

lower-alpha value

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: lower-alpha;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Output

Phases of WDLC

  1. Planning
  2. Analysis
  3. Design
  4. Development
  5. Testing
  6. Implementation
  7. Maintenance

upper-alpha value

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: upper-alpha;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Output

Phases of WDLC

  1. Planning
  2. Analysis
  3. Design
  4. Development
  5. Testing
  6. Implementation
  7. Maintenance

lower-roman value

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: lower-roman;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Output

Phases of WDLC

  1. Planning
  2. Analysis
  3. Design
  4. Development
  5. Testing
  6. Implementation
  7. Maintenance

upper-roman value

<body>
  <h1>Phases of WDLC</h1>
  <ol style="list-style-type: upper-roman;">
    <li>Planning</li>
    <li>Analysis</li>
    <li>Design</li>
    <li>Development</li>
    <li>Testing</li>
    <li>Implementation</li>
    <li>Maintenance</li>
  </ol>
</body>

Output

Phases of WDLC

  1. Planning
  2. Analysis
  3. Design
  4. Development
  5. Testing
  6. Implementation
  7. Maintenance

list-style-image property

  • The list-style-image property used to specify an image as the list item marker in unordered lists.
<ul style=“list-style-image:url(‘image.jpg’)”>
  <li>item 1</li>
  <li>item 2</li>
</ul>

<body>
  <h1>Most Popular Web Browsers</h1>
  <ul style="list-style-image: url(‘checkmarker.png‘);">
    <li>Mozilla Firefox</li>
    <li>Google Chrome</li>
    <li>Opera Browser</li>
    <li>Microsoft Edge</li>
    <li>Safari Browser</li>
  </ul>
</body>

Output

Most Popular Web Browsers

  • Mozilla Firefox
  • Google Chrome
  • Opera Browser
  • Microsoft Edge
  • Safari Browser

list-style-position property

  • The list-style-position property specifies the position of the list item marker in unordered lists.
  • The outside value means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
  • The inside value means that the bullet points will beinside the list item. The list item will be part of the text and push the text at the start.

outside value

<body>
  <h3>To create a web page:</h3>
  <ol style="list-styl-position: outside;">
    <li>Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.</li>
    <li>Save the file as .html (File - save as - select HTML)</li>
    <li>Write your HTML code.</li>
    <li>Double-click on the saved file, and it will be opened in your default browser.</li>
  </ol>
</body>

Output

To create a web page:

  1. Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.
  2. Save the file as .html (File - save as - select HTML).
  3. Write your HTML code.
  4. Double-click on the saved file, and it will be opened in your default browser.

inside value

<body>
  <h3>To create a web page:</h3>
  <ol style="list-styl-position: inside;">
    <li>Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.</li>
    <li>Save the file as .html (File - save as - select HTML)</li>
    <li>Write your HTML code.</li>
    <li>Double-click on the saved file, and it will be opened in your default browser.</li>
  </ol>
</body>

Output

To create a web page:

  1. Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.
  2. Save the file as .html (File - save as - select HTML).
  3. Write your HTML code.
  4. Double-click on the saved file, and it will be opened in your default browser.

list-style property

  • The list-style property is a shorthand property. It is use to set all the list properties in one declaration.
  • When using the shorthand property, the order of the property values are:
    1. list-style-type
    2. list-style-position
    3. list-style-image

start attribute

  • The start attribute of the <ol></ol> tag pair defines the start of the counting from specified number.
<body>
  <h3>To create a web page:</h3>
  <ol start="10">
    <li>Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.</li>
    <li>Save the file as .html (File - save as - select HTML)</li>
    <li>Write your HTML code.</li>
    <li>Double-click on the saved file, and it will be opened in your default browser.</li>
  </ol>
</body>

Output

To create a web page:

  1. Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.
  2. Save the file as .html (File - save as - select HTML).
  3. Write your HTML code.
  4. Double-click on the saved file, and it will be opened in your default browser.

Description List

HTML also supports description lists.

  • A description list is a list of terms, with a description of each term.
  • The <dl></dl> tag pair defines the description list.
  • The <dt></dt> tag pair defines the term (name).
  • The <dd></dd> tag pair describes each term.
<body>
  <h2>Description List</h2>
  <dl>
    <dt>Web Page</dt>
    <dd>
      is a document commonly written in HTML that is accessible through the internet 
      or other network using a web browser.
    </dd>
    <dt>Website</dt>
    <dd>
      is a collection of related web pages, including multimedia content, typically 
      identified with a common domain name, and pulished on at least one web server.
    </dd>
  </dl>
</body>

Output

Description List

Web Page
is a document commonly written in HTML that is accessible through the internet or other network using a web browser.
Website
is a collection of related web pages, including multimedia content, typically identified with a common domain name, and pulished on at least one web server.

Credits

This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.