Dos Punto Cero (BETA): 10 Etiquetas (tags) HTML que tal vez no conoces

9 jul 2010

10 Etiquetas (tags) HTML que tal vez no conoces

13:51

De nuevo traigo una traducción al español de un artículo publicado en el blog Net tuts+, tal como lo hice anteriormente con el artículo sobre los tips de MySQL. Esta vez sobre HTML y 10 etiquetas que son poco utilizadas actualmente y tienen mucha importancia y utilidad, el artículo es titulado "The 10 HTML Tags Beginners Aren't Using" (Las 10 etiquetas HTML que los principiantes no están usando). Pueden ver la versión en ingles siguiendo el enlace.

Vamos a lo esencial para este artículo. Todos los que leen esto al menos saben que es HTML. Yo creo que, sin importar el nivel de experiencia que tengas, repasar los fundamentos siempre ayuda a aumentar el conocimiento.

Tambien ha habido muchas palabras de cambio con HTML 5. Cada etiqueta que menciono abajo es soportada tanto en HTML 4.01 como en HTML 5. Mientras algunas de estas etiquetas son ampliamente usadas, me gustaría retar algunas de las maneras en que las usamos y las vemos.

1.<!-->

Cualquier libro que leas acerca de la programación te dirá que es bueno explicar lo que haces. ¿Por qué los comentarios son una buena idea? Por esa misma razón. Ayuda a aquellos que ven tu código a saber qué ocurre.

Para HTML, comentar puede verse como resaltar algo sobreentendido. Sin embargo, puede ser usado para definir secciones, y puede ayuda a mantener tu código organizado y estructurado. Delimitad el principio y el fin de una sección de verdad ayuda con el flujo de trabajo.

<ul>
<!-- Principio de barra de nav. -->
 <ul>
  <li>menu item 1</li>
  <li>menu item 2</li>
 </ul>
<!-- Fin de barra de nav.  -->
<!-- Principio de contenido principal -->
 <p>This is the main content.</p>
 ...

2. Estilos de tablas - <thead> , <tbody> y <tfoot>

Cuando recuerdo los viejos días del desarrollo web, lo primero que viene a mi mente es <table>. Abusaba mucho de esto. Cuando se usa la etiqueta "table" correctamente, sólo para datos tabulares, es posible definir estilos para los encabezados de columnas, pie de página de filas, y el cuerpo.

Por más aburrido que sea, realmente se siente bien crear una hoja de cálculos bien formateada. (Esto es hablando fuera del desarrollo web), ¿Po qué no llevar esa simple tarea de formatear a un gran diseño? Cada etiqueta puede ser estilizada fácilmente con la hoja de estilos del sitio.

Sólo para aclarar: estas tres etiquetas afectan las filas de la tabla

Item	Cantidad
Suma	7
#1	3
#2	4

<thead>

Envuelve las filas entre <thead></thead>.

Representa el pie de página de la tabla. Debe ir antes del cuerpo para que sea renderizado antes de los datos restantes de las filas.

Encierra las filas entre <tfooter></tfooter>

<table>
 <thead>
  <tr>
   <td>Item</td>
   <td>Cantidad</td>
  </tr>
 </thead>
 <tfoot>
  <tr>
   <td>Suma</td>
   <td>7</td>
  </tr>
 </tfoot>
 <tbody>
  <tr>
   <td>#1</td>
   <td>3</td>
  </tr>
  <tr>
   <td>#2</td>
   <td>4</td>
  </tr>
 </tbody>
</table>

3. <optgroup>

Las listas de valores son una excelente manera de presentar los datos para que el usuario seleccione. No sólo son conscientes del estado de la pantalla, sino que se hacen familiares y fáciles de trabajar. Lo especial de esto es el >optgroup<, es posible crear categorías (o encabezados) para las opciones.

<select>
<optgroup label="Equipos de beisbol">
  <option value="Cardenales de Lara">Cardenales de Lara</option>
  <option value="Leones del Caracas">Leones del Caracas</option>
 </optgroup>
 <optgroup label="Equipos de fútbol">
  <option value="Deportivo Táchira">Deportivo Táchira</option>
  <option value="Caracas FC">Caracas FC</option>
 </optgroup>
