Pug Tutorial Series

Pug.js tutorial : HTML Lists in pug

Pug tutorial series pugjs tutorial introduction



Overview

In this part of the pug tutorial series we will learn about how we can use html Lists in pug. There are 4 types of lists :

  1. Ordered lists
  2. Unordered lists
  3. Nested lists
  4. Description lists

Ordered Lists

It is numbered lists of elements. It starts with the ol tag with each element listed with indented li tags. An example is given below :

											
//Name of the file : ordered-lists.pug
ol
    li element 1
    li element 2
    li element 3
    li element 4
	

											
										

You can run the above code using the following command :
											
>pug ordered-lists.pug

  rendered ordered-lists.html
											
										

Now open the ordered-lists.html file transformed from pug as shown below :
											
<!--Name of the file : ordered-lists.html-->
<ol>
    <li>element 1</li>
    <li>element 2</li>
    <li>element 3</li>
    <li>element 4</li>
</ol>
											
										

Different types of list types markers for ordered lists

type attribute is used to define list item marker type. Examples of all the available types is given below :

											
//Name of the file : ordered-lists-types.pug
//Numbered Lists - Default
ol(type='1')
        li element 1
        li element 2
//List with uppercase letters 
ol(type='A')
        li element 1
        li element 2
//List with lowercase letters
ol(type='a')
        li element 1
        li element 2
//List with uppercase roman numbers
ol(type='I')
        li element 1
        li element 2
//List with lowercase roman numbers
ol(type='i')
        li element 1
        li element 2
	

											
										

You can run the above code using the following command :
											
>pug ordered-lists-types.pug

  rendered ordered-lists-types.html
											
										

Now open the ordered-lists-types.html file transformed from pug as shown below :
											
<!--Name of the file : ordered-lists-types.html-->
<!--Numbered Lists - Default-->
<ol type="1">
    <li>element 1</li>
    <li>element 2</li>
</ol>
<!--List with uppercase letters -->
<ol type="A">
    <li>element 1</li>
    <li>element 2</li>
</ol>
<!--List with lowercase letters-->
<ol type="a">
    <li>element 1</li>
    <li>element 2</li>
</ol>
<!--List with uppercase roman numbers-->
<ol type="I">
    <li>element 1</li>
    <li>element 2</li>
</ol>
<!--List with lowercase roman numbers-->
<ol type="i">
    <li>element 1</li>
    <li>element 2</li>
</ol>
											
										

Unordered Lists

It is bulleted lists of elements. It starts with the ul tag with each element listed with indented li tags. An example is given below :

											
//Name of the file : unordered-lists.pug
ul
    li element 1
    li element 2
    li element 3
    li element 4
	

											
										

You can run the above code using the following command :
											
>pug unordered-lists.pug

  rendered unordered-lists.html
											
										

Now open the unordered-lists.html file transformed from pug as shown below :
											
<!--Name of the file : unordered-lists.html-->
<ul>
    <li>element 1</li>
    <li>element 2</li>
    <li>element 3</li>
    <li>element 4</li>
</ul>
											
										

Different types of list type markers for unordered lists

CSS list-style-type is used to define list item marker type. Examples of all the available types is given below :

											
//Name of the file : unordered-lists-types.pug
//Disc lists - default
ul(style='list-style-type:disc')
    li element 1
    li element 2
//Circle lists
ul(style='list-style-type:circle')
    li element 1
    li element 2
//Square lists
ul(style='list-style-type:square')
    li element 1
    li element 2
//None
ul(style='list-style-type:none')
    li element 1
    li element 2
	

											
										

You can run the above code using the following command :
											
>pug unordered-lists-types.pug

  rendered unordered-lists-types.html
											
										

Now open the unordered-lists-types.html file transformed from pug as shown below :
											
<!--Name of the file : unordered-lists-types.html-->
<!--Disc lists - default-->
<ul style="list-style-type:disc;">
    <li>element 1</li>
    <li>element 2</li>
</ul>
<!--Circle lists-->
<ul style="list-style-type:circle;">
    <li>element 1</li>
    <li>element 2</li>
</ul>
<!--Square lists-->
<ul style="list-style-type:square;">
    <li>element 1</li>
    <li>element 2</li>
</ul>
<!--None-->
<ul style="list-style-type:none;">
    <li>element 1</li>
    <li>element 2</li>
</ul>
											
										

Nested Lists

Nested lists are mixture of ordered and unordered or ordered and ordered or unordered and unordered lists. An example is given below :

											
//Name of the file : nested-lists.pug
ul
    li element 1
        ol
            li element 1.1
            li element 1.2
            li element 1.3
    li element 2
        ul
            li element 2.1
            li element 2.2

    
	

											
										

You can run the above code using the following command :
											
>pug nested-lists.pug

  rendered nested-lists.html
											
										

Now open the nested-lists.html file transformed from pug as shown below :
											
<!--Name of the file : nested-lists.html-->
<ul>
    <li>element 1
        <ol>
            <li>element 1.1</li>
            <li>element 1.2</li>
            <li>element 1.3</li>
        </ol>
    </li>
    <li>element 2
        <ul>
            <li>element 2.1</li>
            <li>element 2.2</li>
        </ul>
    </li>
</ul>
											
										

Description Lists

Description lists are the lists in which each list item is having a description attached. The dl tag defines description list, the dt tag defines term, and the dd tag describes term description. An example is given below: An example is given below :

											
//Name of the file : description-lists.pug
dl
  dt Element 1
  dd - Element 1 description is here
  dt Element 2
  dd - Element 2 description is here
    
	

											
										

You can run the above code using the following command :
											
>pug description-lists.pug

  rendered description-lists.html
											
										

Now open the description-lists.html file transformed from pug as shown below :
											
<!--Name of the file : description-lists.html-->
<dl>
    <dt>Element 1</dt>
    <dd>- Element 1 description is here</dd>
    <dt>Element 2</dt>
    <dd>- Element 2 description is here</dd>
</dl>
											
										

What we learned

In this article we learned about

  1. HTML Lists in pug.
  2. HTML ordered lists in pug .
  3. Different types of list type markers for ordered lists
  4. HTML unordered lists in pug .
  5. Different types of list type markers for unordered lists
  6. HTML nested lists in pug .
  7. HTML description lists in pug .

Repository

Get it from :