What is a list? Explain its types with examples.
Lists is a HTML feature used to group together related pieces of information in a list so they are clearly associated with each other and easy to read.
Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles.
There are three list types in HTML:
Each list type has a specific purpose and meaning in a web page.
Unordered (bulleted) lists are used when a set of items can be placed in any order. An example is a shopping list:
Although the items are all part of one list, you could put the items in any order and the list would still make sense:
You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets — we’ll look at how to do that in the Styling lists and links article.
Unordered lists use one set of <ul></ul> tags wrapped around one or more sets of <li></li> tags:
<ul> <li>bread</li> <li>coffee beans</li> <li>milk</li> <li>butter</li> </ul> Ordered (numbered) lists are used to display a list of items that should be in a specific order. An example would be cooking instructions:
If the list items were moved around into a different order, the information would no longer make sense:
Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available:
As with unordered lists, you can use CSS to change the style of your ordered lists. See Styling lists and links for more information.
Ordered lists use one set of <ol></ol> tags wrapped around one or more sets of <li></li> tags:
<ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol> A common requirement in ordered list usage is to get them to start with a number other than 1 (or i, or I, etc.). This is done using the start attribute, which takes a numeric value (even if you’re using CSS to change the list counters to be alphabetic or Roman). This is useful if you have a single list of items, but need to break up the list with a note or other related information. For example, we could do this with the previous example:
<ol> <li>Gather ingredients</li> <li>Mix ingredients together</li> <li>Place ingredients in a baking dish</li> </ol> <p>Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.</p> <ol start="4"> <li>Bake in oven for an hour</li> <li>Remove from oven</li> <li>Allow to stand for ten minutes</li> <li>Serve</li> </ol> This gives the following result:
Before you place the ingredients in the baking dish, preheat the oven to 180 degrees centigrade/350 degrees fahrenheit in readiness for the next step.
Note that this attribute was deprecated in HTML 4, so it will prevent your page from validating if you are using an HTML4 strict doctype. If you want to make use of such functionality in an HTML4 strict page, and it absolutely has to validate, you can do it using CSS Counters instead. Fortunately, however, the start attribute has been reinstated in HTML5.
Description lists (previously called definition lists, but renamed in HTML5) associate specific names and values within a list. Examples might be items in an ingredient list and their descriptions, article authors and brief bios, or competition winners and the years in which they won. You can have as many name-value groups as you like, but there must be at least one name and at least one value in each pair.
Description lists are flexible: you can associate more than one value with a single name, or vice versa. For example, the term “coffee” can have several meanings, and you could show them one after the other:
coffee a beverage made from roasted, ground coffee beans a cup of coffee a social gathering at which coffee is consumed a medium to dark brown colour
Or, you can associate more than one name with the same value. This is useful to show variations of a term, all of which have the same meaning:
soda pop fizzy drink cola a sweet, carbonated beverage
Description lists use one set of <dl></dl> tags wrapped around one or more groups of <dt></dt> (name) and <dd></dd> (value) tags. You must pair at least one <dt></dt> with at least one <dd></dd>, and the <dt></dt> should always come first in the source order.
A simple description list of single names with single values would look like this:
<dl> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> <dt>Name</dt> <dd>Value</dd> </dl> This is rendered as follows:
Name Value Name Value Name Value
In the following example, we associate more than one value with a name, and vice versa:
<dl> <dt>Name1</dt> <dd>Value that applies to Name1</dd> <dt>Name2</dt> <dt>Name3</dt> <dd>Value that applies to both Name2 and Name3</dd> <dt>Name4</dt> <dd>One value that applies to Name4</dd> <dd>Another value that applies to Name4</dd> </dl> That code would render like this:
Name1 Value that applies to Name1 Name2 Name3 Value that applies to both Name2 and Name3 Name4 One value that applies to Name4 Another value that applies to Name4
The link is a feature in HTML that allows the user to connect two webpages or documents.Alinkhas two ends -- calledanchors-- and a direction. The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse...
he<table>tag defines an HTML table.
An HTML table consists of one<table>element and one or more<tr>,<th>, and<td>elements.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
An HTML table may also include<caption>,<colgroup>,<thead>,<tfoot>, and<tbody>elements.
A simple HTML table, containing two columns and two rows:
<table>
