¿Por qué ambos y funcionan de la misma manera? ¿Está bien usar ambos?

No son ambos correctos.

El trabajo de un navegador web es mostrar páginas web y, a veces, las personas escriben su HTML incorrectamente. Como resultado, la mayoría de los navegadores web aceptarán e intentarán corregir errores menores de marcado cuando aparezcan, en un esfuerzo por mostrar la página de la manera que el creador pretendía. Es por eso (muy probablemente) por qué funcionan igual, aunque uno sea incorrecto.

Ilustraré la diferencia entre las dos etiquetas que presentó con algunos ejemplos.

En HTML, hay dos tipos de etiquetas. Hay etiquetas que tienen una etiqueta de apertura y una de cierre, como las siguientes:
Web Content Goes Here

Page Title


La etiqueta de apertura no tiene barra, y la etiqueta de cierre tiene una barra al principio.

El otro tipo de etiqueta es una etiqueta independiente. Estos tipos de etiquetas solo aparecen por sí mismos. La etiqueta de salto de línea,
es una de esas. Otro que se usa con frecuencia es la etiqueta de imagen, .


En XHTML, las etiquetas independientes necesitaban una barra al final de la etiqueta, para que la etiqueta se cerrara automáticamente. Entonces, la etiqueta
no funcionó; tenía que ser
.

XHTML ya no se usa mucho, por lo que está bien si desea usar
o
, pero este último generalmente se prefiere porque funciona con HTML y XHTML.

Entonces, ¿está bien usar
o
?
No. La primera es una etiqueta independiente y es una sintaxis válida. La última es una etiqueta de cierre sin una etiqueta de apertura, para un tipo de etiqueta que no necesita etiquetas de apertura / cierre.

Y claro, usar
puede producir el resultado deseado, pero no se garantiza que los navegadores web se comporten de la misma manera cuando se manejan marcas incorrectas.

todo por sí mismo también funciona. En la definición HTML estándar del W3C, la etiqueta BR no tiene una etiqueta final, por lo que solía ser que
era la forma correcta de hacerlo. Algunos puristas piensan que cada etiqueta, incluso las etiquetas independientes como


o deberían tener un cierre al final de su etiqueta, y no hay nada de malo en eso. Es por eso que muchos codificadores HTML generalmente usan
.

Luego apareció XHTML y REQUERIÓ la etiqueta de cierre (
), por eso
y
ambos funcionan en la mayoría de los navegadores. No sé por qué los navegadores aceptan por sí mismo, pensarías que
solo te daría un descanso, pero te da dos. Es una sintaxis inconsistente, por lo que incluso si funciona, debe evitar ese formato.

Entonces, mi consejo para usted es usar la etiqueta
, SIEMPRE funcionará de la manera que espera, en HTML, XHTML, HTML5.

es la forma más apropiada de representación. W3C relaja la forma en que manejamos las etiquetas independientes. Eso significa que podemos cerrarlos si lo deseamos, solo para ser semánticamente correctos. Entonces,
y
son correctos.

Los navegadores modernos están escritos para ignorar los errores de desarrollo comunes, como faltar etiquetas de cierre (que es mucho más general) y etiquetas mal formadas como . No significa que uno deba hacer eso.

De hecho, Internet Explorer muestra un error en la consola para tales etiquetas, algo como esto

HTML1522: Etiqueta final no válida: ““. Utilice “
” o “
” en su lugar.

Es para tener en cuenta que solo es un navegador para advertir sobre tales eventos.

Consulte HTML 5: ¿es

o
?