</select>

4. Encabezados <h1>,<h2>,<h3>,<h4>,<h5> y <h6>.

Sé que todos usan las etiquetas de encabezados. Pero para ser honestos, no recuerdo cuando fue la última vez que usé <h3> o alguna menor. No encuentro alguna razón otra que no se me haya ocurrido y haya usado algo menos semántico, como darle estilo al texto en un <div>.

Lo que digo es esto: No inventes más trabajo para tí. Recuerda usar todas las etiquetas de encabezado.

5. <fieldset> y <legend>

Me gustan los sitios que tienen la información fácil de encontrar con elementos separados lógicamente. Creo que se ve pulcro.

<fieldset> agrupa los elementos de un formulario, dibujando una caja alrededor de ellos.

También es posible usar un subtítulo al formulario usando <legend>.

<form>
 <fieldset >
  <legend>Datos personales: </legend>
  <label>Nombre: <input type="text" size="25" /></label></br>
  <label>Email: <input type="text" size="30" /></label></br>
  <label>Fecha de nacimiento: <input type="text" size="10" /></label>
 </fieldset>
</form>

6. <label>

Esta etiqueta sólo añade estilo y funcionalidad. Se utiliza para denotar una etiqueta en un elemento de entrada (input). ¿Entonces no es la gran cosa? Pero cuando se usa, la etiqueta se hace clickeable, activando el input al que pertenece, funciona para cajas de textos o radiobuttons.

<form>
 <label>Nombre: <input type="text" size="30" /></label>
 <label>Hombre: <input type="radio" name="sex" /></label>
 <label>Mujer: <input type="radio" name="sex" /></label>
</form>

7. <blockquote>

Si buscas crear un efecto dramático para causar atención a un enunciado u oración, puedes usar <blockquote>. Se inserta un espacio blanco antes y despues del elemento, por defecto. Los márgenes también son añadidos para destacar el contenido del texto del resto del contenido.

El blog 2.0 BETA es lo máximo.

8. <cite>

No digo que <cite> esté relacionada con <blockquote>, pero sé que normalmente se terminar utilizándolas en conjunto.

Piensa en <cite> cuando debas hacer una cita textual.

"Si queremos un mundo de paz y de justicia hay que poner decididamente la inteligencia al servicio del amor." - Antoine de Saint-Exupéry

Cita del día en Wikiquote.

<form>
<blockquote>
 <p>"Si queremos un mundo de paz y de justicia  hay que poner decididamente la inteligencia  al servicio del amor." <cite>- Antoine de Saint-Exupéry</cite>
</blockquote>

9. <dl>

Usar listas es una excelente manera de organizar la información. Todos conocen las 'ul', pero ¿que tan frecuentemente se usa 'ol' y 'dl'? Tal vez decir "lista de definiciones" confunde a algunos principiantes haciéndolos pensar que sólo se puede usar para insertar términos y definiciones. Sim embargo, ese no es el caso.

<dl>  
     <dt>Twitter</dt>  
         <dd>Servicio gratuito de microblogging que permite a sus usuarios enviar micro-entradas basadas en texto.</dd>  
     <dt>Facebook</dt>  
        <dd>Sitio de redes sociales donde las gente se reúne con las personas que conocen o conocen a nuevas personas</dd> 
</dl>

10.Caracteres ASCII.

Usar los códigos ASCII HTML es apropiado cuando se usa cualquier símbolo. Da un poco mas de trabajo, pero nos asegurará de que los caracteres se renderizen apropiadamente y no sean confundidos por el navegador como parte de una cadena u otro marcado.

El sitio web w3schools.com tiene una excelente página de referencias ASCII para HTML.

Gracias por leer!.

Nota: El contenido de este artículo no le pertenece al blog 2.0 BETA, es de propiedad del blog Net Tuts+, yo sólo lo traduje al español.