HTML Lists

HTML Lists

HTML Lists

HTML Lists

Unordered List

  • HTML
  • CSS
  • JavaScript

Ordered Lists

  1. HTML
  2. CSS
  3. JavaScript
html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Lists</title>
  </head>
<body>

<h4>Unordered List</h4>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>  

<h4>Ordered Lists</h4>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol> 

</body>
</html>

HTML Unordered Lists

HTML Unordered Lists

HTML Unordered Lists (ul tag)

  • HTML
  • CSS
  • JavaScript
html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Unordered Lists</title>
  </head>
<body>

<h4>HTML Unordered Lists (ul tag)</h4>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>  

</body>
</html>

HTML Ordered Lists

HTML Ordered Lists

HTML Ordered Lists (ol tag)

  1. RED
  2. GREEN
  3. BLUE
html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Ordered Lists</title>
  </head>
<body>

<h4>HTML Ordered Lists (ol tag)</h4>

<ol>
  <li>RED</li>
  <li>GREEN</li>
  <li>BLUE</li>
</ol>  

</body>
</html>

HTML Description Lists

HTML Description Lists

HTML Description Lists

HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Programming Languages
html
<!DOCTYPE html>
<html>
  <head>
    <title>HTML Description Lists</title>
  </head>
<body>

<h4>HTML Description Lists</h4>

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>Programming Languages</dd>
</dl>

</body>
</html>

Unordered List Disc

Unordered List Disc

Unordered List with Disc Bullets

  • HTML
  • CSS
  • JavaScript
html
<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List Disc</title>
  </head>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>  

</body>
</html>

Unordered List Circle

Unordered List Circle

Unordered List with Circle Bullets

  • RED
  • GREEN
  • BLUE
html
<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List Circle</title>
  </head>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
  <li>RED</li>
  <li>GREEN</li>
  <li>BLUE</li>
</ul>  

</body>
</html>

Unordered List Square

Unordered List Square

Unordered List with Square Bullets

  • Math
  • English
  • Computer
html
<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List Square</title>
  </head>
<body>

<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square;">
  <li>Math</li>
  <li>English</li>
  <li>Computer</li>
</ul>

</body>
</html>

Unordered List None

Unordered List None

Unordered List without Bullets

  • Name
  • Class
  • Roll Number
html
<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List None</title>
  </head>
<body>

<h4>Unordered List without Bullets</h4>

<ul style="list-style-type:none;">
  <li>Name</li>
  <li>Class</li>
  <li>Roll Number</li>
</ul>  

</body>
</html>

Nested List

Nested List

Nested List

Lists can be nested (list inside list):

  • Chapter One
    • Section One
    • Section Two
    • Section Three
  • Chapter Two
  • Chapter Three
html
<!DOCTYPE html>
<html>
  <head>
    <title>Nested List</title>
  </head>
<body>

<h4>Nested List</h4>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Chapter One
    <ul>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ul>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three</li>
</ul>

</body>
</html>

Horizontal List

<!DOCTYPE html>
<html>
<head>
<title>Horizontal List</title>
<style>
ul {
list-style-type: none;
margin: 2;
padding: 2;
overflow: hidden;
background-color: #c93f38;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 20px;
text-decoration: none;
}

li a:hover {
background-color: #1c1c1a;
}
</style>
</head>
<body>

<h4>Horizontal List with CSS</h4>

<ul>
<li> <a href="#">Some item</a></li>
<li> <a href="#">Another item</a></li>
</ul>

</body>
</html>

Ordered List Numbers

Ordered List Numbers

Ordered List with Numbers

  1. RED
  2. GREEN
  3. BLUE
html
<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List Numbers</title>
  </head>
<body>

<h4>Ordered List with Numbers</h4>

<ol type="1">
  <li>RED</li>
  <li>GREEN</li>
  <li>BLUE</li>
</ol>  

</body>
</html>

Alphabet Uppercase Letters

Ordered List Uppercase Letters

Ordered List with Uppercase Letters

  1. HTML
  2. CSS
  3. JavaScript
html
<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List Uppercase Letters</title>
  </head>
<body>

<h4>Ordered List with Uppercase Letters</h4>

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>  

</body>
</html>

Alphabet Lowercase Letters

Ordered List Lowercase Letters

Ordered List with Lowercase Letters

  1. Name
  2. Class
  3. Roll Number
html
<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List Lowercase Letters</title>
  </head>
<body>

<h4>Ordered List with Lowercase Letters</h4>

<ol type="a">
  <li>Name</li>
  <li>Class</li>
  <li>Roll Number</li>
</ol>  

</body>
</html>

Roman Numbers Uppercase

Roman Numbers Uppercase

Ordered List with Roman Numbers Uppercase

  1. Math
  2. English
  3. Computer
html
<!DOCTYPE html>
<html>
  <head>
    <title>Roman Numbers Uppercase</title>
  </head>
<body>

<h4>Ordered List with Roman Numbers Uppercase</h4>

<ol type="I">
  <li>Math</li>
  <li>English</li>
  <li>Computer</li>
</ol>  

</body>
</html>

Roman Numbers Lowercase

Roman Numbers Lowercase

Ordered List with Roman Numbers Lowercase

  1. HTML
  2. CSS
  3. JavaScript
html
<!DOCTYPE html>
<html>
  <head>
    <title>Roman Numbers Lowercase</title>
  </head>
<body>

<h4>Ordered List with Roman Numbers Lowercase</h4>

<ol type="i">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>  

</body>
</html>

Control List Counting

Control List Counting

Starting from 5

  1. HTML
  2. CSS
  3. JavaScript

Reverse from 10

  1. RED
  2. GREEN
  3. BLUE
html
<!DOCTYPE html>
<html>
  <head>
    <title>Control List Counting</title>
  </head>
<body>

<h4>Starting from 5</h4>

<ol start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<h4>Reverse from 10</h4>

<ol start="10" reversed>
  <li>RED</li>
  <li>GREEN</li>
  <li>BLUE</li>
</ol>

</body>
</html>