HTML
Aug 13, 2011
admin
Comments Off

Formatted Lists in HTML Document

Hyper Text Markup Language (HTML) is the basic building-block of all web pages. HTML makes objects and images to be used in various interactive forms. It denotes structural semantics for text and helps creating structured documents. For example the text containing lists, quotes, headings, and links etc can be structured using HTML. In this way it facilitates the user to access information in a comfortable way. The various text styles and tools used for formatting organize the information into documents, which helps users to understand quickly and extracting the useful information from the whole page.

Formatted lists in HTML are the most important part of organizing the web page contents. The important lists are unordered lists, ordered lists, nested lists, directory lists etc. These all have their unique purposes for different applications. These lists are very simple in nature and are based on our daily life common list epitomes such as a shopping list, list of your favorite things (all types) etc.

As the name says, an unordered list is a collection of related items, but with no particular order. Links to other sites on a web page is a typical example of an unordered list. To identify if the contents are unordered inside a web page, a <ul> tag is used, which gives indication to the web browser. It tells that any content, which ends with the </ul> tag, is an unordered list of items. Inside, each item in the unordered list is identified by a leading <li> tag. This list is mainly used for few numbers of items without having any sequence.

To make better appearance and ease of reading, we need to format the different types of lists.

Formatted lists in HTML are the result of various format controlling elements. Cascading

Style Sheets (CSS) is one of these format controlling elements, which offers a variety of unique and beautiful properties such as list of bullet styles, creating horizontal lists. CSS helps you changing font size & style, changing color of the items of the list and also the position of the items within the list. Thus it is encouraged to use CSS, even by the maintainer of the HTML standard.

Here is an example of list-style-type property of CSS. It modifies a list’s bullet style. This example re-numbers an ordered list using alphabetical numbering:

 

<html>

<head>

<style type=”text/css”>

li {

list-style-type: upper-alpha

}

</style>

</head>

<body>

<ol>

<li>Pay the bill</li>

<li>buy fruits</li>

<li>call the plumber</li>

</ol>

</body>

</html>

 

The output is:

A) Pay the bill

B) Buy fruits

C) Call the plumber

 

There are a lot more styles available to be used for formatting. The most interesting thing about CSS is that you can customize your own style of bullet. Here we use the list-style-image property of CSS, where an image file is used as bullet. This makes CSS a powerful tool to be used for effective formatting and presenting the user a well organized page of contents.

 

Comments are closed.