Curiosidades • Destacados • HTML • Programación

Etiquetas HTML: Cerrar o no Cerrar

25 junio, 2022
10.006 veces leído
4 min. desde la última lectura

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:

<html>
     <head>
          <title>Título de la página</title>
     </head>
     <body>
          <div>
               <h1>Self-Closing Tags</h1>
          </div>
     </body>
</html>

 

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:

<p>
     Corre el año 12020 de la Era Galáctica y el emperador Cleon I se siente incómodo en su trono. 
     <br>
     En Trantor, la gran capital del Imperio Galáctico, 40000 millones de personas han creado una civilización de una complejidad tecnológica y cultural inimaginable.
</p>

<p>
     <img src="/fundacion.jpg">
     Cuando el joven psicohistoriador Hari Seldon llega a Trantor para participar en un congreso, se convierte en el hombre más buscado del Imperio. 
     <br>
     El psichohistoriador trata desesperadamente de que su portentosa teoría sobre el futuro no caiga en malas manos… mientras forja la llave del futuro: un poder que será conocido como la Fundación.
</p>

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

 


Resumen de contenidos

  1. Self-Closing Tags
  2. Uso en HTML4, HTML5 y XHTML
  3. En la actualidad…

 

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:

<area />
<base />
<br />
<col />
<command />
<embed />
<hr />
<iframe />
<img />
<input />
<link />
<keygen />
<link />
<menuitem />
<meta />
<param />
<source />
<track />
<wbr />

 

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:

<meta charset = "UTF-8">
<meta charset = "UTF-8" />

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:

<h1>Mi artículo</h1>
<p>Este es mi primer párrafo
<p class="align:right">Este es el segundo</p>
<p>Y aquí el tercero

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!

 

Tags

Sobre el autor

Ver todos sus artículos

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.

45 Comentarios

Haz clic aquí para dejar tu comentario

Flickr

  • Essentials
  • Marilyn, Jurassic & Chaplin (Berlinale coulisses)
  • Trabie (Berlinale coulisses)
  • Pastel (Berlinale coulisses)
  • Projector (Berlinale coulisses)
  • damier
  • Lynn
  • écharpe
  • Tricia Tuttle (Berlinale direction and management)

About Author

View all posts

ThemeForest

Collaboratively harness market-driven processes whereas resource-leveling internal or "organic" sources. Competently formulate.

Calendar

febrero 2025
L M X J V S D
 12
3456789
10111213141516
17181920212223
2425262728  

RSS Meks Blog

  • How Adding Slack Bot Boosted Our Culture of Appreciation 3 julio, 2024
    Sweet Kudos is a Slack bot that enhances employee recognition, rewards, and celebrations within your team. It empowers team members to express gratitude and appreciation effortlessly by giving virtual Kudos. The post How Adding Slack Bot Boosted Our Culture of Appreciation appeared first on Meks.
    Dusan Milovanovic
  • 10 Best Knowledge Base & Wiki WordPress Themes 2021 15 septiembre, 2021
    Running a successful online business requires an exceptional WordPress knowledge base theme that organizes documentation and helps customers. Customization options, intuitive navigation, unique layouts, and fast responsiveness are just some of the features you need. The following 10 WordPress wiki themes represent the best options for 2021 and beyond. Explore the full range to determine […]
    Dusan Milovanovic
  • How to increase WordPress Memory Limit (quick fixes) 16 junio, 2021
    Here is a post about how to increase the memory limit in WordPress. Allowed memory size exhausted error message showed up in your WordPress installation? No worries – this is one of the most common errors in WordPress. You can apply an easy fix by increasing the memory limit in your PHP. Table of Contents […]
    Dusan Milovanovic
  • How to use (and why) WordPress sitemap plugin 1 marzo, 2021
    Did you know that by knowing how to use the WordPress sitemap plugin you can significantly improve your site’s visibility and traffic? Although it isn’t mandatory to have a sitemap on your site, having one significantly improves the site’s quality, crawlability and indexing. All this is important for better optimization, which is why we wanted […]
    Ivana Cirkovic
  • 22 free and premium podcast software for your show [2021 edition] 18 enero, 2021
    You’re determined to start or improve your podcast but don’t know which podcast software to use to really make it stand out? We’ve got you! #podcasting Top 22 free and premium podcast software for your show #WordPressTips #podcasting The post 22 free and premium podcast software for your show [2021 edition] appeared first on Meks.
    Ivana Cirkovic
  • Digital storytelling with WordPress – an all-in-one guide to make your web stories pop! 23 noviembre, 2020
    Wondering how to improve digital storytelling with WordPress and build more awareness and exposure of your business? Let our guide lead the way. The post Digital storytelling with WordPress – an all-in-one guide to make your web stories pop! appeared first on Meks.
    Ivana Cirkovic
  • How to use WordPress autoposting plugin to improve your visibility and SEO? 10 septiembre, 2020
    Did you know you can use the WordPress autoposting plugin for your content efforts and improve not only your time management but your business and visibility as well? The post How to use WordPress autoposting plugin to improve your visibility and SEO? appeared first on Meks.
    Ivana Cirkovic
  • How to create a personal branding site? Step-by-step DIY guide 15 agosto, 2020
    Looking for ways and means to create a personal branding site? Well, look no further ’cause we’re giving away all the how-to’s to do it yourselves! The post How to create a personal branding site? Step-by-step DIY guide appeared first on Meks.
    Ivana Cirkovic
  • Top 15 WordPress content plugins and tools to improve your visibility and rankings 16 julio, 2020
    Let’s take a look at some of the must-have WordPress content plugins and tools to use to improve both your UX and rankings. The post Top 15 WordPress content plugins and tools to improve your visibility and rankings appeared first on Meks.
    Ivana Cirkovic
  • WCEU 2020 recap – key takeaways from the biggest online WordPress conference 9 junio, 2020
    Missed WCEU 2020 and all the exciting stuff from there? Here are all the key takeaways and main points to remember so, take notes! The post WCEU 2020 recap – key takeaways from the biggest online WordPress conference appeared first on Meks.
    Ivana Cirkovic

Text

Distinctively utilize long-term high-impact total linkage whereas high-payoff experiences. Appropriately communicate 24/365.

Archives