What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption".
Fruit
How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?
The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.
Use the <ul> tag together with the <li> tag to create unordered lists. Tip: Use CSS to style lists. Tip: For ordered lists, use the <ol> tag.
Types of Ordered Lists in HTML You can do these by specifying the value of the type attribute of the <ol> tag. You can order the list using A, B, C letters by passing A as the type value. Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so on.
The <label> tag is used to specify a label for an <input> element of a form. It adds a label to a form control such as text, email, password, textarea etc. It toggles the control when a user clicks on a text within the <label> element.
While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:
Nested List
<ul> <li> Fruit <ul> <li>Apple</li> <li>Pear</li> <li>Organge</li> </ul> </li> </ul>
Heading Prior to List
<hX>Fruit</hX> <ul> <li>Apple</li> <li>Pear</li> <li>Orange</li> </ul>
Definition List
<dl> <dt>Fruit</dt> <dd>Apple</dd> <dd>Pear</dd> <dd>Orange</dd> </dl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With