The lists

Overview

Description

• unordered (bulleted) lists;
  
• ordered lists;
  
• definition lists.

UNORDERED LIST

• the list is declared with
  ( u nordered list );
  
  • each element of the list is defined by the tags
  • ( ist i tem ) .
  
  
  

  Code:

  <ul>
  <li>Apple</li>
  <li>Pear</li>
  <li>Strawberry</li>
</ul>

  
  

  Attribute type

  You can change the appearance of bullets by adding the attribute typein the opening tag

  Code: <ul>

  . Three values ​​are accepted:
  
  • "disk": full circle (default);
    
  • "square": full square;
    
  • "circle": hollow round.
  
  
  

  Code:

  <ul type="square">
  <li>Apple</li>
  <li>Pear</li>
  <li>Strawberry</li>
</ul>

  
  

  ORDERED LIST

  Quite similar to the unordered list, the main difference lies in the main tag: the list is declared with

  Code: <ol>

  ( ordered list ). Tags

  Code: <li>

  always define each item in the list.
  
  

  Code:

  <ol>
  <li>Firstly</li>
  <li>Secondly</li>
  <li>Thirdly</li>
</ol>

  
  By default, this list will automatically display 1, 2, 3 and so on (useful for making summaries).
  
  

  Attribute type

  As for

  Code: <ul>

  , the ordered list has several types that will allow us to choose between sequences of numbers or letters. The attribute

  Code: type

  accepts the following values:
  
  • "A": uppercase alphabet - A., B., etc.
    
  • "a": lowercase alphabet - a., b., etc.
    
  • "I": uppercase Roman numerals - I., II., etc.
    
  • "i": lowercase Roman numerals - i., ii., etc.
  
  
  

  Code:

  <ol type="A">
  <li>Firstly</li>
  <li>Secondly</li>
</ol>

  
  

  Attribute start

  The attribute start is used to define the start. It accepts a numeric value (a number, what!). Automatically, it will start at the corresponding level.
  
  

  Code:

  <ol type="A" start="25">
  <li>Firstly</li>
  <li>Secondly</li>
  <li>Thirdly</li>
</ol>

  
  Here, with an ordered list of the "alphabet" type and a start at "25", we start at the 25th letter of the alphabet. Once you reach the end, it starts again.
  

  
  
  25. Firstly
  
  
  26. Secondly
  
  
  27. Thirdly
  
  

  
  

  Notes

  It is possible to nest both ordered and unordered lists to create multiple levels of lists.
  
  The particularity of the unordered list is that the bullets change automatically according to the level:
  
  • level 1 will have full circles (disk)
    
  • level 2 hollow circles (circle)
    
  • level 3 of filled squares (square)
  
  
  For example: 1st level ordered, 2nd level unordered:
  

  
  
  1. Apple
  
  
  2. Pear
     
     
     
     • Orange
     
     
     • Grapefruit
     
     
     
     
  
  
  3. Strawberry
  
  

  
  

  Code:

  <ol>
  <li>Apple</li>
  <li>Pear
      <ul>
        <li>Orange</li>
        <li>Grapefruit</li>
      </ul>
  </li>
  <li>Strawberry</li>
</ol>

  
  

  LIST OF DEFINITIONS

  A list of definitions is broken down into three parts:
  
  • the "list" block, which is declared with the tag (

    Code: <dl>

    definition list ) ;
    
  • the defined term, declared by the tag (

    Code: <dt>

    definition term ) ;
    
  • the definition of the term, declared by the tag

    Code: <dd>

    ( definition description ) .
  
  
  
  

  Code:

  <dl>
  <dt>HTML</dt>
      <dd>- HyperText Markup Language</dd>
  <dt>Apple</dt>
      <dd>- Edible fruit</dd>
</dl>

  
  In effect, you get an offset of the "descriptions" below the associated items.
  HTML
  

  
  

  HTML

  
  

  - HyperText Markup Language

  
  

  Apple

  
  

  - Edible fruit

  
  

  
  

  Equivalence in BBCode

  Things are done well, ordered and unordered lists have their equivalents in BBCode. The settings are more limited, but still good to know.
  
  An unordered list is constructed as follows:
  
  

  Code:

  [list][*]Apple
[*]Pear
[*]Strawberry[/list]
To get an ordered list, you can choose between only two types: numeric (1) or lowercase alphabet (a):

  
  

  Code:

  [list=1][*]Apple
[*]Pear
[*]Strawberry[/list]

[list=a][*]Apple
[*]Pear
[*]Strawberry[/list]

  
  

  Notes

  	Approved by	Niko
  	Approved on	January 28th 2022
  	Tested on	All browsers
  	Difficulty level	 / 
  	Source	CSS-Actif