No es lo mismo, no da igual, elemento que tag 4.12.14
Diferencias entre lo que es un elemento y un tag (etiqueta) en html. Cuándo usar una expresión y cuando otra. su sintaxis y excepciones.
No es lo mismo, no da igual, elemento que tag
Con demasiada frecuencia tendemos a mezclar conceptos. Muy a menudo equivocamos términos y contribuimos a extender errores sin ser demasiado conscientes de ello. Yo el primero.
Y quizás uno de los más frecuentes en el que caemos sea equiparar y hablar como si fuesen lo mismo "elemento" y "tag". Y sí, escribí conscientemente "tag" y no etiqueta. Porque con la forma en español no es tan usual.
Son muchos los artículos de blogs e incluso en documentación "oficial" de aplicaciones, programas o proyecto donde se usan indistintamente. Transmitiendo que ambos son lo mismo.
Por si acaso ya te adelanto. Este artículo no tiene que ver con Css. Si acaso con Html (y algún otro lenguaje). O quizás no tenga que ver con nada y sólo sean comeduras de coco para un Lunes de otoño.
No es lo mismo un elemento que un tag. ¿O sí?
Si vamos a la especificación de HTML 4.01, vemos una nota aclaratoria al respecto, la captura de la derecha, donde resalta (en verde y negrita) que los elementos y tags son dos cosas bien diferentes.
En Html 4.01 un elemento está formado por una etiqueta de apertura, el contenido y una etiqueta de cierre. Así, esto sería un elemento <h1>KsesoCss</h1>. Donde <h1> es la etiqueta de inicio o apertura, KsesoCss es el contenido y </h1> la etiqueta de cierre o final.
Y el ejemplo anterior del h1 lo podríamos ampliar algo más. Pues el tag de apertura puede contener otras partes, como múltiples atributos y sus valores. Que formarían parte también del elemento.
Así que podríamos decir que un elemento está formado por sus etiquetas identificativas (tags) y su contenido.
Así que una etiqueta o tag forma parte del elemento pero no es el elemento. Como el motor forma parte del automóvil pero no es el automóvil.
Pero... (siempre hay alguno) no siempre los elementos son tan completos.
Tags opcionales
Si bien la especificación habla de etiqueta de apertura y cierre de los elementos antes y después del contenido, se puede omitir el cierre según en ciertos elementos.
Por ejemplo, en los elementos <li> | <p> | <td>... sólo es necesario saber dónde comienzan. No es es necesario indicar su final con la etiqueta de cierre.
Su final se lo marca el inicio del siguiente elemento:
<div>
<ul>
<li>Uno
<li>Dos
</ul>
<p>Hola mundo
</div>
La apertura del segundo elemento de la lista conlleva el cierre del primero. Y lo mismo para el párrafo.
Pero... hay más excepciones
Elementos vacíos
La especificación, además de indicar la etiqueta de cierre de algunos elementos como opcional, define a otros como elementos vacíos. Por lo tanto, además de poder dejarlos sin etiqueta final no pueden tener ningún tipo de contenido en ellos. <br> | <link> | <img> | <input> | <meta> son algunos ejemplos. Alguno de ellas, además de elemento vacío se les dice "reemplazados" en alguna parte. Al mostrarse el documento, el agente de usuario (i.e. navegador) lo sustituye por el valor de algún atributo. Como el elemento imagen por el valor de su src.
Los elementos vacíos se cierran sobre sí mismos, añadiendo una barra invertida antes de su > final: />
Pero... hay más
Elementos sin tags
Y como no hay dos sin tres, además del tag final omitible y los elementos vacíos, están aquellos que pueden prescindir de ambas etiquetas: apertura y cierre son opcionales: <html> | <head> | <body> porque los tres elementos existen en el documento por ellos mismos aunque no haya ni rastro de sus etiquetas.
Crea un documento html y escribe sólo <html> y abre el inspector de Chrome, Firefox u otro. Verás que el resto de elementos son creados.
Reconozco que en en este punto y en algún momento yo he defendido lo contrario en alguna conversación. Así que aquí mi rectificación sobre la obligatoriedad de abrir y cerrar estos elementos.
Otra cosa totalmente distinta es que si decides ahorrarte alguna de ellas puedan surgir imprevistos en función del navegador, como forzar el modo "chapuza".
Notas finales
Como habrás visto en las referencias los enlaces son a la especificación de Html 4.01. Con XHTML Strict hay una máxima: todo lo que se abre se debe cerrar
. Así que todos los elementos se den abrir y cerrar y los vacíos se deben cerrar sobre sí mismos.
Html5 lo que hace es básicamente, en el campo del marcado, añadir nuevos elementos (con sus tags) y dotarlos a todos de semántica, haciendo hincapié en este aspecto del uso en función de su naturaleza.
En las especificaciones de Html5 definen al elemento en el DOM como:
Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.
Los elementos en el DOM representan cosas, esto es, tienen un significado intrínseco, también conocido como la semántica.
Sin embargo, ya lo advierte el aviso, al ir al apartado del "elemento en el html" no hay introducción al mismo. Pero recuerda, Html5 es "una ampliación de Html4".
Quizás todo lo anterior sea de todo punto superfluo y sin mayor trascendencia. Pero nunca está de más procurar ser lo más preciso al expresarnos y hacerlo con la mayor precisión que podamos. Nos ahorraremos ambigüedades y aclaraciones.
Créditos:
En la búsqueda de info tanto en las especificaciones del W3c como en la web sobre las diferencias entre elemento y etiqueta me topé con este artículo de @kangax. Verás una gran similitud en la estructura de ambos. No es coincidencia.
Artículo publicado originalmente el 12/11/12. Actualizado el 04/12/2014
 en html. Cuándo usar una expresión y cuando otra. su sintaxis y excepciones.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Acerca de estos dos parrafos:
