HTML List

1

HTML List




In general terms the phrase “list” refers to a record of short pieces of information arranged in a specific format.The examples of such list may include shopping list, list of names of employees in an organization etc. In HTML we use the concept of lists i.e HTML List so as to display information carrying a specific order.

The HTML supports four types of lists. They are

  1. Unordered List
  2. Ordered List
  3. Miscellaneous or nested List
  4. Definition List

Now let’s define all the above three types of list..

    • Unordered List : If you intent to display certain text on the console, with each independent sentence initiated with a bullet mark then this instance can be achieved by means of a mechanism referred as unordered list.
      Here usually the entire text is enclosed within the tags <ul type=”circle or square or disc”> text to be displayed </ul> with each independent sentence initiating with <li> and closing with </li>. Here type=”value” is an attribute.

      Example snippet: 

      <ul>
      <li> Hello </li>
      </ul>
      <!– Displays the output “Hello” initiated with “disc” bullet –>
      <ul type=”circle”>
      <li> This is</li>
      </ul>
      <!– Displays the output “This is” initiated with “circle” bullet –>
      <li type=”square”>
      <li> an </li>
      </li>
      <!– Displays the output “an” initiated with “square” bullet –>
      <ul type=”disc”>
      <li> Unordered List. </li>
      </ul>
      <!– Displays the output “Unordered List” initiated with “disc” bullet –>

    • Ordered List: If the sentence is initiating with the Large Roman Number, Small Roman Number, Alphabets including both capital and small letters etc.Then that list is said to be an ordered list.
      Ordered list is initiated using the tags <ol type=”1 or a or A or I or i”> text </ol> with independent sentence starting with <li> and ending with </li>.

      Example snippet:

      <ol>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with 1 –> 
      <ol type=”A”>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with A –>
      <ol type=”a”>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with a –>
      <ol type=”I”>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with I –>
      <ol type=”i”>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with i –>
      <ol type=”1″ start=”100″>
      <li>Hello</li>
      </ol>
      <!– Output is Hello beginning with 100 –>
      Note : If start attribute isn’t declared then by default it starts with 1.




  • Miscellaneous or Nested List : When one list type is included in other list type then such type of succession is usually referred to as Miscellaneous or Nested List.
  • Definition List: It is a special type of HTML list that lists terms and their definition. It is created using <dl> tag. A term in the definition is specified using <dt> tag and its definition is specified using <dd> tag where dl stands for define list, dt stands for define term and dd stand for define definition.

    Example Snippet:

    <dl>
    <dt>TLOGER</dt>
    <dd> A place where you learn things from scratch </dd>
    </dl>

    Output would be like this :
    TLOGER
    A place where you can learn things from scratch

 

Share.

1 Comment

Leave A Reply