En este artículo, veremos la etiqueta del contenedor y la etiqueta vacía en HTML, además de saber en qué se diferencian entre sí. La etiqueta del contenedor no es lo mismo que la etiqueta vacía y estas son dos categorías diferentes de etiquetas utilizadas en HTML.
Etiqueta de contenedor: esta etiqueta contiene 3 partes, a saber, la etiqueta de apertura, el contenido que se mostrará en el navegador y la etiqueta de cierre. Si olvidamos agregar la etiqueta de cierre, el navegador continuará implementando el efecto de esa etiqueta de apertura en el contenido dentro de esa etiqueta. Esto deformará la estructura de la página web en general.
Sintaxis:
<Tag_Name> Content </Tag_Name>
Lista de etiquetas de contenedores de uso común:
- Etiquetas raíz de documento HTML: estos son algunos elementos raíz de cada documento HTML, sin incluir estas etiquetas en HTML no podemos crear páginas web.
- <html></html> : Es el elemento raíz de un documento HTML que indica el inicio y el final de la página web, junto con la representación del contenido que se encuentra dentro de ella.
- <head></head> : esta etiqueta contiene información abstracta relacionada con la página web, que no se muestra directamente pero se utiliza para mejorar la página web en general.
- <title></title> : esta etiqueta contiene el título del documento HTML que se muestra en la pestaña del navegador. Se describe dentro de la etiqueta principal.
- <body></body> : La etiqueta del cuerpo contiene todos los datos que serán visibles en la página web.
- Etiquetas de encabezado: las etiquetas de encabezado se utilizan para proporcionar encabezados de diferentes tamaños y estilos de texto a su página web. Las etiquetas de encabezado varían de <h1> a <h6> .
- Listas: hay 3 etiquetas de lista diferentes que se utilizan para enumerar diferentes elementos de una manera particular, que se detallan a continuación:
- <ol></ol> : esta etiqueta de lista se utiliza para enumerar los elementos en un orden particular, es decir, números numéricos, alfabéticos o romanos. La etiqueta <li> se usa para agregar elementos de lista dentro de ella.
- <ul></ul> : Este listtag se usa para enumerar los elementos en forma de viñetas. La forma de la bala se puede cambiar a disco, círculo y cuadrado. También usa la etiqueta <li> para agregar elementos de lista.
- <dl></dl> : Esta es una etiqueta de lista de definición . Utiliza <dt> la etiqueta de término de datos y <dd> la etiqueta de descripción de datos para agregar elementos dentro de ella.
- Formateadores de texto: estas etiquetas definen la forma en que se mostrará el texto en la página web.
- <p></p> : esta es la etiqueta de párrafo utilizada para agregar texto en la página web.
- <b></b> : la etiqueta en negrita se utiliza para mostrar el texto en negrita que es importante en la página web.
- <i></i> : la etiqueta en cursiva muestra el texto en forma inclinada.
Estas también son algunas etiquetas de contenedor que generalmente se usan dentro de un documento HTML.
- <div></div> : esta etiqueta se usa para crear un contenedor separado en la página web que también puede usar otras etiquetas dentro de él.
- <a href=””></a> : Esta etiqueta se utiliza para proporcionar enlaces a diferentes páginas de la página web.
- <button></button> : Esta es una etiqueta de botón que se usa para formar un botón en la página web para realizar algunas acciones.
- <nav></nav> : La etiqueta de navegación se usa para construir el bar de navegación en el sitio web.
- <script src=””></script> : La etiqueta script se usa principalmente para vincular un archivo JavaScript externo usando el atributo src o puede escribir código JavaScript dentro de esta etiqueta directamente en un documento HTML.
- <iframe src=””></iframe> : la etiqueta Iframe se usa para mostrar páginas web anidadas. Representa una página web dentro de otra página web.
Ejemplo: El siguiente ejemplo demuestra el uso de etiquetas de contenedor en HTML.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Container tag & Empty tag in HTML </title> </head> <body> <h2>Welcome To GFG</h2> <h3> Here are some common container tags used in this code: </h3> <p>Hey! This is a paragraph.</p> <h3>Below is an description list:</h3> <dl> <dt>GeeksforGeeks</dt> <dd> GeeksforGeeks is an online learning platform for geeks around the globe. </dd> <dt>Notebook</dt> <dd> Notebook is a collection of pages (plane or linear) that is used to make notes of some important things. </dd> </dl> <button>Click Me!</button> </body> </html>
Producción:
Etiquetas vacías: Las etiquetas vacías son las etiquetas que solo contienen las etiquetas de apertura, no tienen ninguna etiqueta de cierre. Por lo tanto, no afectan a la página web si olvidamos cerrar cualquier etiqueta vacía.
Sintaxis:
<Tag_Name>
Aquí hay algunas etiquetas vacías que generalmente se usan en documentos HTML:
- <input>: esta etiqueta se utiliza para recibir información de los usuarios. Se utiliza principalmente dentro de una etiqueta de formulario.
- <img>: Es una etiqueta de imagen que se utiliza para insertar una imagen en la página web.
- <br>: La etiqueta de ruptura se usa para romper la línea y pasar a la siguiente línea.
- <enlace>: la etiqueta de enlace se utiliza para vincular el archivo CSS externo al documento HTML actual.
- <hr>: Se utiliza para insertar una línea horizontal en la página web cuando sea necesario.
- <fuente>: la etiqueta fuente se utiliza para insertar un archivo multimedia externo en la página web que puede ser un archivo de audio o video.
- <meta>: Almacena la metainformación sobre la página web que es información sobre datos que no queremos mostrar a los usuarios en la página web.
Ejemplo: El siguiente ejemplo ilustra el uso de las etiquetas vacías en HTML.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Container tag & Empty tag in HTML </title> </head> <body> <h2>Welcome To GFG</h2> <h3> Here are some common empty tags used in this code: </h3> <p>Hey! This is a paragraph.</p> <br> <hr> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220125210128/gfglogo.png" alt="GFG_logo" height="300px" width="300px"> </body> </html>
Producción:
S. No. |
Etiquetas de contenedores |
Etiquetas vacías |
|---|---|---|
|
1. |
Contiene la etiqueta de apertura, el contenido y la etiqueta de cierre. |
Solo tiene la etiqueta de apertura y no tiene ninguna etiqueta final. |
|
2. |
Las etiquetas de contenedor pueden contener la etiqueta vacía en su interior. |
Las etiquetas vacías no contienen ninguna etiqueta, solo usan atributos dentro de ellas. |
|
3. |
Las etiquetas de contenedor se pueden utilizar para definir el comportamiento del texto que contiene. |
La etiqueta vacía no tiene ningún contenido de texto dentro. |
|
4. |
El anidamiento de las etiquetas puede ser posible en este caso. |
El anidamiento de etiquetas no es posible. |
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA