HTML utiliza etiquetas predefinidas que le indican al navegador cómo mostrar el contenido. Las etiquetas no son más que algunas instrucciones encerradas entre llaves angulares (es decir, <>). Las etiquetas se usan en muchos lugares de la página web, pero muchos usuarios a menudo se confunden acerca de algunas etiquetas, ya sea un contenedor o una etiqueta vacía. Obtienen esta confusión porque no saben para qué etiqueta debe haber una etiqueta final junto con la etiqueta de apertura o no. Hay dos tipos de etiquetas en HTML:
- Vacío
- Envase
Ahora, veamos las definiciones y ejemplos de los contenedores HTML y las etiquetas vacías más utilizados.
Etiquetas de contenedor
Las etiquetas de contenedor generalmente se dividen en tres partes, es decir, etiqueta de apertura, contenido (que se mostrará en el navegador) y etiqueta de cierre. En la parte de contenido, también pueden contener otras etiquetas. Estas etiquetas de apertura y cierre se utilizan en pares, que son la etiqueta de inicio y la etiqueta final, que a menudo se denominan etiquetas de ENCENDIDO y APAGADO. Si olvida cerrar la etiqueta del contenedor, el navegador aplica el efecto de la etiqueta de apertura hasta el final de la página. Así que tenga cuidado al trabajar con etiquetas de contenedores. La mayoría de las etiquetas presentes en HTML son etiquetas contenedoras.
Sintaxis:
<nombre_etiqueta> …</nombre_etiqueta>
Algunas etiquetas de contenedores de uso común son:
1. Etiquetas esenciales: las siguientes etiquetas se utilizan para crear la estructura de la página web:
- <html>….</html> : Esto marca el comienzo y el final de la página web y también indica que el documento es un documento HTML. Esto contiene todas las demás etiquetas entre estas etiquetas que se consideran para hacer una página web.
- <head>…</head> : Esta etiqueta se utiliza para definir la parte principal del documento que contiene la información relacionada con la página web.
- <title>…</title> : Esta etiqueta almacena la descripción de la página web, todo lo que se proporciona en estas etiquetas aparece en el nombre de la pestaña cuando el navegador la abre. Se describe en la etiqueta principal.
- <body>….</body>: Esta etiqueta se utiliza para mostrar toda la información o datos, es decir, texto, imágenes, hipervínculos, videos, etc., en la página web al usuario.
2. Encabezados: las siguientes etiquetas se utilizan para los encabezados:
<h1>….</h1> a <h6>…</h6>: Se utiliza para incluir encabezados de diferentes tamaños que van del 1 al 6.
3. Formateadores de texto: las siguientes etiquetas se utilizan para formatear texto:
- <p>….</p> : Cuando se necesita incluir párrafos, se usa esta etiqueta
- <b>….</b> : Pone el texto contenido en negrita.
- <i>…</i> : Pone el texto contenido en cursiva.
4. Hipervínculos: la siguiente etiqueta se utiliza para definir un hipervínculo en la página web:
<a href=”link.com”>…</a>: cuando vinculamos otras páginas web, agregamos los hipervínculos a otras páginas web usando esta etiqueta <a …>…</a>.
5. Etiqueta de botón: la siguiente etiqueta se utiliza para crear un botón de clic:
<button>…</button>: Esto se usa de muchas maneras, pero principalmente se usa para manipular dom agregando eventos y muchos más.
6. Etiqueta de división: la siguiente etiqueta se utiliza para crear una división:
<div>….</div>: Esto define una sección en un documento. La página web se puede dividir en diferentes secciones usando la etiqueta <div>….</div>.
7. Etiqueta iframe: la siguiente etiqueta se utiliza para el encuadre en línea:
<iframe src=”link.com> </iframe> : Cuando se va a incrustar algún otro documento como un video o una imagen en HTML, usamos esta etiqueta.
8. Etiqueta de navegación: la siguiente etiqueta se utiliza para establecer un enlace de navegación:
<nav>…</nav>: define una barra de navegación que contiene un conjunto de menús o un menú de hipervínculos.
9. Etiqueta de script: la siguiente etiqueta se usa para agregar código JavaScript a la página web:
<script>…</script> : Contiene el código javascript que agrega interactividad a la página web.
10. Listas: las siguientes etiquetas se utilizan para escribir datos en forma de listas ordenadas y desordenadas:
- <ol>…</ol>: Esta etiqueta se utiliza para crear listas ordenadas.
- <ul>…</ul>: esta etiqueta se utiliza para crear listas desordenadas.
- <li>…</li>: esta etiqueta se utiliza para agregar elementos de lista.
Etiquetas vacías
Las etiquetas que no contienen ninguna etiqueta de cierre se conocen como etiquetas vacías. Las etiquetas vacías contienen solo la etiqueta de apertura, pero realizan alguna acción en la página web.
Sintaxis:
<nombre_etiqueta>
Algunas etiquetas vacías de uso común son:
- <br>: inserta un salto de línea en una página web donde sea necesario.
- <hr>: inserta una línea horizontal donde sea necesario en la página web.
- <img>: esta etiqueta se usa para mostrar las imágenes en la página web que se proporcionaron en el atributo src de la etiqueta.
- <input> : esto se usa principalmente con formularios para tomar la entrada del usuario y también podemos definir el tipo de entrada.
- <enlace>: Cuando almacenamos nuestro CSS en un archivo externo, este se puede usar para vincular archivos y documentos externos a la página web y se usa principalmente para vincular archivos CSS.
- <meta>: Contiene todos los metadatos de la página web. Los metadatos son los datos sobre los datos y se describen en la etiqueta principal.
- <fuente>: cuando se necesita incluir una fuente de medios externa en la página web. La etiqueta de fuente se utiliza para insertar cualquier fuente de medios como audio, video, etc. en nuestra página web.
Ejemplo:
Este ejemplo demuestra el uso de contenedores y etiquetas vacías:
HTML
<!DOCTYPE html> <html lang="en"> <head> <!--Meta data--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--The description written on title tag get appeared as browser tab name--> <title>Geeks For Geeks </title> </head> <!-- Whatever content in body tag appears on the webpage--> <body> <!--Headings--> <h1> Geeks For Geeks </h1> <h2> Geeks For Geeks </h2> <h3> Geeks For Geeks </h3> <h4>Geeks For Geeks </h4> <h5> Geeks For Geeks</h5> <h6> Geeks For Geeks </h6> <p> This is a paragraph.</p> <!--For horizontal line --> <hr> <!--For paragraphs --> <p> Geeks for geeks is a computer science portal for geeks. </p> <hr> <p> This is a <br> line break </p> <h4> Link </h4> <a href="https://www.geeksforgeeks.org/"> Geeks For Geeks</a> <!--For ordered lists--> <ol> <li> Item1</li> <li> Item2 </li> <li> Item3 </li> <li> Item4</li> </ol> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA