¿Qué es una etiqueta HTML frente a un elemento HTML?

El diseño web, como cualquier industria o profesión, tiene un lenguaje propio. Cuando ingrese a la industria y comience a hablar con sus compañeros, sin duda se encontrará con una serie de términos y frases que son nuevos para usted, pero que fluyen de las lenguas de sus colegas profesionales de la web. Dos de los términos que escuchará son HTML "etiqueta" y "elemento".

Cuando escuche estos dos términos, puede que se dé cuenta de que se están usando de manera indistinta. Como tal, una pregunta que muchos nuevos profesionales de la web tienen cuando comienzan a trabajar con el código HTML es "¿cuál es la diferencia entre una etiqueta HTML y un elemento HTML?"

Si bien estos dos términos tienen un significado similar, en realidad no son sinónimos. Entonces, ¿cuál es la similitud con estos dos términos? La respuesta corta es que tanto las etiquetas como los elementos se refieren al marcado utilizado para escribir HTML. Por ejemplo, podría decir que está utilizando el

etiqueta para definir un párrafo o el elemento para crear enlaces. Mucha gente usa indistintamente la etiqueta y el elemento de los términos, y cualquier diseñador o desarrollador web con el que hable entendería lo que quería decir, pero la realidad es que existe una ligera diferencia entre los dos términos.

Etiquetas HTML

HTML es un lenguaje de marcado, lo que significa que está escrito con códigos que puede leer una persona sin que sea necesario compilarlo primero. En otras palabras, el texto en una página web está "marcado" con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML.

Cuando escribes HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML se componen de una serie de partes específicas, que incluyen:

Un signo de menos de
<
Una palabra o carácter que determina qué etiqueta se está escribiendo.
Cualquier número de atributos HTML opcionales en forma de
nombre = "valor" par
Y, finalmente, un signo mayor que
>

Por ejemplo, aquí hay algunas etiquetas HTML:

Estas son todas las etiquetas de apertura HTML, sin ningún atributo opcional agregado a ellas. Estas etiquetas representan:

- define un párrafo
- define la página como HTML
- define una división

Las siguientes son también etiquetas HTML:

Todos estos ejemplos incluyen atributos que se han agregado a las etiquetas HTML de apertura.

los
La división tiene un atributo de clase.
El elemento delimitador, o enlace, incluye el atributo "href"
La etiqueta de imagen con un atributo "src"

Para las etiquetas de anclaje e imagen, los atributos en realidad no son opcionales, son necesarios para que esas etiquetas se muestren correctamente. Debe indicar al enlace a dónde ir (que es lo que hace "href") y a la imagen qué mostrar (que es lo que proporciona el atributo "src").

¿Qué son los elementos HTML?

De acuerdo con la especificación HTML del W3C, una elemento es el bloque de construcción básico de HTML y está compuesto típicamente de dos etiquetas : una etiqueta de apertura y una etiqueta de cierre. Hasta ahora solo hemos visto las etiquetas de apertura, lo que inicia los elementos. Para finalizar ese elemento, se escriben las correspondientes etiquetas de cierre.

Por ejemplo, para el elemento de párrafo escribe esto:

Esto se compone de la etiqueta de apertura que vimos hace un momento, así como la etiqueta de cierre -

. Las etiquetas de cierre son solo la etiqueta de apertura repetida, pero con una "barra diagonal" agregada directamente después del símbolo "menos que".
Casi todos los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Estas etiquetas rodean el texto que se mostrará en la página web. Por ejemplo, para escribir un párrafo de texto, escribe el texto que se muestra en la página y luego lo rodeas con estas etiquetas:

Aquí es donde escribiría el texto del párrafo que le gustaría mostrar en la página web.

Algunos elementos HTML no tienen una etiqueta de cierre. Estos se llaman "elementos vacíos". A veces, también se les conoce como elementos "singleton" o "void". Los elementos vacíos son fáciles de usar porque solo tiene que incluir una etiqueta en su página web y el navegador sabrá qué hacer. Por ejemplo, para agregar un solo salto de línea a su página, usaría el
etiqueta.

Otro elemento común que solo incluye una etiqueta de apertura es el elemento "imagen". Por ejemplo:

Vimos este ejemplo anteriormente, pero no hay una etiqueta de cierre para este elemento de imagen. El navegador simplemente reemplazaría este código con la imagen a la que se hace referencia en el atributo "href". En este caso, eso sería "logo.png".

En general, cuando nos referimos a un elemento o etiqueta HTML, usaremos el término "elemento" para indicar que nos estamos refiriendo a todas las partes del elemento (tanto las etiquetas de apertura como las de cierre). Solo usamos "etiqueta" cuando se refiere solo a uno u otro. Este es el uso correcto de estos dos términos, y lo alentamos a que los use correctamente, pero sepa que si los resbala e intercambia un poco, sus nuevos compañeros de desarrollo web aún lo entenderán.