En este artículo, conoceremos los elementos HTML , junto con la comprensión de los diversos elementos disponibles y su sintaxis a través de los ejemplos. Un elemento HTML es la colección de etiquetas de inicio y finalización con el contenido insertado entre ellas.
Sintaxis:
<tagname > Contents... </tagname>
Etiquetas compatibles: HTML Elements admite casi todas las etiquetas HTML .
Elemento HTML: El elemento HTML consta de 3 partes.
i) Etiqueta de apertura: se utiliza para decirle al navegador dónde comienza el contenido.
ii) Etiqueta de cierre: se utiliza para decirle al navegador dónde termina el contenido.
iii)Contenido: es el contenido real dentro de la etiqueta de apertura y cierre.
La combinación de estas 3 partes da como resultado un elemento HTML general.
Ejemplo:
Toda la estructura del elemento HTML
Ejemplo 1: en este ejemplo, <p> es una etiqueta de inicio, </p> es una etiqueta de finalización y contiene algo de contenido entre las etiquetas, que forman un elemento
HTML
<!DOCTYPE html> <html> <head> <title>HTML Elements</title> </head> <body> <h2>Welcome To GeeksforGeeks</h2> <p>Hi Geeks!</p> </body> </html>
Producción:
Ejemplo de elementos HTML
Ejemplo 2: Este ejemplo ilustra el uso del elemento de párrafo HTML.
HTML
<!-- HTML code to illustrate HTML elements --> <!DOCTYPE html> <html> <head> <title>HTML Elements</title> </head> <body> <p>Welcome to GeeksforGeeks!</p> </body> </html>
Producción:
Welcome to GeeksforGeeks!
Elementos HTML anidados: el elemento HTML se usa dentro de otro elemento HTML que se denomina elementos HTML anidados.
Ejemplo 3: Este ejemplo describe el uso de los elementos HTML anidados. Aquí, la etiqueta <html> contiene <head> y <body> . La etiqueta <head> y <body> contiene otros elementos, por lo que se denomina elemento anidado.
HTML
<!DOCTYPE html> <html> <head> <title>HTML Elements</title> </head> <body style="text-align: center"> <h1>GeeksforGeeks</h1> <p>Computer science portal</p> </body> </html>
Producción:
Elemento HTML anidado
Necesario agregar etiqueta final: Es necesario agregar la etiqueta final de un elemento. De lo contrario, el contenido mostrado puede o no mostrarse correctamente. Es una buena práctica si agrega etiquetas de cierre a los Elementos HTML no vacíos, pero hoy en día los navegadores son cada vez más avanzados y de naturaleza indulgente y es por eso que si de alguna manera olvida aplicar la etiqueta de cierre en el Elemento no vacío, el el navegador no arrojará ningún error, pero el problema surgirá a medida que inserte más y más elementos HTML después de eso.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>HTML Elements</title> </head> <body> <h2>Welcome To GeeksforGeeks</h2> <p>Hi Geeks! </body> </html>
Esta imagen muestra las herramientas de desarrollo del navegador y puede ver que el navegador agrega automáticamente la etiqueta de cierre faltante del elemento de párrafo en el código escrito anteriormente sin mostrar ningún error.
Herramientas de desarrollo
La salida final es:
Página web
Un navegador web es indulgente, pero eso no significa que comience a ignorar la etiqueta de finalización/cierre de los elementos HTML. Puede mostrar algún comportamiento inesperado o error en algunos casos. Por ejemplo, si tiene más de un elemento HTML en su página web, la omisión de la etiqueta de cierre puede provocar un conflicto de los límites de los diferentes elementos HTML. El navegador no sabrá dónde termina. Tomará la siguiente etiqueta y pensará que pertenece a la etiqueta anterior sin la etiqueta de cierre.
Resumen final del segmento de texto anterior: coloque siempre la etiqueta de cierre en un elemento HTML no vacío.
Ejemplo 4: este ejemplo describe el elemento HTML especificando la etiqueta final.
HTML
<!DOCTYPE html> <html> <head> <title>HTML Elements</title> </head> <body> <!-- h1 tag contains the end tag --> <h1>GeeksforGeeks</h1> <!-- p tag contains the end tag --> <p>Computer science portal</p> </body> </html>
Producción:
Ejemplo de etiqueta HTML de inicio y final
Elementos HTML vacíos: Los elementos HTML sin contenido, es decir, que no imprimen nada, se denominan elementos vacíos. Los elementos HTML vacíos no tienen una etiqueta final. Por ejemplo. <br> , <hr> , <link> , <input> etc. son elementos HTML.
Ejemplo 5: En este ejemplo, la etiqueta <br> no imprime nada. Se utiliza como un salto de línea que rompe la línea entre las etiquetas <h2> y <p> .
HTML
<!DOCTYPE html> <html> <head> <title>Empty HTML Elements</title> </head> <body> <h2>Welcome To GfG</h2> <br /> <p>Hello Geeks.</p> </body> </html>
Producción:
elemento vacío HTML