HTML List


List is a data representation using bullets, numbers ,etc

A list can be created in HTML using <ul> tag. Each list item can be represented by <li> tag

eg

<!DOCTYPE html>
<html>
<body>
<p> This is a list of subatomic particles in an atom:</p> 
<ul>
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ul>

</body>
</html>

output:


By default HTML uses bullets as list style elements.

To replace the default bullets with you own style, use style tag

<!DOCTYPE html>
<html>
<body>
<p> This is a list of subatomic particles in an atom(using circle style):</p> 
<ul style="list-style-type:circle">
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ul>
<br>


<p> This is a list of subatomic particles in an atom(using square style):</p> 
<ul style="list-style-type:square">
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ul>
<br>

<p> This is a list of subatomic particles in an atom(using ordered numbered list):</p> 
<ol>
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ol>
<br>

<p> This is a list of subatomic particles in an atom(using ordered alphabets list):</p> 
<ol type="A">
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ol>
<br>

</body>
</html>

output:


Ordered List

Ordered list is a list whos elements start with numbers instead of bullets


Description list elements

When making a list with each element having a description with it, we use <dl> tag for list creation and <dt> for list elements  , <dd> for item description

eg

<!DOCTYPE html>
<html>
<body>
<p> This is a list of subatomic particles in an atom(using with description):</p> 
<dl style="list-style-type:square">
  <dt>Electrons</dt>
  <dd>Negatively charged particles</dd>
  <dt>Protons</dt>
  <dd>Positively charged particles</dd>
  <dt>Neutron</dt>
  <dd>Neutral charged particles</dd>
</dl>
<br>


<p> This is a list of subatomic particles in an atom(using square style):</p> 
<ul style="list-style-type:square">
  <li>Electrons</li>
  <li>Protons</li>
  <li>Neutron</li>
</ul>
<br>

<br>

</body>
</html>

output:





Related Tutorials