El Atributo HEIGHT

Se utiliza para definir la altura de elementos HTML específicos, como imágenes, tablas, iframes o canvas.

El atributo height en HTML se utiliza para definir la altura de elementos específicos, como imágenes, tablas, iframes o canvas. Sin embargo, su uso ha evolucionado con la adopción de CSS para diseños responsivos. Aquí un tutorial completo para entender su aplicación correcta:

¿Qué es el atributo `height`?

Propósito: Establece la altura de un elemento en píxeles (ej: height="300") o como porcentaje (ej: height="50%").

Elementos compatibles:

<img>
<table>, <td>, <th>
<iframe>
<canvas>
<svg>
<object>

Sintaxis Básica

<img src="imagen.jpg" height="200" alt="Ejemplo">
<iframe src="video.html" height="300"></iframe>
<table height="150">
  <!-- Filas y celdas -->
</table>

Ejemplos Prácticos

Ejemplo 1: Imágenes con altura fija

<!-- Altura en píxeles -->
<img 
  src="paisaje.jpg" 
  height="400" 
  alt="Paisaje montañoso"
>

<!-- Altura como porcentaje (solo funciona si el contenedor padre tiene altura definida) -->
<img 
  src="logo.png" 
  height="50%" 
  alt="Logo"
>

Ejemplo 2: Tabla con altura definida

<table border="1" height="200">
  <tr>
    <th>Nombre</th>
    <th>Edad</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>28</td>
  </tr>
</table>

Ejemplo 3: Iframe para incrustar contenido

<iframe 
  src="https://ejemplo.com" 
  height="400"
  width="600"
></iframe>

Diferencias entre `height` en HTML y CSS

Aspecto	Atributo `height` (HTML)	Propiedad `height` (CSS)
Uso recomendado	Elementos con dimensiones intrínsecas (ej: imágenes).	Cualquier elemento, con mayor control responsivo.
Unidades	Píxeles o porcentaje (limitado).	Píxeles, porcentaje, rem, vh, etc.
Responsividad	Menos flexible (tamaño fijo).	Adaptable (media queries, flexbox).
Accesibilidad	Útil para prevenir cambios de diseño (CLS).	Priorizado para diseños complejos.

Buenas Prácticas

Usa `height` en imágenes para estabilizar el layout:

<img src="producto.jpg" height="600" width="800" alt="Producto">

Esto evita desplazamientos del contenido (Cumulative Layout Shift - CLS).

Combina con CSS para responsividad:

<img 
  src="banner.jpg" 
  height="300" 
  style="max-width: 100%; height: auto;"
>

Mantiene la proporción en dispositivos móviles.

Evita distorsiones:

Si defines height, asegúrate de ajustar también width para mantener la relación de aspecto.

Prefiere CSS para elementos de bloque:

<div class="contenedor"></div>

<style>
  .contenedor {
    height: 200px; /* Mejor que usar el atributo HTML */
  }
</style>

Errores Comunes

Error 1: Usar `height` en elementos no compatibles

<!-- Incorrecto -->
<div height="100">Contenido</div> <!-- No aplica -->

Error 2: Ignorar la accesibilidad

No proporciones solo dimensiones fijas sin considerar la adaptabilidad.

Error 3: No mantener la relación de aspecto

<!-- Incorrecto: Imagen distorsionada -->
<img src="foto.jpg" width="400" height="200">

¿Cuándo Usar el Atributo `height`?

Imágenes y videos: Para definir dimensiones intrínsecas y mejorar el rendimiento.
Tablas y iframes: Cuando necesitas un tamaño específico rápidamente.
SVG o canvas: Para establecer el área de renderizado.

Compatibilidad en Navegadores

Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) soportan el atributo height.

Limitaciones:

Los porcentajes no funcionan en algunos elementos a menos que el contenedor padre tenga altura definida.
En móviles, los tamaños fijos pueden afectar la responsividad.

Conclusión

El atributo height es útil para definir alturas específicas en elementos multimedia o tablas, pero en diseños modernos, CSS debe ser tu herramienta principal para controlar dimensiones. Combínalos estratégicamente para equilibrar rendimiento, accesibilidad y responsividad.

¿Qué es el atributo height?