Ejemplo:
También tenemos a "thead" y "th" para generar encabezados semánticos a nuestras tablas.
Como en las listas no existe nada de esto, pensé en utilizar el atributo title de todo elemento y combinarlo un poco con los pseudo-elementos "before" y "after" para poder obtener mi título semántico.
El código es el siguiente:
<ul title="Navegadores que soportan título semático en UL OL DL"> <li>IE 8+</li> <li>FF 3+</li> <li>Chrome</li> <li>Opera 6+</li> <li>Safari 4+</li> </ul>
Y el CSS aplicado:
ul{ list-style-type:square; padding-left:20px; } ul:before{ content:attr(title); position:relative; left:-20px; color:blue; font-weight:bold; }
Para obtener este resultado