HTML ELEMENT: LIST

HTML LIST

Html list: allows web developers to group a set of related items.Lists are divided into ordered and unordered list. There is also a list type called description list, this list gives a list of items a description of each <dl> tag defines the description list <dt>defines the term and <dd> describes each items.

HTML ORDERED LIST

HTML Ordered List: it is a list that is marked with either numerical numbers or alphabets it starts with <ol> tag and each item on the list starts with a <li> tag. The default settings is numbers 

    • <ol>
    <li>  phone </li>
    <li> tablets </li>
    <li> minipad </li>
    <li> laptops </li>
</ol>

    List Attributes:

      List use the attribute type to help define the type of list item maker.

      • type=”1”- listed as number
      • type=”A”-listed a supper case letters
      • type=”a”-listed as lower case letters
      • type=”I”-listed as roman numerals
      • type=”i”-listed as lower case roman numerals 
    • <ol type="a">
    <li>  phone </li>
    <li> tablets </li>
    <li> minipad </li>
    <li> laptops </li>
</ol>

    Control list counting-

      By default every ordered list starts counting from 1 but it can be controlled by adding the start attributes to start from any number.

    Unordered HTML lists

    An unordered list starts with the tag and each lists starts wit the tag, unlike the the ordered that is placed with numbers, this list item is marked with bullets by default. 

    • <ul>
    <li> phone </li>
    <li> tablets </li>
    <li> minipad </li>
    <li> laptops </li>
</ul>

    Markers:

    Markers can be used to change the bullet default this can be done by setting an attribute style list style-type. Some of these settings are disc, circle ,square, none.

    •         <ul style="list-type:disc;">  
    <li> phone </li>
    <li> tablets </li>
    <li> minipad </li>
    <li> laptops </li>
</ul>

    Nested HTML list:

    Html nested list are list within a list. A list item can contain a new list and other html elements like images and videos.

    Popular tags

    HTML Forms HTML Table HTML List HTML Video HTML Image

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1