El diseño web, como cualquier industria o profesión, tiene un lenguaje propio. Al entrar en la industria y comenzar a hablar con sus colegas, sin duda se encontrará con una avalancha de términos y frases que son nuevos para usted, pero que fluyen de las lenguas de sus compañeros profesionales de la web. Dos de los términos que oirás son “tag” HTML y “element”.
Al escuchar estos dos términos, usted puede darse cuenta de que están siendo usados de manera intercambiable. Como tal, una pregunta que muchos nuevos profesionales de la web tienen cuando empiezan a trabajar con código HTML es “¿cuál es la diferencia entre un tag HTML y un elemento HTML?
Aunque estos dos términos tienen un significado similar, no son realmente 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, puede decir que está utilizando la etiqueta
para definir un párrafo o el elemento para crear enlaces. Mucha gente usa los términos etiqueta y elemento indistintamente, y cualquier diseñador o desarrollador web con el que hables entendería lo que quieres decir, pero la realidad es que hay una pequeña diferencia entre los dos términos.
Etiquetas HTML
HTML es un lenguaje de marcado, lo que significa que está escrito con códigos que pueden ser leídos por una persona sin necesidad de ser compilados primero. En otras palabras, el texto de una página web está “marcado” con estos códigos para dar al navegador instrucciones sobre cómo mostrar el texto. Estas etiquetas de marcado son las etiquetas HTML mismas.
Cuando escribes HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML se componen de una serie de partes específicas, incluyendo:
- Un signo inferior al signo
<
- Una palabra o carácter que determina qué etiqueta se está escribiendo
- Cualquier número de atributos HTML opcionales en forma de un par
nombre="valor"
- Y finalmente un signo mayor que
>
Por ejemplo, aquí hay algunas etiquetas HTML:
-
Todas estas son etiquetas de apertura HTML, sin que se les hayan añadido atributos opcionales. Estas etiquetas representan:
Las siguientes son también etiquetas HTML:
Todos estos ejemplos incluyen atributos que se han añadido a las etiquetas HTML de apertura.
- El
- es una lista desordenada que incluye un atributo ID
- La división tiene un atributo de clase
- El elemento ancla, o enlace, incluye el atributo "href"
- La etiqueta de imagen con un atributo "src"
Para las etiquetas de anclaje e imagen, los atributos no son realmente opcionales, son necesarios para que esas etiquetas se muestren correctamente. Es necesario indicar al enlace dónde ir (que es lo que hace el "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, un elemento es el componente básico de HTML y normalmente está compuesto por dos tags: una etiqueta de apertura y una etiqueta de cierre. Hasta ahora sólo hemos mirado las etiquetas de apertura, que inician los elementos. Para finalizar ese elemento, escriba las etiquetas de cierre correspondientes.
Por ejemplo, para el elemento de párrafo, escriba esto:
Esto se compone de la etiqueta de apertura que vimos hace un momento, así como de la etiqueta de cierre -
. Las etiquetas de cierre son en realidad sólo la etiqueta de apertura repetida, pero con una "barra oblicua" añadida directamente después del símbolo "menos que".
Casi todos los elementos HTML tienen una etiqueta de apertura y otra de cierre. Estas etiquetas rodean el texto que se mostrará en la página web. Por ejemplo, para escribir un párrafo de texto, escriba el texto que se mostrará en la página y luego rodee la página con estas etiquetas:
Algunos elementos HTML no tienen un tag de cierre. Estos se llaman "elementos vacíos". A veces, también se hace referencia a ellos como elementos "singleton" o "void". Los elementos vacíos son fáciles de usar porque sólo tienes que incluir una etiqueta en tu página web y el navegador sabrá qué hacer. Por ejemplo, para añadir un único salto de línea a su página, usaría la etiqueta
.Otro elemento común que sólo incluye una etiqueta de apertura es el elemento "image". Por ejemplo:
Hemos visto este ejemplo anteriormente, pero no hay ninguna etiqueta de cierre para este elemento de imagen. El navegador simplemente reemplazaría este código por 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 HTML o tag, usaremos el término "element" para indicar que nos referimos a todas las partes del elemento (tanto las etiquetas de apertura como las de cierre). Sólo usamos "tag" cuando nos referimos a uno u otro. Este es el uso apropiado de estos dos términos, y te animamos a que los uses correctamente, pero ten en cuenta que si te equivocas e intercambias un poco, ¡seguirás siendo entendido por tus nuevos compañeros de desarrollo web!
