Si revisas la documentación podrás comprender la diferencia:
El elemento es un ente bien definido por W3C Recommendation con una función específica. De hecho hay actualmente seis tipos de elementos:
Elementos vacíos (void elements)
area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr
Los elementos template
template
Raw text elements (elementos de texto sin formato)
script, style
escapable raw text elements (elementos de sin formato escapables)
textarea, title
Foreign elements (elementos foráneos)
Elementos del espacio de nombres MathML y del espacio de nombres SVG.
Elementos normales
Todos los que conocemos tradicionalmente como p, div, span
Cada elemento como dije más arriba tiene una definición en la especificación. Ver por ejemplo cómo se definiría un elemento p. O sea, p es todo eso y ahora debe ser escrito según las normas, con la ayuda de las etiquetas.
Etiquetas
Son una parte de los elementos.
Las etiquetas se utilizan para delimitar el inicio y el final de los elementos en el marcado. El texto sin formato, el texto sin formato que se puede escapar y los elementos normales tienen una etiqueta de inicio para indicar dónde comienzan y una etiqueta de final para indicar dónde terminan. Las etiquetas de inicio y fin de ciertos elementos normales pueden omitirse, como se describe en la sección etiquetas opcionales. Los que no pueden ser omitidos no deben ser omitidos. Los elementos vacíos solo tienen una etiqueta de inicio. Las etiquetas finales no deben especificarse para elementos vacíos. Los elementos extraños deben tener una etiqueta inicial y una etiqueta final, o una etiqueta inicial marcada como de cierre automático, en cuyo caso no deben tener una etiqueta final.
En los sub-apartados 8.1.2.1 Etiquetas de inicio y 8.1.2.2 Etiquetas de fin verás que hay dos
tipos de etiquetas: de inicio y de cierre. Allí
se especifica también en qué consiste cada una y cuál es su finalidad.
Hay que leer y comprender esos dos apartados para saber lo que es en
sí una etiqueta.
En este elemento:
<p id="miParrafo">Lorem ipsum dolor sit amet</p>
Hay dos etiquetas, una de inicio: <p id="miParrafo"> y otra de fin </p> y el elemento es un elemento del tipo normal que sirve en HTML para representar un párrafo.
Aquí dejo algo interesante y que confunde a mucha gente: Este elemento por ejemplo (del tipo void) no tiene etiqueta de cierre:
<br />
¿Por qué? Por lo que dice el número 6 que define las etiquetas de apertura:
- Luego, si el elemento es uno de los elementos vacíos, o si el elemento es un elemento extraño, entonces puede haber un solo carácter
U + 002F SOLIDUS (/). Este carácter no tiene efecto en los elementos
vacíos, pero en los elementos extraños marca la etiqueta de inicio
como de cierre automático.
Si escribimos el elemento así: <br> haría lo mismo que <br />. Y en lenguaje coloquial podríamos decir que <br> es un elemento de HTML cuya función es producir un salto de línea y cuya etiqueta inicial es <br>, como es un elemento vacío (void) no tiene etiqueta de cierre. Y si lo definimos así: <br class="myBreak"> diríamos que se trata de un elemento cuya etiqueta inicial es <br class="myBreak">.
En resumen podemos decir que: el elemento es la entidad que representa un componente simple del DOM y que las etiquetas delimitan y definen las características de ese componente en cuanto al marcado.
