Elementos y etiquetas - parte 2

Introducción

En esta segunda parte sobre elementos y etiquetas HTML verás dos conceptos complementarios: los elementos de autocierre, que no necesitan etiqueta de cierre porque no contienen contenido, y los comentarios, que permiten documentar y organizar el código sin afectar al resultado visual de la página.

Elementos autocierre (self-closing tags)

En HTML existen elementos especiales que no siguen el patrón estándar de etiqueta de apertura, contenido y etiqueta de cierre. Estos son los elementos de autocierre o self-closing tags, también conocidos como elementos vacíos.

Estos elementos son únicos porque no contienen contenido textual ni otros elementos anidados. En lugar de eso, realizan una función específica por sí mismos, a menudo con la ayuda de atributos que modifican su comportamiento.

Características de los elementos de autocierre

Los elementos de autocierre tienen estas características distintivas:

• No encierran contenido entre etiquetas
• No requieren una etiqueta de cierre separada
• Realizan una función específica por sí mismos
• Suelen depender de atributos para definir su comportamiento

Sintaxis de los elementos de autocierre

En HTML5, los elementos de autocierre pueden escribirse de dos formas válidas:

<!-- Forma simple -->
<img src="imagen.jpg" alt="Descripción de la imagen">

<!-- Con barra inclinada al final (estilo XML/XHTML) -->
<img src="imagen.jpg" alt="Descripción de la imagen" />

Ambas formas son correctas en HTML5, aunque la primera es más común. La segunda forma (con la barra inclinada al final) proviene de XHTML y XML, y algunos desarrolladores la prefieren por claridad o por hábito.

Elementos de autocierre comunes

Estos son algunos de los elementos de autocierre más utilizados en HTML:

• <img>: Inserta una imagen en la página

<img src="logo.png" alt="Logo de la empresa" width="200" height="100">

• <input>: Crea campos de formulario de diversos tipos

<input type="text" name="username" placeholder="Nombre de usuario">
<input type="password" name="password" placeholder="Contraseña">
<input type="checkbox" name="acepto" id="terminos">

• <br>: Inserta un salto de línea

<p>Primera línea<br>Segunda línea</p>

• <hr>: Crea una línea horizontal (separador)

<section>Contenido de la primera sección</section>
<hr>
<section>Contenido de la segunda sección</section>

• <meta>: Define metadatos en el encabezado del documento

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descripción de la página web">

• <link>: Establece relaciones con recursos externos, como hojas de estilo CSS

<link rel="stylesheet" href="estilos.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

• <source>: Específica recursos multimedia alternativos para elementos <audio> o <video>

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta el elemento de video.
</video>

• <col> y <colgroup>: Define propiedades para columnas de tablas

<table>
  <colgroup>
    <col style="background-color: #f2f2f2">
    <col span="2" style="background-color: #e6e6e6">
  </colgroup>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
</table>

Errores comunes con elementos de autocierre

Al trabajar con elementos de autocierre, es importante evitar estos errores frecuentes:

• Intentar añadir contenido entre etiquetas: Los elementos de autocierre no pueden contener contenido.

<!-- Incorrecto -->
<img src="logo.png">Texto dentro de img</img>

<!-- Correcto -->
<img src="logo.png" alt="Logo"> Texto fuera de img

• Olvidar atributos obligatorios: Muchos elementos de autocierre requieren atributos específicos para funcionar correctamente.

<!-- Incorrecto (falta el atributo src) -->
<img alt="Imagen de ejemplo">

<!-- Correcto -->
<img src="imagen.jpg" alt="Imagen de ejemplo">

• Confundir con elementos normales: Algunos desarrolladores intentan cerrar elementos de autocierre como si fueran elementos normales.

<!-- Incorrecto -->
<input type="text"></input>

<!-- Correcto -->
<input type="text">

Compatibilidad con XML y XHTML

Si estás trabajando con XHTML o necesitas que tu HTML sea compatible con XML (por ejemplo, en documentos que se sirven como application/xhtml+xml), debes usar la sintaxis con barra inclinada al final:

<img src="imagen.jpg" alt="Descripción" />
<br />
<input type="text" name="usuario" />

Esta sintaxis es necesaria para que el documento sea un XML bien formado, donde todos los elementos deben tener etiqueta de cierre o terminar con />.

Uso semántico y accesibilidad

Al utilizar elementos de autocierre, es crucial considerar la accesibilidad:

• Siempre incluye el atributo alt en las imágenes para describir su contenido
• Asegúrate de que los campos <input> tengan etiquetas asociadas mediante el atributo id y la etiqueta <label>
• Usa <hr> para separaciones semánticas, no solo decorativas

<!-- Ejemplo de buenas prácticas de accesibilidad -->
<img src="grafico.png" alt="Gráfico de ventas del primer trimestre 2023">

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

Los elementos de autocierre son componentes esenciales del HTML moderno que permiten insertar contenido multimedia, crear formularios interactivos y estructurar documentos de manera eficiente sin la necesidad de etiquetas de cierre separadas.

