Elementos y etiquetas - parte 1

Introducción

Las etiquetas HTML son los bloques fundamentales de cualquier página web. En esta primera parte aprenderás cómo se estructuran, qué significa que un elemento sea de bloque o inline, y cómo modificar ese comportamiento con CSS.

Anatomía de una etiqueta HTML: apertura y cierre

Las etiquetas HTML son los bloques fundamentales que dan estructura a cualquier página web. Funcionan como contenedores que indican al navegador cómo debe interpretar y mostrar el contenido que encierran.

Estructura básica de una etiqueta

La mayoría de las etiquetas HTML siguen un patrón común formado por tres componentes principales:

• Etiqueta de apertura: Marca el inicio del elemento y contiene el nombre de la etiqueta entre los símbolos < y >.
• Contenido: Es la información que la etiqueta contiene o afecta.
• Etiqueta de cierre: Indica dónde termina el elemento y se forma añadiendo una barra inclinada / antes del nombre de la etiqueta.

<nombre-etiqueta>Contenido del elemento</nombre-etiqueta>

Por ejemplo, para crear un párrafo en HTML:

<p>Este es un párrafo de texto en HTML.</p>

En este ejemplo:

• <p> es la etiqueta de apertura
• Este es un párrafo de texto en HTML. es el contenido
• </p> es la etiqueta de cierre

Atributos en las etiquetas

Las etiquetas de apertura pueden incluir atributos que proporcionan información adicional sobre el elemento o modifican su comportamiento:

<nombre-etiqueta atributo="valor">Contenido</nombre-etiqueta>

Un ejemplo práctico sería un enlace HTML:

<a href="https://www.ejemplo.com">Visita nuestro sitio web</a>

Aquí:

• a es el nombre de la etiqueta (anchor o enlace)
• href es un atributo que específica la URL de destino
• "https://www.ejemplo.com" es el valor del atributo
• Visita nuestro sitio web es el contenido visible

Anidación de etiquetas

Las etiquetas HTML pueden anidarse unas dentro de otras, creando una estructura jerárquica:

<div>
    <h1>Título principal</h1>
    <p>Este es un <strong>párrafo</strong> con texto destacado.</p>
</div>

Es crucial respetar el orden correcto de apertura y cierre. Las etiquetas deben cerrarse en el orden inverso al que se abrieron, siguiendo una estructura tipo LIFO (Last In, First Out):

<!-- Correcto -->
<div><p>Contenido</p></div>

<!-- Incorrecto -->
<div><p>Contenido</div></p>

Sensibilidad a mayúsculas y minúsculas

HTML5 no es sensible a mayúsculas y minúsculas en los nombres de las etiquetas, aunque se recomienda usar siempre minúsculas por convención y legibilidad:

<!-- Ambos funcionan, pero se prefiere la versión en minúsculas -->
<p>Este es un párrafo.</p>
<P>Este también es un párrafo.</P>

Espacios en blanco

Los navegadores ignoran la mayoría de los espacios en blanco adicionales en el código HTML. Múltiples espacios, tabulaciones o saltos de línea se interpretan como un solo espacio:

<p>Este     texto     aparecerá
    sin     espacios     adicionales.</p>

Se mostrará como: "Este texto aparecerá sin espacios adicionales."

Errores comunes

Algunos errores frecuentes relacionados con la apertura y cierre de etiquetas incluyen:

• Olvidar la etiqueta de cierre:

<p>Este párrafo no tiene cierre
<p>Este es otro párrafo</p>

• Usar nombres de etiquetas incorrectos:

<paragraph>Esto no es una etiqueta HTML válida</paragraph>

• Orden incorrecto de anidación:

<em><strong>Texto importante</em></strong>

El orden correcto sería:

<em><strong>Texto importante</strong></em>

Herramientas de validación

Para verificar que la estructura de apertura y cierre de tus etiquetas es correcta, puedes utilizar validadores HTML como el del W3C (World Wide Web Consortium):

https://validator.w3.org/

Estas herramientas analizan tu código y señalan errores en la estructura de las etiquetas, ayudándote a mantener un HTML limpio y bien formado.

Elementos de bloque vs elementos inline

En HTML, los elementos se clasifican principalmente en dos categorías según su comportamiento de visualización: elementos de bloque y elementos inline. Esta distinción es fundamental para entender cómo se estructura y fluye el contenido en una página web.

Elementos de bloque

Los elementos de bloque ocupan todo el ancho disponible de su contenedor padre y siempre comienzan en una nueva línea. Estos elementos crean "bloques" visibles en la página y empujan a otros elementos hacia abajo.

Características principales:

