Copyright © tutorialspoint.com

HTML Lists Formatting

previous next


Advertisements

You can list out your items, subjects or menu in the form of a list. HTML gives you three different types of lists.

HTML Unordered Lists:

An unordered list is a collection of related items that have no special order or sequence. The most common unordered list you will find on the Web is a collection of hyperlinks to other documents.

This list is created by using <ul> tag. Each item in the list is marked with a butllet. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.

One Movie list is given below:

<center>
<h2>Movie List</h2>
</center>
<ul>
<li>Ram Teri Ganga Meli</li>
<li>Mera Naam Jocker</li>
<li>Titanic</li>
<li>Ghost in the ship</li>
</ul>

This will produce following result:

Movie List

  • Ram Teri Ganga Meli
  • Mera Naam Jocker
  • Titanic
  • Ghost in the ship

You can use type attribute to specify the type of bullet you like. By default its is a disc. Following are the possible way:

<ul type="square">
<ul type="disc">
<ul type="circle">
<ul type="square"><ul type="disc"><ul type="circle">
  • Hindi
  • English
  • Maths
  • Physics
  • Hindi
  • English
  • Maths
  • Physics
  • Hindi
  • English
  • Maths
  • Physics

To Become more comfortable - Do Online Practice

HTML Ordered Lists:

The typical browser formats the contents of an ordered list just like an unordered list, except that the items are numbered instead of bulleted. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>

This list is created by using <ol> tag. Each item in the list is marked with a number.

One Movie list is given below:

<center>
<h2>Movie List</h2>
</center>
<ol>
<li>Ram Teri Ganga Meli</li>
<li>Mera Naam Jocker</li>
<li>Titanic</li>
<li>Ghost in the ship</li>
</ol>

This will produce following result:

Movie List

  1. Ram Teri Ganga Meli
  2. Mera Naam Jocker
  3. Titanic
  4. Ghost in the ship

You can use type attribute to specify the type of numbers you like. By default its is a generic numbers. Following are the other possible way:

<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
<ol type="I"><ol type="i"><ol type="a"><ol type="A">
  1. Hindi
  2. English
  3. Maths
  4. Physics
  1. Hindi
  2. English
  3. Maths
  4. Physics
  1. Hindi
  2. English
  3. Maths
  4. Physics
  1. Hindi
  2. English
  3. Maths
  4. Physics

You can use start attribute to specify the beginning of any index. By default its is a first number or character. In the following example index starts from 5:

<center>
<h2>Movie List</h2>
</center>
<ol start="5">
<li>Ram Teri Ganga Meli</li>
<li>Mera Naam Jocker</li>
<li>Titanic</li>
<li>Ghost in the ship</li>
</ol>

This will produce following result:

Movie List

  1. Ram Teri Ganga Meli
  2. Mera Naam Jocker
  3. Titanic
  4. Ghost in the ship

To Become more comfortable - Do Online Practice

HTML Definition Lists:

HTML and XHTML also support a list style entirely different from the ordered and unordered lists we have discussed so far - definition lists . Like the entries you find in a dictionary or encyclopedia, complete with text, pictures, and other multimedia elements, the Definition List is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

Example:

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

This will produce following result:

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

To Become more comfortable - Do Online Practice

Appropriate List Usage:

Following are just a suggestion and there is no hard and fast rule to use them:

Use unordered lists for:

Use ordered lists for:

Use definition lists for:


previous next

Copyright © tutorialspoint.com