El rincón de JMACOE

Aparte de las etiquetas más comunes, como <a> y <img>, hay todo un conjunto de etiquetas infrautilizadas actualmente en la especificación HTML con una potencial y rica semántica para el marcado. En los años anteriores a la llegada de la CSS, los desarrolladores tenían razones para utilizar siempre las mismas etiquetas con el fin de controlar su presentación, que variaba con el marcado en lugar de reglas personalizadas. Basta pensar en <b> y <font>.

Ahora que los CSS son bien soportados, no hay razón para no aceptar la etiqueta adecuada para el trabajo correcto, y comenzar a incluir las siguientes etiquetas en tu marcado. El Explorador también es muy bueno para los propias etiquetas: son más viejos de lo que piensas.

No estoy hablando de rellenos como <acronym> o <abbr>: Sé que no es tan útil y que nunca incluistes una de estas abreviaturas en el cuerpo del texto. Estas etiquetas no son de cambio de vida, pero hacen una diferencia en la facilidad de uso y claridad del código. Si no estás seguro de lo que sería mostrado por algunos de los fragmentos, le animo a probarlos en tu navegador. Han sido probados y funcionales en Firefox 3.6.

• <fieldset> es una forma de agrupar un conjunto de campos del formulario, como entradas o áreas de texto. No es una ventaja su uso al tener formularios largos, pero cuando deseas, puedes dividir el formulario en varias secciones usando este elemento de bloque.
• <legend> va de la mano con <fieldset>: cuando lo inserta en un fieldset, su contenido se mostrará como el título del grupo de campos:

<form>
<fieldset>
    <legend>My fields<legend>
    <p>Enter your name... <input type="text" name="nickname" /></p>
</fieldset>
</form>

• <label> tiene ambos peso semántico y práctico que nunca ves comúnmente empleadas para el bien. Una etiqueta debe estar asociada a un campo de formulario en una de las dos maneras que voy a mostrar. Cuando la etiqueta está relacionada con el campo de esta manera, actúa como una extensión de el, por ejemplo, al hacer clic en la etiqueta del checkbox, dentro y fuera de la propia caja. En su lugar, al hacer clic en la etiqueta de un campo de texto pasara el foco y colocara el cursor en él, por lo que el usuario estará listo para escribir. Por lo tanto, las etiquetas extienden el área clickeable a disposición de los usuarios.

  Pero eso no es todo. Las etiquetas tienen también una asociación semántica con elementos de formulario, y como tales son leídos por los lectores de pantalla cuando se accede a un formulario. No hay ninguna razón para inventar un estilo para las etiquetas <div> en los formularios: pone las etiquetas en su lugar.

  Puede enlazar una etiqueta a un campo al incluir el campo en la propia etiqueta:

  <label><input type="checkbox" name="agree" /> I agree to the terms and conditions</label>
  

  O puedes utilizar un ID de la etiqueta de entrada que refieres en la etiqueta. El método que debes usar es cuestión de simplificar la aplicación de estilos para ambos elementos.

<label for="nickname">Nickname</label>
<input type="text" id="nickname" name="nickname" />

• La <button> elemento de bloque es mucho más flexible que su primo <input type=»button»> y <input type=»submit»>. La razón es que se pueden anidar otras etiquetas en el contenido <button>.
  Así se puede pasar de un simple botón:

  <input type="button" value="A button" />
  

  a otro más complejo:

<button><strong>A strong button</strong></button>

• <dl> significa Lista de definición. Es el equivalente de <ol> y <ul> cuando el elemento básico es una tupla compuesta por dos valores: nombre y contenido. Esto se utilizaron originalmente para glosarios, pero puedes encontrar muchas más soluciones creativas en la web.
• <dt> es el término definido, utilizado en la lista de definición anterior.
• <dd> es la definición de contenido.

  Por ejemplo, Zend Framework por defecto renderiza los formularios de esta manera:

  <form>
  <dl>
      <dt>Nickname:</dt>
      <dd><input type="text" name="nickname" /></dd>
  </dl>
  </form>
  

  Y es de hecho una forma de eliminar algunas de las reglas <div class=»label»>.

• <optgroup> se utiliza para agrupar opciones dentro de un elemento de selección. Cuando hay muchas etiquetas <option>, una capa simple de jerarquía puede recorrer un largo camino en ayuda al usuario en su elección. Sólo las opciones mismos serían seleccionables, pero la etiquetas optgroup actúan como un título para el grupo.

  <select name="enemy">
      <optgroup label="Milky Way">
          <option value="Apophis">Apophis</option>
          <option value="Anubis">Anubis</option>
          <option value="Replicators">Replicators</option>
      </optgroup>
      <optgroup label="Pegasus galaxy">
          <option value="Wraith">Wraith</option>
          <option value="Genii">Genii</option>
      </optgroup>
  </select>
  

• <blockquote> es un elemento de bloque dedicado para citar otras fuentes. Es probablemente uno de los que más adoptados de las etiquetas descritas en este artículo. Puedes decir adiós a <div class=»quote»> si no lo tienes actualmente.
• <col> y <colgroup>, cuando se inserta entre una etiqueta <table> y su contenido, respectivamente, actúan como marcadores de posición de una columna o de un conjunto columnas. Cada vez que desea aplicar los estilos basados en columnas, en lugar de repetir las clases en todas las celdas de la tabla sólo tiene que organizalos en torno a las columnas:

  <table>
      <col style="background-color: grey;" />
      <col style="background-color: blue;" />
      <tr>
          <td>A</td>
          <td>B</td>
      </tr>
  </table>
  

Espero que te hayas ganado con algunos consejos de los que no eras conscientes – siéntate libre de añadir tus etiquetas HTML abandonadas en los comentarios si crees que serían realmente útiles.