Inserción y propósito de comentarios en HTML

Los comentarios en HTML son fragmentos de texto que el navegador ignora completamente al renderizar la página. Funcionan como notas o recordatorios para los desarrolladores y no afectan en absoluto a la visualización o funcionamiento del sitio web.

Sintaxis de los comentarios

Los comentarios en HTML se escriben utilizando una sintaxis específica que comienza con <!-- y termina con -->:

<!-- Este es un comentario en HTML -->

Todo lo que se encuentre entre estos delimitadores será ignorado por el navegador.

Propósitos de los comentarios

Los comentarios en HTML cumplen varios propósitos importantes:

• Documentación del código: Explican la función o propósito de secciones específicas.

<!-- Encabezado principal del sitio -->
<header>
  <h1>Nombre de la empresa</h1>
  <nav>
    <!-- Menú de navegación principal -->
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/servicios">Servicios</a></li>
    </ul>
  </nav>
</header>

• Organización de secciones grandes: Ayudan a identificar dónde comienzan y terminan bloques importantes.

<!-- INICIO: Sección de testimonios -->
<section class="testimonios">
  <h2>Lo que dicen nuestros clientes</h2>
  <!-- Contenido de testimonios -->
</section>
<!-- FIN: Sección de testimonios -->

• Desactivación temporal de código: Permiten "comentar" partes del HTML para desactivarlas sin eliminarlas.

<div class="contenedor">
  <p>Este párrafo se mostrará normalmente.</p>
  
  <!-- Temporalmente desactivado para pruebas
  <div class="feature-nueva">
    <h3>Nueva funcionalidad</h3>
    <p>Esta función está en desarrollo.</p>
  </div>
  -->
  
  <p>Este párrafo también se mostrará.</p>
</div>

• Notas para otros desarrolladores: Comunican información importante al equipo.

<!-- TODO: Reemplazar este placeholder con el formulario de contacto cuando esté listo -->
<div class="placeholder-contacto">Formulario en construcción</div>

<!-- FIXME: El menú desplegable no funciona correctamente en Safari -->
<nav class="menu-principal">
  <!-- Contenido del menú -->
</nav>

Buenas prácticas para los comentarios

Para aprovechar al máximo los comentarios en HTML:

• Sé conciso pero claro: Los comentarios deben ser informativos sin ser excesivamente largos.

<!-- Buen comentario: claro y conciso -->
<!-- Formulario de registro de nuevos usuarios -->

<!-- Comentario demasiado vago -->
<!-- Formulario -->

• Comenta el "por qué", no el "qué": El código ya muestra qué hace; los comentarios deben explicar por qué.

<!-- Mal: describe lo obvio -->
<!-- Este es un párrafo con texto -->
<p>Bienvenido a nuestra web.</p>

<!-- Bien: explica la razón de una decisión -->
<!-- Usamos h2 en lugar de h1 porque ya hay un h1 en el header principal -->
<h2>Características del producto</h2>

Limitaciones y consideraciones

Es importante tener en cuenta algunas limitaciones de los comentarios en HTML:

• No son privados: Los comentarios son visibles para cualquiera que inspeccione el código fuente de la página.

<!-- NO INCLUIR INFORMACIÓN SENSIBLE -->
<!-- Contraseña de la base de datos: db_password123 --> <!-- MAL -->

• Afectan al tamaño del archivo: Los comentarios extensos aumentan el tamaño de descarga de la página.

• No pueden anidarse: Los comentarios HTML no pueden contener otros comentarios.

<!-- Comentario exterior 
  <!-- Esto causará problemas --> 
--> <!-- MAL -->

Comentarios y accesibilidad

Los comentarios también pueden ser útiles para documentar consideraciones de accesibilidad:

<!-- 
    Estructura de tabla accesible:
    - Incluye caption para descripción general
    - Usa th para encabezados de columna
    - Incluye scope para asociar encabezados con datos
-->
<table>
    <caption>Horario de clases semanales</caption>
    <tr>
        <th scope="col">Hora</th>
        <th scope="col">Lunes</th>
        <th scope="col">Martes</th>
    </tr>
    <!-- Filas de datos -->
</table>

Convenciones de equipo

Muchos equipos de desarrollo establecen convenciones para los comentarios, como prefijos estandarizados:

<!-- [INFO] Información general sobre esta sección -->
<!-- [TODO] Tareas pendientes por implementar -->
<!-- [HACK] Solución temporal para un problema específico -->
<!-- [FIXME] Código que necesita ser corregido -->

Conclusión

Los elementos de autocierre y los comentarios son dos herramientas imprescindibles en HTML. Los primeros permiten insertar recursos como imágenes, entradas de formulario o metadatos sin necesidad de etiqueta de cierre. Los segundos facilitan la documentación, organización y depuración del código, aunque deben usarse con cuidado para no incluir información sensible ni añadir peso innecesario al archivo.