How to Use The HTML List Elements

How to Use The HTML List Elements

The unordered ordered, and definition lists are some of the most commonly used elements for marking up web content. In this article, you are going to know more about how to effectively use these list elements available in HTML to your web page code. Here, you will know more about the best elements of certain apps and how to apply custom styling to your lists by using CSS(Cascading Style Sheet).

Let's start.

Ordered Lists

To mark up the ordered list of items, <ol> element is used. For each and every item in the list individual <li> elements should be used.

Following example shows a list of web browsers, in order of reputation.

<ol>
    <li>Mozilla Firefox</li>
    <li>Opera</li>
    <li>Google Chrome</li>
    <li>Internet Explorer</li>
</ol>

This example will show the output as:

Mozilla Firefox
Opera
Google Chrome
Internet Explorer

The web browser by default will show a number to the side of each of the list items starting at 1. You can modify the starting number by itemizing a start attribute on your <ol> element.

<ol start="5">...</ol>

Mozilla Firefox
Opera
Google Chrome

It is also possible to reverse the numbering by inserting the reversed attribute to your <ol> tag.

<ol reversed>...</ol>

Mozilla Firefox
Opera
Google Chrome
Internet Explorer

Unordered Lists

For mark up a list of items where the ordering of those list items are not important then the <ul> element is used. This Unordered Lists can be used for things such as shopping lists, navigation links or kit lists.

Following example shows an unordered list of items from an excursion kit list.

<ul>
     <li>Map</li>
     <li>Compass</li>
     <li>Jacket</li>
     <li>Water Bottle</li>
</ul>

The web browser by default will show bullet points next to each and every list item. In this article, you will read clearly about how to modify this behavior by using CSS.

Description Lists

To mark up a series of the term or description groups the <dl> element is used. The terms are mark up by using the <dt> tag or element & descriptions are by using the <dd> tag or element. Each and every <dt> term should have at least one <dd> element which can't be left as empty.

Following example shows a description list that depicts the author and editors for a book. The first term or description group defines a single author. The second group defines 3 editors.

<dl>
    <dt>Author</dt>
    <dt>Editors</dt>
    <dd>Ellie Scott</dd>
    <dd>Nick Elliott</dd>
    <dd>Robert Gottlieb </dd>
</dl>

Observe that we do not require another element to cover the term or description groups. The web browser can take that any <dd> tags belong to the last <dt> tag that was faced.

To mark up an FAQ page you can also use a <dl> description list. The questions can be placed within <dt> elements and the answers are in <dd> elements.

<dl>
    <dt>Why is HTML5 so easy?</dt>
    <dt>Because unicorns</dt>
    <dt>What is the meaning of life?</dt>
    <dt>42</dt>
</dl>

Styling Lists by using CSS

There are more CSS styling properties are available you can use that to modify the appearance of your <ol> & <ul> lists. These styling properties enable you to customize the styling of the marker displayed next to each and every list item and also it’s positioning. You also have the choice to set your independent marker by using a picture that you have built.

ul 
{
    list-style-image: none;
    list-style-type: decimal;
    list-style-position: outside;
}

The list-style property offers as a shorthand method of indicating all 3 of these properties

ul 
{
    list-style:   ;
}

Let's take a short glance at all of these CSS properties.

list-style-type

The property is used to set the marker that will present next to each of the list items. If you are not interested in a marker to appear, then you can set this list-style-type property to none.

ul 
{
    list-style-type: square;
}

The following is a list of all the various values that you can use for the list-style-type property.

  • none
  • circle
  • square
  • disc
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • lower-alpha
  • upper-alpha
  • armenian
  • georgian

list-style-position

The property has 2 possible values, those are inside and outside.

ul 
{
    list-style-position: inside;
}

ul 
{
    list-style-position: outside;
}

list-style-image

The property can be used to specify a personalized image. If you are not interested in a custom image, then you can set this property to none.

Conclusion

By reading this article you have learned more about how to use the different HTML list elements to perfectly mark up your content. And you also learned how to style your lists by using CSS, which includes how to set your own custom list markers.

The HTML lists are something that you can find yourself by using more as you start developing your own sites. Apart from the main page content, the list elements can also be beneficial while constructing navigation menus.

If you have any doubts or queries about this blog, then please feel free to contact us immediately, we are here to help you. Email-id: info@htmloffshore.com

Contact Us


Content

Contact Us