banner
Welcome to HTML.co.uk, the number one resource for all news, information, and happenings regarding HTML.

Updates: HTML.co.uk has just been relaunched. Subscribe to our RSS Feed to stay on top of HTML news and techniques.
Jun
27th

Working with Unordered/ Bulleted Lists in HTML

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

Like the ordered lists, the unordered or bulleted lists are also used to present the data in a more meaningful, readable and understandable way. Unlike the ordered lists the unordered ones puts a bullet instead of a number or alphabet in front of every list item. The HTML tags used to create the unordered lists are <UL>…</UL>. Unordered lists can also be used in a variety of styles. By default most of the web browsers use bullets to delineate unordered list items. Some text browsers such as Lynx put an asterisk sign before the unordered list item.

Example code for creating an unordered list:

<UL>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

The output of the above code will be as follows:

  • Content
  • Resume
  • E-Book
  • Blogs
  • SEO
  • SMO

Instead of simple bullets we can also use other symbols as far as they are supported by the web browser. In order to accomplish this we have to use ‘TYPE’ attribute with the <UL> HTML tag. For example:

<UL TYPE=”SQUARE”>
<LI> Content </LI>
<LI> Resume </LI>
<LI> E-Book </LI>
<LI> Blogs </LI>
<LI> SEO </LI>
<LI> SMO </LI>
</UL>

Using the above HTML code we will get the following output:

  • Content
  • Resume
  • E-Book
  • Blogs
  • SEO
  • SMO

We can also use different types of symbols in the same unordered list and ordered list with the bulleted one. A sub-list under a main list can also be created. This process is popularly known as nesting of lists and such kind of lists are called ‘Nested Lists’. Below is a comprehensive example of a nested list which consists of both the numbered and bulleted styles.

HTML Code:

<HTML>
<OL TYPE=”I” START=”V”>Guess what we will be discussing today?
<OL TYPE=”1”>
<LI> Its all about vegetables </LI>
<OL TYPE=”A”>
<LI> Carrot
<UL>
<LI> Its red in color </LI>
</UL>
<LI> Tomato </LI>
<UL TYPE=”CIRCLE”>
<LI>Its also red in color </LI>
</UL>
<LI> Potato </LI>
<UL TYPE=”SQUARE”>
<LI> It’s the odd one out as it is brown in color </LI>
</UL>
</OL>
</OL>
</OL>
</HTML>

In this way we can try infinite combinations of tags to design our lists. Nested lists can be made more beautiful if non-breaking spaces i.e. < & nbsp > is used. It will increase indents and the sub-lists will be easily presented under the main ones.


No Comments
Jun
24th

Working With Glossary/Definition Lists

Author: Editor | Files under HTML Tutorials
Tags for this article: , , , , ,

Glossary lists are those lists which are used to represent main terms along with their definition in HTML documents. These kinds of lists are used to make glossaries also. Glossary lists (also known as Definition lists) are different from the ordered lists as well as unordered ones in a way that it formats the content in a special way so that it looks like a list of items along with their description.

Glossary Lists have two main parts:

1) The Term
2) The Term’s Definition

The term is the main entry and the term definition is the description of that entry. In order to make a glossary list the <DL>…….</DL> tags are used and to insert the term and term definition <DT>…</DT> and <DD>…..</DD> tags are used.

Sample Code for creating Glossary lists:

<DL>

<DT> Natural Language Search Engines </DT>

<DD> These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French and German etc. </DD>

<DT> Subject Directories Search Engines </DT>

<DD> These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search. </DD>

<DT> Subject Guide Search Engines </DT>

<DD> These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme. </DD>

<DT> Meta Search Engines </DT>

<DD> These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format. </DD>

</DL>

The output of the above code is as follows:

Natural Language Search Engines
These search engines allow the users to submit search phrases in natural languages such as English, Hindi, Japanese, Chinese, French, and German etc.

Subject Directories Search Engines
These search engines present the results of searches in hierarchical subject categories instead of listing them in any order by how relevant the search engine thinks the site is to the search.

Subject Guide Search Engines
These search engines contain links of many important resources on a topic. They differ from subject directories search engines in the same sense that their search request interface has forms that contain databases of sites on many subjects, organized into a subject classification scheme.

Meta Search Engines
These search engines do not create their own databases but make use of the databases of other search engines. They quickly process the user’s search request by invoking several individual search engines at once and return the results complied into a convenient format.

We can also use the ‘COMPACT’ attribute of

tag in case the definition terms are very short. List nesting can also be done in glossary lists with the help of ordered and bulleted lists within it.


No Comments