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
<!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:
Online Instructor
