Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to semantically provide a caption, title or label for a list in HTML

What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption".

Fruit

  • Apple
  • Pear
  • Orange

How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?

like image 593
Jon P Avatar asked Jul 17 '09 06:07

Jon P


People also ask

How do you add a caption in HTML?

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.

How do you put a heading on a list in HTML?

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.

How do you name a list in HTML?

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.

What is label tag in HTML?

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.


1 Answers

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> 
like image 103
ahsteele Avatar answered Sep 30 '22 20:09

ahsteele