Entendiendo la diferencia entre las etiquetas y los elementos HTML

Share on facebook
Share on twitter
Share on linkedin
Share on telegram
Share on whatsapp
Share on email
Share on print
VALORACIÓN DEL ARTÍCULO:
5/5


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!

Deja un comentario

TAMBIÉN TE INTERESA

como-desinstalar-mcafee-del-ordenador

3 opciones para desinstalar Mcafee al completo

Este es un artículo que te enseñará a desinstalar Mcafee al completo de tu ordenador. Seguro que si te has comprado un PC, habrás notado que hay programas o aplicaciones que vienen por defecto y una de ellas es el antivirus Mcafee.   Este antivirus es uno de los más conocidos y populares del mercado,

Kodi

Los 3 mejores Addons Kodi del momento

Si tienes un Kodi, es posible que tengas varios Addons. En este artículo te sugerimos los mejores Addons Kodi que existen en la actualidad.   Aunque ya hemos hablado de este tipo de programas, lo primero que vamos a proponerte es recordar que Kodi es una aplicación para todo tipo de dispositivos que permite abrir

607123000 quien es

607123000, quién es y por qué te llaman tanto desde este número

Seguro que últimamente has recibido llamadas de este número: 607123000. En este artículo te mostraremos quién es, porque tanta insistencia y cómo evitar que te vuelvan a llamar si es que lo consideras oportuno.   Índice de contenidos1 607123000, quién es1.1 Un teléfono Vodafone que puede parecerse a otro cualquiera1.2 Muy similar al clásico 123

pasos-para-instalar-certificado-digital-en-Chrome

Instalar el certificado digital en Chrome paso a paso

En este artículo te enseñamos a instalar tu certificado digital en Chrome para poder hacer las muchas gestiones que se pueden hacer con este documento electrónico.   Antes de pasar a este breve y sencillo tutorial, nos detendremos en otro proceso, el de la obtención del certificado digital. La solicitud y obtención de un certificado

desinstalar-aplicaciones-en-Mac

Cómo desinstalar aplicaciones en Mac fácilmente

Desinstalar aplicaciones en Mac es un proceso muy sencillo, aunque es lógico que muchos principiantes en este sistema operativa tengan sus dudas. Y es que cuando has estado toda la vida operando en entornos Windows u otros como Linux, puedes estar algo perdido en acciones tan básicas como instalar o desinstalar aplicaciones en Mac. Índice

discos-duros-externos

Discos duros externos, la guía de compra que necesitas

Todo el mundo necesita discos duros externos. Aunque hoy los ordenadores dispongan de mucha memoria interna y la nube se haya consolidado en el mercado, estos aparatos siguen siendo necesarios para guardar todo tipo de información.   De eso se trata, de guardar la mucha información que hoy disponemos en archivos. A diferencia de la