7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

10 etiquetas HTML que los principiantes no usan

Read Time: 7 mins

Spanish (Español) translation by Efraín Pinto (you can also view the original English article)

Regresemos a lo básico. Cualquiera que lee este artículo como mínimo sabe qué es HTML. Yo creo que, sin importar el nivel de experiencia que alguien tenga, revisar los fundamentos puede ayudar a incrementar el conocimiento. Esto además ayuda a perfeccionar las habilidades, especialmente con la constante evolución de las tecnologías que dirigen el Internet.

Además, ha habido muchos comentarios sobre los cambios en HTML5. Cada etiqueta que menciono a continuación está soportada en HTML 4.01 y en HTML5. Mientras que algunas de estas etiquetas ya son ampliamente usadas; Me gustaría desafiar algunas de las formas en que las usamos y las entendemos.

1. <!-- -->

Cualquier libro que leas sobre programación te dirá que es bueno explicar lo que estás haciendo. Pero ¿por qué los comentarios son buena idea? Por esa misma razón. Ellos ayudan a entender a quienes observan tu código, qué está pasando.

Para HTML, comentar puede parecer exagerado; sin embargo, puede ser usado para definir secciones y puede ayudar a mantener tu código organizado y estructurado. Etiquetar el inicio y el final de una sección realmente ayuda con el flujo de trabajo.

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

Cuando pienso en los inicios del desarrollo web, la primera cosa que viene a mi mente es la etiqueta <table> (yo abusé mucho de esta). Cuando se usa <table> correctamente, solo para datos tabulados, es posible definir estilos para títulos de columna, filas para piecero, y el cuerpo.

Aunque es aburrido, realmente se siente bien crear una hoja de cálculo bien formateada (Esto es hablando por fuera del desarrollo web). ¿Por qué no llevamos esa simple tarea de formatear al interior de un gran diseño? Entonces, cada etiqueta puede ser fácilmente estilizada dentro de la hoja de estilos del sitio.

Solo para aclarar: estas tres etiquetas afectan las filas de la tabla.

Item Cantidad
Suma 7
#1 3
#2 4

<thead>

Envuelve las filas de la tabla con <thead></thead>.

<tfoot>

Envuelve las filas de la tabla con <tfoot></tfoot>. Las filas con <tfoot>, además, deben estar por encima de <tbody>. Esto es para que las filas del piecero sean renderizadas antes de el resto de filas de datos.

<tbody>

Envuelve las filas de la taba con <tbody></tbody>.

3. <optgroup>

Las listas desplegables (Dropdowns) son una gran forma de presentar datos al usuario para seleccionar. Ellas no sólo son conscientes del espacio en la pantalla sino que son familiares y fáciles de usar. Lo más genial es que con <optgroup> es posible crear categorías (o las podemos llamar títulos) para las opciones.

Tigres de Detroit
Cachorros de Chicago

Leones de Detroit
Osos de Chicago

4. Títulos - <h1>,<h2>,<h3>,<h4>,<h5>, and <h6>

Yo se que todos usan las etiquetas de título. Pero, para ser honesto, yo no recuerdo cuándo fue la última vez que use <h3>, <h4>, <h5> o <h6>. No tengo una buena razón, aparte de que no pensé en ellas y usé algo menos semántico, como estilizar un texto en un <div>.

Mi punto aquí es: No crees más trabajo para ti. Recuerda usar todas etiquetas de título.

5. <fieldset> y <legend>

A mi me gustan los sitios donde es fácil encontrar información con elementos lógicamente separados. Pienso que lucen elegantes. <fieldset> agrupa elementos de formulario dibujando una caja alrededor de ellos. Además, es posible agregar un título al formulario usando <legend>.

Fieldset Example

6. <label>

Esta es, posiblemente, una de mis etiquetas HTML favoritas. La etiqueta label no aporta estilo, esta agrega funcionalidad.

<label> es usada para definir una etiqueta a un elemento de entrada. Pero cuál es la ventaja? Cuando se usa, esta se convierte en una etiqueta a la que se le puede hacer clic, haciendo activo el campo de entrada correspondiente. Esto funciona para las cajas de texto o los botones de radio.

Nombre:
Masculino:
Femenino:

7. <blockquote>

Si estas buscando crear un efecto dramático para centrar la atención en una declaración o una oración, puedes usar <blockquote>. Por defecto, un espacio en blanco es añadido antes y después del elemento. Además, se añaden márgenes para compensar el texto dentro del otro contenido.

Además, esta es una forma genial de hacer las cosas tal como un bloque de citas tradicional. (Se que eso fue horriblemente obvio). Muchas veces, cuando escribo un tutorial, tomo un extracto exacto de otro sitio o fuente. Usaré <blockquote> para crear esto aparte.

Esto es lo que usa Nettuts+ para su estilo de bloques de cita.

8. <cite>

No voy a decir que <cite> esta relacionado con <blockquote>, pero se que normalmente termino usándolos en conjunto.

Piensa en <cite> como cuando necesitas proporcionar una cita para algo. Si estás recién graduado de la universidad, piensa que estás proporcionando la lista de tus referencias al final de tus artículos. Recuerda, en formato MLA, libros y títulos de publicación periodística deben estar en cursiva.

"Amamos la tipografía y apreciamos el esfuerzo de los diseñadores que vienen con grandes técnicas tipográficas y herramientas o quienes solo comparten su conocimiento con otros diseñadores." - smashingmagazine.com

9. <dl>

Usar listas es una gran forma de organizar la información. Todos conocen <ul>, pero con qué frecuencia son usados <ol> y <dl>? Quizás la referencia a “lista de definición” confunde a algunos programadores principiantes haciéndolos pensar que ellas solo pueden ser usadas cuando se insertan términos y definiciones, sin embargo, este no es realmente el caso.

Tipos de Lista

  1. Listas no Ordenadas (ul)
  2. Listas Ordenadas (ol)
  3. Lista de Definición (dl)

Que Hacen

  • Listas no Ordenadas (ul): Una lista con viñetas
  • Listas Ordenada (ol): Una lista con números
  • Lista de Definición (dl): Una lista con definiciones para los elementos

Razones para Usar Listas

  • Estilo consistente
  • Fáciles de crear
  • Muy versátiles

Cada tipo de lista muestra información en una forma valiosa. Creo que no tengo que explicar <ul> y <ol>, pero miremos más de cerca la estructura de una lista de definición.

En lugar de solo declarar un tipo de lista (<ul> o <ol>) y sus items (<li>), usamos <dt> y <dd>. <dt> define cada item y <dd> los describe.

10. &#180;(y otros caracteres ASCII)

Es buena práctica de programación usar código ASCII HTML cuando se usa cualquier símbolo. Es un poco más de trabajo pero asegurará que los caracteres sean renderizado apropiadamente y no serán confundidos por el navegador como parte de un cadena de texto u otro texto de marcado. Alguna vez has tratado con algún texto en una página web que no luce correctamente? Quizás algo como esto: “No utilicé HTML para renderizar la tilde”.

El ejemplo anterior está forzado pero pienso que muestra la idea.

El conjunto de caracteres usados en computadores modernos, HTML e Internet están basados todos en ASCII. - w3schools.com

w3schools.com tiene una gran página de referencia de ASCII HTML para carateres ASCII. Los animo a revisar y memorizar algunos de los caracteres más comúnmente utilizados como el apóstrofe, las comillas, el signo & y la arroba (@).

Muchas gracias por leer este artículo!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.