Cómo trabajar con etiquetas vacías y de contenedores en HTML

Cómo trabajar con etiquetas vacías y de contenedores en HTML

El lenguaje de marcado de hipertexto también conocido como HTML, se utiliza para crear aplicaciones web. Las etiquetas HTML, comúnmente conocidas como elementos, son el aspecto más importante del lenguaje HTML. Las etiquetas HTML incrustan y muestran contenido o información en páginas web. Hay dos tipos de etiquetas HTML: etiquetas vacías y de contenedores.

Este blog guiará cómo trabajar con etiquetas vacías y de contenedores en HTML.

Etiquetas vacías

Las etiquetas vacías también se conocen como "único" o "vacío"Etiquetas. La etiqueta vacía nunca contiene contenido, pero se pueden especificar los atributos. Estas etiquetas no tienen una etiqueta de finalización y pueden contener una barra insegura en la etiqueta. Los ejemplos de etiquetas vacías son "
", "", "", "", "", "", "", y muchos más.

Sintaxis

La sintaxis para mencionar los elementos vacíos en HTML es la siguiente:

Para ver cómo trabajar con etiquetas vacías, consulte el ejemplo a continuación. El "
"La etiqueta se conoce como la etiqueta de ruptura de línea y se usa para romper la línea:

Html etiquetas vacías
La etiqueta de ruptura de la línea

La salida indica que el "
"La etiqueta ha roto la línea:

Podemos agregar propiedades de estilo CSS a las etiquetas HTML. El "


"La etiqueta es otro elemento vacío que agrega una línea horizontal a la página:

Html etiquetas vacías


La etiqueta de ruptura de la línea

El "fronterizo"La propiedad CSS se aplica al"


"Con tres valores, uno es el ancho de borde que es igual a"3px", El estilo de borde se establece como"discontinuos"Y el color de la frontera.

Producción

Hasta ahora, hemos discutido las etiquetas vacías HTML. Ahora, pasaremos por etiquetas de contenedor HTML en la siguiente sección.

Etiquetas de contenedor

Las etiquetas de contenedor HTML consisten en tres partes: etiquetas iniciales, contenido y etiquetas de finalización. La sintaxis de la etiqueta de contenedor HTML se da de la siguiente manera:

Contenido

Consulte los ejemplos a continuación para saber cómo funciona la etiqueta del contenedor en HTML.

Ejemplo 1: Cómo agregar un párrafo en HTML?

El "

Esta es una etiqueta de párrafo

Producción

Ejemplo 2: Cómo agregar encabezados en HTML?

Hay seis niveles de etiquetas de contenedor de encabezado que se pueden usar para agregar encabezados a una página web. Vamos a ponerlos en un documento HTML para ver cómo funcionan y mirar en una página web:

Linuxhint


Linuxhint


Linuxhint


Linuxhint


Linuxhint

Linuxhint

Producción

Podemos proporcionar el estilo en línea a estas etiquetas. Considere el ejemplo a continuación, que muestra cómo aplicar varias propiedades de estilo CSS a estas etiquetas:

Linuxhint


Linuxhint


Linuxhint


Linuxhint


Linuxhint

Linuxhint

Aquí está la explicación de las propiedades declaradas anteriormente:

  • El "color de fondo"La propiedad agrega color al fondo del elemento.
  • "Familia tipográficaLa propiedad ajusta el estilo de fuente del elemento.
  • "texto alineado"La propiedad ajusta la colocación o alineación del texto.

Producción

Le hemos mostrado cómo usar las etiquetas de contenedores vacías y vacías de HTML.

Conclusión

Las etiquetas vacías y las etiquetas de contenedores son componentes principales de los documentos HTML que integran el contenido y la información en una página web. Las etiquetas vacías no contienen ningún contenido y consisten solo en la etiqueta de inicio con una barra insegura al final, como
. Sin embargo, las etiquetas de contenedor contienen las etiquetas de inicio y finalización junto con el contenido. Este blog ha elaborado sobre el funcionamiento de los elementos vacíos y de contenedores en HTML.