Tema: 5 importantes elementos HTML que se usan poco

Algunos elementos no son muy usados al crear sitios en HTML. La mayoría son de valor semántico, más que funcional. Pero justamente, hoy en día se está dando cada vez mayor importancia al HTML Semántico, gracias a la ayuda de CSS. Usamos estilos CSS para programar la presentación de un documento, pudiendo utilizar HTML para lo que realmente fue concebido: el contenido. Toma nota de los siguientes puntos, tal vez estés aplicándolos en tu sitio antes de que te des cuenta.
<address>
Este tag fue creado para contener direcciones, firmas e información de autoría. También puede usarse para incluir números de teléfono, fax, e-mail, AIM, ICQ, etc.
Suele encontrarse este tipo de tags al principio o al final de un documento.
Uso:
<address>
My Company
<br />
1234 Somewhere Lane
<br />
Seattle, WA
<br />
Phone: (123) 456-7890
<br />
Fax: (123) 456-7890
</address>
¿Cuál es el punto si puedo hacer esto con un tag <div>?
Simplemente los elementos agrupados con <div> no tienen valor semántico a menos que sean asignados a una clase o ID.
¿Por qué crear <div class=”contact”> cuando ya existe un elemento que lo hace por ti?
Ejemplo:
address {
background: url(/images/bg_address.jpg) no-repeat bottom left;
padding: 35px 0 35px 35px;
font-style: normal;
}
<address>
<a href="http://www.seomoz.org/matt.php">Matt Inman</a>
<br />
SEOmoz.org LLC
<br />
4314 Roosevelt Way NE
<br />
Seattle, WA 98105
</address>
<q>
Nota importante: esta joyita aparentemente no funciona en Internet Explorer.Muchos desarrolladores han caído en la práctica de usar entidades como &quo; para agregar citas (quotes) al texto. El tag <q> lo hace a la perfección.
Quotes incrustadas:
Una de las ventajas de usar el tag <q> es el comportamiento de quotes. si incluyes <q> dentro de otro <q> automáticamente modificará el aspecto de las citas. El modo por defecto es que las internas externas estén encerradas por comillas dobles y las interiores por simples.
Ejemplo:
<q>
The internet, or <q>interweb</q>, is full of bitchin content</q>,
said Matt,
<q>If I were to surf the <q>interweb</q> I'd totally do it nekkid
</q>
Aplicando estilo a las citas:
Puedes usar el siguiente comando CSS.
q {
quotes: "«" "»" "'" "'";
}
<optgroup>
¿Alguna vez tuviste un puñado de elementos <option> dentro de una caja <select> que querías agrupar dentro de categorías pero no querías que fueran seleccionables? <optgroup> hace exactamente eso.
Ejemplo:
<select>
<optgroup label="Mammals">
<option value ="dogs">Dogs</option>
<option value ="mrrow">Cats</option>
<option value ="pigs">Pigs</option>
</optgroup>
<optgroup label="Reptiles">
<option value ="lizards">Lizards</option>
<option value ="geckos">Geckos</option>
<option value ="iguanas">Iguanas</option>
</optgroup>
</select>
<acronym> o <abbr> combinados con title attribute
Los tags <acronym> y <abbr> definen abreviaciones. Para ganar valor semántico, usándolos combinados con title attribute mostrará la versión expandida de la expresión elegida.
Ejemplo:
<acronym title="Search Engine Optimization">SEO</acronym>
<fieldset> y <legend>
<fieldset> es excelente para usar al agrupar items dentro de un formulario. Por defecto dibujará una caja alrededor de los elementos contenidos, combínalo con <legend> para obtener los datos de tu formulario.
Dándole estilo a <fieldset> con CSS:
fieldset {
border-top: 1px solid #efefef;
border-left: 1px solid #efefef;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 1em 1em 1em 1.5em;
}
fieldset:hover {
background: url(/images/bg_fieldset.gif) repeat-y;
border: 1px solid #3A789D;
}