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 :
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
>pug ordered-lists.pug
rendered ordered-lists.html
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>
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
>pug ordered-lists-types.pug
rendered ordered-lists-types.html
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>
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
>pug unordered-lists.pug
rendered unordered-lists.html
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>
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
>pug unordered-lists-types.pug
rendered unordered-lists-types.html
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 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
>pug nested-lists.pug
rendered nested-lists.html
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 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
>pug description-lists.pug
rendered description-lists.html
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>
In this article we learned about
pug
. pug
. pug
. pug
. pug
.