Home » Tutorials » HTML » List Tags

List Tags

When writing any document, lists provide quick bursts of information in the most efficient manner. HTML Lists are no different when used in an HTML document. In a browser, there are only two types of lists, ordered and unordered. Ordered lists obviously have a predictable layout such as numbers or roman numerals. The standard for ordered lists is numbers, but you can always modify that in the CSS. Unordered lists are generally small black dots that can also be changed in the CSS. Lists require two sets of tags. The encapsulating tag is <ol> for ordered lists and <ul> for unordered lists. The element inside that tag is the <li> where your content will go in between the opening and closing tags of the that li element.

HTML Ordered Lists

Example
<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ol>
Result
  1. List Item 1
  2. List Item 2

HTML Unordered Lists

Example
<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>
Result
  • List Item 1
  • List Item 2

Pretty easy to understand there, but what if we wanted to have another level in the list? You can create lists inside lists. You would simply just start putting <ul> with internal <li> inside the previous <li> elements. Alright, maybe that is somewhat complicated… example please!

HTML Multiple Level Lists

Example
<ul>
    <li>List Item 1 
        <ul>
            <li>List Item 1 Sub 1</li> 
            <li>List Item 1 Sub 2</li>
        </ul>
    </li>
</ul> 
Result
  • List Item 1
    • List Item 1 Sub 1
    • List Item 1 Sub 2

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "List Tags". After Hours Programming. Accessed on March 17, 2024. https://www.afterhoursprogramming.com/tutorial/html/list-tags/.

  • Stewart, Suzy. "List Tags". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/html/list-tags/. Accessed 17 March, 2024.

  • Stewart, Suzy. List Tags. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/html/list-tags/.



3 thoughts on “List Tags”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.