Elemento HTML
Anatomía y estructura
Un elemento es la unidad mínima de HTML: la combinación de etiqueta de apertura, contenido y etiqueta de cierre que le dice al navegador qué tipo de contenido es lo que estás escribiendo.
Un elemento HTML es la unidad mínima del lenguaje: la combinación de una etiqueta de apertura, un contenido y una etiqueta de cierre que le indica al navegador qué tipo de información estás describiendo. La palabra clave es tipo: un elemento no define cómo se ve algo, sino qué es — un párrafo, un título, una imagen, un enlace.
Esa distinción es el corazón de HTML. El lenguaje no es una lista de instrucciones de dibujo, sino un vocabulario de significados: cada nombre de elemento (<p>, <h1>, <nav>, <button>) pertenece a un catálogo fijo definido por la especificación, y cada uno comunica una intención semántica que el navegador, los lectores de pantalla y los buscadores interpretan. Escribir HTML es, sobre todo, elegir el elemento cuyo significado coincide con el del contenido.
Un documento HTML completo no es más que elementos anidados unos dentro de otros: el <body> contiene un <article>, que contiene <h1> y <p>, que a su vez pueden contener <a> o <strong>. Esa estructura de cajas anidadas es la que el navegador convierte en el árbol DOM y la que CSS y JavaScript usan después para dar estilo y comportamiento. Entender qué es un elemento y cómo se compone es, por eso, el primer ladrillo de todo lo demás.
Cómo funciona
Un elemento tiene tres partes que trabajan juntas — etiqueta de apertura, contenido y etiqueta de cierre — y juntas forman una sola unidad:
Etiqueta de apertura
Marca dónde empieza el elemento. Es el nombre del elemento encerrado entre < y >. El nombre identifica de qué tipo es el contenido y no es arbitrario: HTML tiene un catálogo de nombres con significado semántico propio.
<p> <!-- apertura de un párrafo -->
<h1> <!-- apertura del título principal -->
<div> <!-- apertura de una división genérica -->Contenido
Lo que va entre las dos etiquetas. Puede ser:
- Texto plano:
<p>Hola, mundo.</p> - Otros elementos (anidados):
<p>Este texto tiene <strong>énfasis</strong>.</p> - Una mezcla de ambos.
- Nada (elementos vacíos, aunque esto es distinto de los void elements).
Etiqueta de cierre
Marca dónde termina el elemento. Es idéntica a la apertura pero lleva una barra / antes del nombre: </p>, </h1>, </div>.
Si la etiqueta de cierre falta, el navegador tiene que adivinar hasta dónde llega el elemento. Los navegadores modernos intentan recuperarse, pero el resultado es impredecible — el elemento puede abarcar más contenido del que querías o romper la estructura visual de la página.
Elemento vs. etiqueta vs. nodo
Tres términos que se usan cerca pero no son sinónimos:
- Etiqueta es solo la marca de texto:
<p>es una etiqueta de apertura,</p>es una de cierre. Una etiqueta sola no hace nada; son las dos juntas (con el contenido) las que forman el elemento. - Elemento es la entidad completa: apertura + contenido + cierre como una unidad semántica.
- Nodo es el término del árbol DOM (Document Object Model): cuando el navegador parsea el HTML, construye un árbol de nodos en memoria. Un elemento HTML se convierte en un nodo de tipo Element dentro de ese árbol. Texto suelto entre etiquetas también forma un nodo (de tipo Text). El concepto de nodo importa cuando trabajás con JavaScript para manipular la página.
Ejemplo realista
<h1>Recetas de cocina</h1>
<p>Bienvenido a la colección de recetas más completa en español.
Encontrás desde preparaciones simples hasta platos elaborados.</p>
<p>Cada receta indica el tiempo de preparación y los
<strong>ingredientes exactos</strong> que necesitás.</p>En este fragmento hay cuatro elementos: dos <p>, un <h1> y un <strong> anidado dentro del segundo <p>.
Cuándo usar qué
HTML tiene decenas de elementos, cada uno con un propósito semántico. Elegir el elemento correcto no es cosmético: afecta la accesibilidad (los lectores de pantalla leen el tipo de elemento) y el posicionamiento en buscadores.
| Para describir… | Usá |
|---|---|
| El título principal de la página | <h1> |
| Un subtítulo o sección | <h2> a <h6> |
| Un bloque de texto | <p> |
| Una lista de ítems | <ul> o <ol> + <li> |
| Un enlace | <a> |
| Una imagen | <img> (void element) |
| Un contenedor genérico | <div> (bloque) o <span> (en línea) |
La regla de oro: elegí el elemento por lo que significa el contenido, no por cómo querés que se vea. El aspecto visual lo controlás con CSS.
Notas, gotchas e interacción
- Mayúsculas/minúsculas: HTML no distingue entre
<P>y<p>, pero la convención universal — y la que sigue este sitio — es usar siempre minúsculas. - Solapamiento: el anidado tiene una regla estricta: el último elemento en abrirse tiene que ser el primero en cerrarse.
<p><strong>texto</p></strong>está mal —<strong>se abre dentro de<p>pero se cierra fuera. Ver la entrada de anidado en las lecciones. - Semántica vs. presentación: elementos como
<b>(negrita visual) y<i>(itálica visual) existen y son vigentes, pero su uso preferido hoy es semántico:<strong>para énfasis importante,<em>para énfasis de entonación. CSS se encarga de la apariencia.
Vigente / legacy
La estructura de tres partes (apertura + contenido + cierre) es parte de la especificación HTML desde sus primeras versiones y no tiene alternativa: todos los elementos no-void la usan. Lo que sí varió históricamente fue XHTML (2000–2010), que exigía sintaxis más estricta (etiquetas en minúscula, comillas obligatorias, cierre explícito de todo). HTML5 — la especificación actual — retomó una sintaxis más flexible y declaró XHTML como camino muerto.