Curiosidades Destacados HTML Programación

Etiquetas HTML: Cerrar o no Cerrar

Self-Closing Tags: ¿Qué son? ¿Cuándo se aplican y por qué?

Como ya pudimos ver en el artículo sobre el origen del HTML, este lenguaje de marcado de texto se caracteriza por sus etiquetas.

Tradicionalmente existían dos tipos de etiquetas, las de apertura (<>), y las de cierre (</>).

Esto quiere decir, que la gran mayoría de los elementos declarados en este lenguaje, debían presentarse con una etiqueta de apertura, y al terminar de anidar los elementos que lo contienen, había que poner la etiqueta de cierre.

Por ejemplo:

 

Sin embargo, esto no se aplicaba a todas las etiquetas. Había algunas llamadas void elements, algo así como “etiquetas vacías”, que no tenían etiqueta de cierre, por considerarse que no debían albergar ningún otro elemento en su interior.

O dicho de otra manera, no tenía sentido que un salto de línea, definido en sí mismo ya con la etiqueta de apertura, tuviese también una etiqueta de cierre.

Así, por ejemplo, si queríamos escribir varios párrafos, el contenido de cada párrafo sí debía especificarse con etiquetas de apertura y cierre, para comprender a partir de dónde y hasta dónde estaba definido cada párrafo. Pero un salto de línea o una imagen dentro de ese párrafo, debía carecer de esas etiquetas de cierre por innecesarias.

Ejemplo:

Hasta aquí nada nuevo bajo el Sol, pero… ¿por qué hablas en pasado?

 


 

Self-Closing Tags

Con el tiempo, algunas variaciones de HTML como XHTML, empezaron a incorporar Self-Closing Tags, es decir, elementos que necesitaban únicamente de una etiqueta para definirse.

En HTML4 también comenzaron a utilizarse, si bien en un inicio ésta nomenclatura era técnicamente incorrecta. A medida que se iba popularizando su uso, los navegadores comenzaron a implementarla e incluso el W3C’s acabó aceptándolas.

La etiqueta elegida, para evitar confusiones, era la de cierre, de forma que actualmente, en HTML5, disponemos de los siguientes void elements:

 

Uso en HTML4, HTML5 y XHTML

Como hemos comentado, estas etiquetas comenzaron en XHTML para popularizarse después en HTML4. Pero el uso aceptado en cada una de estas versiones es, en la actualidad, muy diferente:

HTML5 La barra de cierre es opcional </>
HTML4 Técnicamente el uso la barra de cierre es incorrecto, pero está aceptado por el W3C’s
XHTML La barra de cierre es obligatoria

 

Por lo tanto, en HTML5 serían correctas ambas formas:

Como vemos, la evolución de las Self-Closing Tags ha ido de total obligatoriedad al poner la “/” (XHTML), a totalmente opcional (HTML5). Y, de hecho, HTML5 va mucho más allá…

 

En la actualidad…

Ahora mismo, HTML5 permite no poner etiquetas de cierre en ninguna de sus etiquetas. Es decir, en la práctica, ya todas las etiquetas pueden escribirse como Self-Closing Tags.

¿Y cómo sabemos cuándo acaba una etiqueta? Lo podemos ver en el siguiente ejemplo:

Hemos utilizado indistintamente la nomenclatura tradicional (<></>) y la Self-Closing Tags de HTML, donde “/” es optavivo (<>).

Por tanto entendemos que un párrafo acaba no por su etiqueta de cierre, sino por el inicio de otra etiqueta de apertura.

Esta forma de trabajar, si bien es más rápida de escribir y es interpretada correctamente por cualquier motor de renderizado modernos, puede ser confusa para algunos desarrolladores, especialmente de cara al mantenimiento de código de terceros. Por lo que, en general, se sigue recomendando cerrar las etiquetas.

 

¿Te ha parecido interesante este artículo? ¡Compártelo!

 

Cristian Sarabia Martínez

Desde que a principios de los 90 mi padre desempolvó su Spectrum, no he dejado de probar y experimentar con la tecnología.

Enamorado del mundo web, Full Stack Developer de profesión y diseñador por devoción.

Ahora hago mis pinitos en esto del blogging para compartir con vosotros un poquito de todo lo que la comunidad me ha dado.

Escribir comentario

Haz clic aquí para dejar tu comentario