There are different types of lists in HTML. Firstly, there are the bulleted lists. With this list type, the individual list entries are provided with a bullet character, the so-called bullet.
Bulleted lists are introduced using the ul element. The individual list entries are identified by the li element.
<p>Atual topics from the forum</p> <ul> <li>CSS is not further explained</li> <li>Showroom Hollywood style of the 40s</li> <li>Fold-out list CSS</li> <li>PHP connect/disconnect</li> <li>My little showroom - beginner asks for tips!</li> </ul>
Here's a look at the result in the browser:
A bullet point is inserted before each post. How this looks by default is determined by the browser. Although there are attributes that can be used to influence the appearance of the lists, these should no longer be used. CSS properties come into play instead.
Enumeration lists can also be nested. First, take a look at the following illustration:
This clearly shows what such nesting is all about.
The syntax looks like this:
<ul> <li>Tutorials <ul> <li>2D</li> <li>3D</li> <li>Web</li> </ul> </li> <li>Video trainings <ul> <li>3D</li> <li>Media design</li> <li>Web</li> </ul> </li> <li>Tips</li> <li>Shops</li> </ul>
There can therefore be another list within a list entry. This does not necessarily have to be a bulleted list. In fact, other list types - which will be introduced in this tutorial - can also be inserted.
Incidentally, it is not absolutely necessary to use the closing </li> in HTML5. However, I would always close it for better readability. Syntactically correct would also be something like this:
<p>The current topics from the forum</p> <ul> <li>CSS is not executed further <li>Showroom Hollywood style of the 40s <li>Foldout list CSS <li>PHP connect/disconnect <li>My little showroom - beginner asks for tips! </ul>
Numbered lists
In addition to bulleted lists, numbered lists can also be defined. Here, too, is an image that shows what numbered lists are all about.
The list entries are therefore preceded by consecutive numbers. Numbered lists are introduced by the ol element.
The following example shows how this element can be used.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
As with bulleted lists, the individual entries are marked by the li element.
Theoretically, bulleted lists can also be nested.
<ol> <li>Tutorials <ol> <li>2D</li> <li>3D</li> <li>Web</li> </ol> </li> <li>Video trainings <ol> <li>3D</li> <li>Media design</li> <li>Web</li> </ol> </li> <li>Tips</li> <li>Shops</li> </ol>
However, the result in the browser is sobering.
Numbering according to the following scheme is not achieved:
1. tutorials 2D
1.1 3D
1.2 Web
- Video tutorials 3D
2.1 Media design
2.2 Web - Tips
- Stores
This is not possible with pure HTML. In fact, you have to use CSS to automatically number content according to such a scheme.
Definition lists
Another list variant are the so-called definition lists. Here, too, is an example of what such a list ultimately looks like in the browser:
The main area of application for definition lists is glossaries. Here is the syntax that led to the output shown above:
<dl> <dt>AM</dt> <dd>AM - Air Mail</dd> <dd>AM - Air Marshal</dd> <dd>AM - Amberg</dd> <dd>AM - Americium</dd>
<dd>AM - Amstetten</dd> <dt>AN</dt> <dd>AN - above named</dd> <dd>AN - Access Node</dd> <dd>AN - Ancona</dd> </dl>Definition lists always have three elements. The lists are introduced by the dl element. This is the outer structure. The expression to be defined is identified by a dt element. Ultimately, this is the definition term. The definition description in turn is specified via the dd element.
It is also possible to nest definition lists. This works in exactly the same way as shown for the other list variants.
How the definition lists look by default is again determined by the browser. Ultimately, however, you can use CSS to define the desired layout yourself.
In earlier HTML versions, there were also menu and directory lists. The two elements menu and dir were used for this. The dir element is no longer included in HTML5. The situation is different with menu. This element has been newly implemented and can be used for context menus and toolbars in future. Here is an example of how the W3C envisions a typical menu application:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
At the moment, however, this is not yet supported by any browser.
Therefore, menu should not be used at this time.
Designing lists
A note on the lists. Many websites rely on corresponding HTML attributes for the design of lists. For example, you can use <ul type="square"> to ensure that rectangles are displayed in front of the entries in the bulleted lists.
The type of numbering can also be defined for numbered lists.
<ol type="A">
Here, however, you should not use everything that is offered. The corresponding CSS properties are more suitable. You should therefore actually use these to customize the lists according to your wishes. Detailed information on CSS will follow in this series.
