There are web authors I know who are quite passionate about slotting in lists in their web pages. And if seen from a reader’s perspective, lists are simply the best and the easiest of all approaches in making the points of significance stand out distinctly and without fail draw attention to reading them. And probably you are amongst one of those web-based authors who has been longing to introduce listed items in your web pages! Your wish is my command, and I’m here to advocate ways of having those HTML lists in your pages! The concept of listing out items and points of significance continues to top the list of popularity. And what has made lists so very popular? It is none other than the easy-to-read format in which the text pieces are presented over the web page for their readers.
HTML Lists – let’s make this our topic of discussion for this particular lesson....
Welcome to lesson 7 – Listing your Texts in HTML
Typically there are three kinds of lists that are widely and most commonly spoken of and used in the world of HTML; and they are the ordered list, the unordered list and the defined list. Unordered lists are better known as the “bulleted” lists and ordered lists are the ones wherein we have the items listed out in sequential number formats. Talking about defined lists … we’ll talk about them in one of our later lessons. This being an introductory lesson in the domain of HTML lists let’s simply stick to the basic listing tags. Here we aim to explain and illustrate the approaches of styling your HTML documents with the ordered and unordered lists. And the other type of list that is also included in our agenda of discussion are the nested lists – or better to say lists of lists that are generally used to creating an outline format.
Think of inserting a TOC (Table of Contents) in your HTML document and how versatile a list may prove to be under such a circumstance! Following the footsteps of its cousin tags, list tags too comprise of an opening and a closing tag.
Ok, so which one should we take up to begin with – the ordered list or the unordered one? Well, for simplicity’s sake let’s start working with the unordered list. As informed previously, this is the “bulleted” form of list with <ul>…. </ul> tags. Enclosed with the <ul>… </ul> tags, list out your points/ items within the <li>… </li> tag. Without the <li> tags, the <ul>… </ul> will make no sense. Following is an example:
Now coming to ordered lists – it is the list that displays your items in a sequentially numbered manner. It is defined by the <ol>… </ol> tags. Once again you need to enclose your listed items within the <li>… </li> tags without which <ol> tags will make no sense. An example:
So now you are well-versed with the list tag concepts; let’s move on to using the same in our HTML document. Don’t worry… it’s no difficult a task, rather this is something that pledges to make working on an HTL document all the more exciting. Following are the simple steps to apply the list tags in your HTML document:
- Open the working HTML document in text editor program.
- Take up a section or a sub-section, and out there we will try and use an unordered list to display certain points of significance. Once you've selected the section wherein the change has to be implemented, locate that segment in your HTML document.
- "How many kinds of HTML lists are there?"
- Following the question, you may want to list out the answers. Now enter the HTML format to create the list of answers.
- There are typically 3 kinds of HTML lists:
<ul>
<li>Ordered Lists
<li>Unordered Lists
<li>Defined List
</ul>
- With the unordered list created, now we’ll go ahead and list out the topics of discussion necessary to learn the basics of HTML. For example:
<ol>
<li>Have an overview of HTML
<li>Create an HTML document
<li>Modify the created document
<li>Insert headings and paragraphs in your document
<li>Style your HTML texts
</ol>
- Once you're done, save your HTML file, return to your web browser, reload your document, and now you should be able to view the changes.
Now let's focus a bit on the third, yet the not so popular kind of listing – the nested lists. Nested list, huh? Never heard of it? It’s a combo pack – the offspring to the family of ordered and unordered lists. A general format of a nested list is as follows:
In the example above, it is important to note how the bulleted marks are changing with every passing level!
There’s no hard and fast rule to include nested lists solely within ordered/ unordered lists. There can be mishmashes. Refer to the following example for an ordered list enclosing a nested unordered list:
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 23/05/2009
