HTML Code - HTML Lists And Menus
Lists Of Information ...
One advantage of HTML having originated as a text formatting language is that it has a variety of methods to display lists of information on a web page. The number of lists has been reduced in recent years and some of the earlier HTML lists are now depreciated but we are still left with a rich variety of ways to displat lists of information. The really significant changes apply to formatting lists and the formatting function is now the province of CSS (Cascading Style Sheets) rather than the now depreciated HTML Tag Attributes which we discuss further down the page. This page explains and demonstrates the modern usage of HTML Lists.
Different List Types...
There are effectively three different types of HTML lists that can be used safely on modern web pages and these are the Unordered List, the Ordered List and the Definition List. If used correctly, they should work correctly in all modern web browsers and other User Agents. They will all validate to the W3C '4.01 Strict' standard and pass WCAG Web Accessibility testing guidelines. HTML lists can be nested which means for example that you can use an Ordered List inside an Unordered List.
unordered list
basic Unordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>
Unordered List default rendering ...
- This is List Item one ...
- This is List Item two ...
- This is List Item three ...
ordered list
basic Ordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>
Ordered List default rendering ...
- This is List Item one ...
- This is List Item two ...
- This is List Item three ...
definition list
Definition Lists are slightly different from the other list types in that list items consist of two parts, the term and a corresponding description. In my opinion, Definition Lists are under used and because of this I have taken extra time to describe them in a way that I hope, enables users to grasp the principles of Definition Lists more easily. I have also used indenting to make the Markup easier to read and understand.
basic Definition List ...
<dt>DL (Definition List) Tag</dt>
<dd>This is the outer contaier for the Definition List ...</dd>
<dt>DT (Definition Term) Tag</dt>
<dd>This is the container for the term to be defined ...</dd>
<dt>DD (Definition Description) Tag</dt>
<dd>This is the container for the description of the term being defined ...</dd>
<dd>(you can have multiple descriptions for each Definition Term)</dd>
</dl>
Definition List default rendering ...
- DL (Definition List) Tag
- This is the outer contaier for the Definition List ...
- DT (Definition Term) Tag
- This is the container for the term to be defined ...
- DD (Definition Description) Tag
- This is the container for the description of the term being defined ...
- (you can have multiple descriptions for each Definition Term)
Applying CSS Formatting ...
We have a explained the different types of HTML lists that you can use in modern web authoring to provide structure and we can now move on to the different ways you can add formatting to these lists using CSS. In all our examples we have used Inline styles but in reality you are better using a Style Tag in the HEAD of your page or better still, an external Style Sheet to store all your style information. Although you can apply CSS formatting to any HTML element W3C strongly recommends that you restrict the use of the following 'list-style' styles to the Ordered List 'OL' Tag or the Unordered List 'UL' Tag.
list-style-type
used in an Unordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>
rendered in an Unordered List using 'list-style-type:square' ...
- This is List Item one ...
- This is List Item two ...
- This is List Item three ...
used in an Ordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ol>
rendered in an Ordered List using 'list-style-type:lower-alpha' ...
- This is List Item one ...
- This is List Item two ...
- This is List Item three ...
list-style-image
A new feature introduced by CSS is this very cool style that allows you to specify your own image instead of using a standard bullet or number to mark each List Item. Images must be in GIF, JPG or PNG format in accordance with normal web image ruquirements and the image dimensions should be proportinate to the list you are displaying. In our example we have used a pointing hand image which we use throughout the Web-Wise-Wizard site to draw attention to links that point to related pages. Our hand image is in GIF format and has a filesize if 178 bytes. The image is 35 pixels wide and 18 pixels high, and has been created with a transparent background. Because of the size of the image you will see that the images in our example appear crowded and you should really use a style to improve the appearance by increasing the line height to perhaps 200%.
used in an Unordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>
rendered in an Unordered List using 'list-style-image:url(../images/hand-blue.gif)' ...
- This is List Item one ...
- This is List Item two ...
- This is List Item three ...
list-style-position
used in an Ordered List ...
<li>This is List Item one which we have deliberately created as a much longer line.</li>
<li>This is List Item two which we have deliberately created as a much longer line.</li>
<li>This is List Item three which we have deliberately created as a much longer line.</li>
</ol>
rendered in an Ordered List using 'list-style-position:inside' ...
- This is List Item one which we have deliberately created as a much longer line.
- This is List Item two which we have deliberately created as a much longer line.
- This is List Item three which we have deliberately created as a much longer line.
list-style
The 'list-style' property is the CSS shorthand way for setting any of the three properties 'list-style-type', 'list-style-image' and 'list-style-position', all at the same time. The problem with using this property is that it can get very confusing if you are new to CSS and HTML lists and the responsibility lies squarely with the page developer to make sure that theu use values that are appropriate for the list. If you are new to CSS or HTML lists then my recommendation is that for the sake of clarity, you stick to the using the three 'list-style' properties described above until you become familiar with their usage.
used in an Unordered List ...
<li>This is List Item one ...</li>
<li>This is List Item two ...</li>
<li>This is List Item three ...</li>
</ul>
Depreciated Attributes ...
Remembering that formatting HTML Markup is now a function of CSS, we list the HTML Attributes that were previously used to format HTML lists. These Attributes are now depreciated and should not be used. All the formatting functions previously accomplished using these Attributes (plus many more) should now be accomplished using CSS.
type compact
for Unordered Lists the Attributes TYPE and COMPACT are now depreciated ...
<li></li>
<li></li>
<li></li>
</ul>
type start compact
for Ordered Lists the Attributes TYPE, START and COMPACT are now depreciated ...
<li></li>
<li></li>
<li></li>
</ol>
value attribute
the Attribute VALUE, used in List Items is now depreciated ...
<li></li>
<li value="5"></li>
<li></li>
</ol>
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...
