HTML list element with examples | PDF |FREE HTML TUTORIALS #6

html list element with examples

When it comes to group the similar kinds of elements , we can use some html elements such as <li> or list tag/ list element . As we know we can have two types of list ie..; an ordered list or an unordered list , lets’s see the example of both ordered list and unordered list .

 

HTML LIST ELEMENT EXAMPLE

Ordered ListUnordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List
  • Unordered List
  • Unordered List
  • Unordered List

Clearly the Ordered list are ordered according to numbers whereas the unordered is not .

Ordered List <ol> :

To make an ordered list we have to use nested tags ,  <ul> tag with <li> ( nested inside ) where li represents each list item .

TypeDescription
type=”1″The list items will be numbered with numbers (default)
type=”A”The list items will be numbered with uppercase letters
type=”a”The list items will be numbered with lowercase letters
type=”I”The list items will be numbered with uppercase roman numbers
type=”i”The list items will be numbered with lowercase roman numbers

To use the above attributes for Ordered List , you just need to add -> type=”1″ inside the <ol> markup.

EXAMPLE :

 

Unordered List <ul> :

To make an unordered list we have to use nested tags ,  <ol> tag with <li> ( nested inside ) where li represents each list item .

StyleDescription
list-style-type:discThe list items will be marked with bullets (default)
list-style-type:circleThe list items will be marked with circles
list-style-type:squareThe list items will be marked with squares
list-style-type:noneThe list items will not be marked

Similarly we can add different types of styles to our unordered list simply by adding this simple css inline style

EXAMPLE :

Description Lists :

The <dl> tag defines a description list. The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

EXAMPLE :

Make horizontal menu bar by using list !!

We can also use lists to make horizontal menus in websites  that can be done by adding some css style called inline .

Other than the lists in html , there are many ways in which you can group content in html that are used to get different results at different places. The list as follows :-

 GROUPING CONTENT
<p>Paragraph
<hr>Content separator
<pre>Preformatted text block
<blockquote>Block level quotation
<ol>Ordered list
<ul>Unordered list
<li>List item
<dl>Description list
<dt>Term in a description list
<dd>Description in a description list
<figure>Self-contained information
<figcaption>Caption for a figure
<main>Main content of a section
<div>Generic container for blocks of text

READ MORE : Complete HTML tags / elements list

 

Get PDF version of this article for reading offline by clicking pdf icon above . 

Leave a Reply

Your email address will not be published. Required fields are marked *