• Ocupan el ancho completo disponible por defecto
• Siempre comienzan en una nueva línea
• Pueden contener otros elementos de bloque y elementos inline
• Suelen utilizarse para estructurar secciones principales del documento

Ejemplos comunes de elementos de bloque:

<div>Un contenedor genérico de bloque</div>
<p>Un párrafo es un elemento de bloque</p>
<h1>Los encabezados son elementos de bloque</h1>
<ul>
    <li>Las listas son elementos de bloque</li>
    <li>Cada elemento de lista también es un bloque</li>
</ul>

Elementos inline

Los elementos inline ocupan solo el espacio necesario para su contenido y no fuerzan saltos de línea. Se comportan como si fueran parte del flujo de texto.

Características principales:

• Ocupan solo el espacio necesario para su contenido
• No crean nuevas líneas automáticamente
• Se colocan uno al lado del otro en la misma línea
• No pueden contener elementos de bloque (con algunas excepciones en HTML5)
• Respetan propiedades de texto como line-height y vertical-align

Ejemplos comunes de elementos inline:

<span>Un contenedor genérico inline</span>
<a href="#">Los enlaces son elementos inline</a>
<strong>El texto en negrita es inline</strong>
<em>El texto en cursiva es inline</em>
<img src="imagen.jpg" alt="Las imágenes son elementos inline por defecto">

Anidación y comportamiento

Es importante entender las reglas de anidación entre estos tipos de elementos:

• Los elementos de bloque pueden contener elementos inline y, generalmente, otros elementos de bloque
• Los elementos inline deberían contener solo datos o elementos inline, no elementos de bloque

<!-- Correcto: Bloque conteniendo inline -->
<p>Este párrafo contiene <strong>texto en negrita</strong> y <em>texto en cursiva</em>.</p>

<!-- Correcto: Bloque conteniendo bloque -->
<div>
    <p>Un párrafo dentro de un div</p>
</div>

<!-- Incorrecto según especificaciones HTML4 (aunque algunos navegadores lo renderizan) -->
<span>
    <p>Un párrafo dentro de un span (no recomendado)</p>
</span>

Cambiar el comportamiento con CSS

Aunque los elementos tienen un comportamiento predeterminado, podemos modificarlo usando la propiedad CSS display:

<style>
    .bloque-a-inline {
        display: inline;
    }
    
    .inline-a-bloque {
        display: block;
    }
    
    .inline-block {
        display: inline-block; /* Comportamiento híbrido */
    }
</style>

<div class="bloque-a-inline">Este div ahora se comporta como inline</div>

<span class="inline-a-bloque">Este span ahora se comporta como bloque</span>

<span class="inline-block">Este elemento tiene características de ambos</span>

Valor especial: inline-block

El valor inline-block para la propiedad display crea un comportamiento híbrido:

• Se coloca en línea como un elemento inline
• Mantiene propiedades de bloque como poder establecer ancho y alto
• No fuerza saltos de línea, pero respeta dimensiones como un bloque

<style>
    .ejemplo-inline-block {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #f0f0f0;
    }
</style>

<div class="ejemplo-inline-block">Uno</div>
<div class="ejemplo-inline-block">Dos</div>
<div class="ejemplo-inline-block">Tres</div>

Este código crearía tres cajas de 100x100 píxeles que se colocan una al lado de la otra (comportamiento inline) pero respetan sus dimensiones (comportamiento de bloque).

Elementos comunes según su tipo

Elementos de bloque habituales:

• <div> - División genérica
• <p> - Párrafo
• <h1> a <h6> - Encabezados
• <ul>, <ol> - Listas
• <li> - Elemento de lista
• <table> - Tabla
• <form> - Formulario
• <section>, <article>, <header>, <footer> - Elementos semánticos

Elementos inline habituales:

• <span> - Contenedor genérico inline
• <a> - Enlace
• <strong>, <em> - Énfasis de texto
• <img> - Imagen
• <br> - Salto de línea
• <i>, <b> - Cursiva y negrita (aunque se prefieren alternativas semánticas)
• <code> - Código
• <input>, <button> - Elementos de formulario

Conclusión

La distinción entre elementos de bloque e inline es crucial para el diseño web:

• Los elementos de bloque son ideales para crear la estructura principal y secciones de la página
• Los elementos inline son perfectos para modificar texto y pequeñas partes dentro del contenido
• Para componentes de interfaz como botones o tarjetas que necesitan estar en línea pero con dimensiones específicas, inline-block suele ser la mejor opción

Entender esta diferencia fundamental te permitirá crear estructuras HTML más lógicas y facilitar el trabajo con CSS para crear diseños web efectivos. En la parte 2 estudiarás los elementos de autocierre y el uso de comentarios en HTML.