En HTML5, el cierre de etiquetas puede variar dependiendo del tipo de elemento. Existen dos categorías principales de etiquetas: las etiquetas de apertura y cierre y las etiquetas de autocierre o vacías. Comprender la diferencia entre ellas es fundamental para escribir un código HTML claro y válido.
1. Etiquetas de apertura y cierre en HTML5
Las etiquetas de apertura y cierre en HTML son aquellas que tienen contenido entre una etiqueta de apertura y una etiqueta de cierre. Para cerrar estas etiquetas, es necesario utilizar el símbolo de barra inclinada (/) o forward slash (aprender el vocabulario de los signos o símbolos en inglés) seguido del nombre de la etiqueta. Por ejemplo:
<p>Este es un párrafo de texto.</p> <a href="https://www.ejemplo.com">Enlace</a> <div class="contenedor"> Contenido dentro del div. </div>
En los ejemplos anteriores, las etiquetas <p>, <a>, y <div> son etiquetas de contenido que requieren un cierre explícito utilizando la barra inclinada y el nombre de la etiqueta (</p>, </a>, </div>).
2. Etiquetas de autocierre o vacías en HTML5
Las etiquetas de autocierre o vacías en HTML5 son aquellas que no requieren contenido adicional y se cierran de manera compacta utilizando solo el símbolo > al final de la etiqueta de apertura. Algunos ejemplos comunes de etiquetas de autocierre son <img>, <br>, y <input>. Por ejemplo:
<img src="imagen.jpg" alt="Descripción"> <br> <input type="text">
En estos ejemplos, las etiquetas <img>, <br>, y <input> son etiquetas de autocierre. En HTML5, es estándar y recomendado cerrar estas etiquetas de esta manera sin utilizar la barra inclinada y el corchete de cierre (/>).
Sin emgargo, en HTML5, se permite el uso opcional del slash al final de la etiqueta de autocierre para mantener una convención más cercana a XHTML. Por ejemplo:
<img src="imagen.jpg" alt="Descripción"/> <br/> <input type="text"/>
A continuación se muestra una tabla con algunas de las etiquetas HTML de autocierre o vacías más comunes utilizadas en HTML5. Estas etiquetas son ejemplos de elementos que no contienen contenido adicional y, por lo tanto, se pueden cerrar de manera compacta sin necesidad de una etiqueta de cierre separada. Es importante tener en cuenta que esta lista no es exhaustiva y que existen otras etiquetas de autocierre en HTML5, dependiendo de las necesidades específicas de diseño y desarrollo web.
| Etiqueta | Descripción |
|---|---|
<br> | Salto de línea o quiebre de línea |
<hr> | Línea horizontal |
<img> | Imagen |
<input> | Campo de entrada (input) |
<link> | Enlace a un recurso externo |
<meta> | Metadatos de la página |
<col> | Columna en una tabla |
<embed> | Contenido embebido |
<param> | Parámetro para un objeto <object> o <embed> |
<source> | Fuente de medios para elementos multimedia |
<wbr> | Oportunidad de salto de línea condicional |
Nota importante: Aunque en HTML5 no es obligatorio cerrar estas etiquetas, en XHTML, todas las etiquetas, incluidas las vacías, deben cerrarse de la siguiente manera:
<br /> <hr /> <img src="..." alt="..." />
Puedes explorar más reglas y normas relacionadas con HTML5 y XHTML en el siguiente artículo: Reglas y normas HTML5. Este recurso ofrece información detallada sobre las convenciones de codificación para crear contenido web conforme a los estándares actuales.