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