More about WEB PAGE
Anatomy of the <head>
Grouping content
- Understanding the need to group content
- Using the div Element
- Grouping content into lists
- Dealing with figures
Creating advanced tables
- Adding table headers cells
- Denoting the headings and the table body
- Creating irregular tables
- Applying borders to the table element
Form Handling
- The action attribute
- The method attribute
- Configuring the Data Encoding
- Controlling form completion
- Setting the name of the form
- Adding labels to a form
- Automatically focusing on an input element
- Disabling individual input elements
- Grouping form elements together
- Using the button element
Customizing the input element
- Using the input element for text input
- Setting values and using placeholders
- Using a data list
- Creating read-only and disabled text boxes
- Restrict data entry
Using input validation
HTML defines a number of elements that you can use to create lists of content items. As we describe in the following sections, you can create ordered, unordered, and descriptive lists.
The ol element
The ol element denotes an ordered list. The items in the list are denoted using the li element, which is described in the following section.
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
I also like:
<ol>
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>You can control the way that the items in the list are managed using the attributes defined by the ol element. You use the start attribute to define the ordinal value of the first item in the list. If this attribute is not defined, the first item is assigned the ordinal value of 1. You use the type attribute to indicate which marker should be displayed next to each item. The below table shows the supported values for this attribute.
The ul element
We use the ul element to denote unordered lists. As with the ol element, items in the ul element are denoted using the li element, which is described next. The ul element contains a number of li items. The element doesn’t define any attributes and you control the presentation of the list using CSS.
Using the ul Element
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
I also like:
<ul>
<li>bananas</li>
<li>mangoes</li>
<li>cherries</li>
<li>plums</li>
<li>peaches</li>
<li>grapes</li>
</ul>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>Each list item is displayed with a bullet. You can control which style bullet is used through the list-style-type CSS property.
The li element
The li element denotes an item in a list. You can use it with the ul and ol elements. The li item is very simple. It denotes a list item within its parent element. You can, however, use the value attribute to create nonconsecutive ordered lists.
Creating Nonconsecutive Ordered Lists
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
I like apples and oranges.
I also like:
<ol>
<li>bananas</li>
<li value="4">mangoes</li>
<li>cherries</li>
<li value="7">plums</li>
<li>peaches</li>
<li>grapes</li>
</ol>
You can see other fruits I like <a href="fruitlist.html">here</a>.
</body>
</html>When the browser encounters a li element with a value attribute, the counter for the list items is advanced to the attribute value.