ResponderEliminarY el ejemplo anterior del h1 lo podríamos ampliar algo más. Pues el tag de apertura puede contener otras partes, como múltiples atributos y sus valores. Que formarían parte también del elemento.
Y como no hay dos sin tres, además del tag final omitible y los elementos vacíos, están aquellos que pueden prescindir de ambas etiquetas: apertura y cierre son opcionales: html | head | body porque los tres elementos existen en el documento por ellos mismos aunque no haya ni rastro de sus etiquetas.
Al final el html es xml, ¿Podrias respaldar lo que dices en ambos parrafos con un parser de xml? html al igual que el ejemplo que pusiste de h1 contiene mas elementos y todos son parte de el elemento html. Espero me haya dado a entender.
Lo que afirmo en el segundo párrafo que copias no es algo de mi cosecha. Lo tienes explicitado en el enlace a la especificación que puse al inicio.
ResponderEliminarDe todas formas, por si tuviese dificultad en acceder a él, te lo copio aquí:
Some HTML element types allow authors to omit end tags (e.g., the P and LI element types). A few element types also allow the start tags to be omitted; for example, HEAD and BODY. The HTML DTD indicates for each element type whether the start tag and end tag are required.
Sobre el primero creo que es más que evidente, obvio: la etiqueta de apertura puede contener más que la información sobre el tipo de elemento que es: como decía, cualquier atributo y su valor. Y si el tag inicial forma parte del elemento, también, por lógica lo contenido en la etiqueta.
Muy bueno el artículo. ¿porque será que html5 no es estricto con el cierre de los tag, tal como lo es xhtml? ¿acaso no es preferible que el cierre sea obligatorio? tal vez porque me acostumbré a cerrar todo considere que ésta sea una buena práctica, no se.
ResponderEliminarHola Cristian
ResponderEliminarEs que Html5 es el Html 4+1, y el 4 lo permitía.
Y sí, para evitarse "sorpresas" lo mejor es ir cerrando las puestas que se abren, así no lo dejamos al libre albedrío del navegador. Que cada uno tiene el suyo.
Gracias por la visita.
Gracias por compartir este material que nos sirve para despejar alguna duda, y a la vez estar actualizados!!!
ResponderEliminar