Las etiquetas HTML ayudan a los navegadores web a convertir documentos HTML en páginas web. Las etiquetas siempre se encierran entre paréntesis angulares < >. Las etiquetas no distinguen entre mayúsculas y minúsculas
Entonces, para comprender mejor qué etiquetas se abren y se cierran por naturaleza, podemos dividirlas en 4 partes.
- Etiquetas de estructura de documento
- Etiquetas semánticas
- Etiquetas de tablas
- Etiquetas de contenedor
Etiquetas de estructura del documento:
-
etiqueta html: abre y cierra la etiqueta del documento HTML .
Sintaxis:
<html> ... </html>
-
etiqueta de encabezado: las etiquetas <html> y <body> están separadas por el elemento <head> , que es un contenedor para los datos del encabezado.
Sintaxis:
<head> ... </head>
-
etiqueta del cuerpo: lo siguiente representa todas las cosas que se muestran en la página web. El cuerpo del documento está definido por la etiqueta <body> . El elemento <body> incluye todo el contenido de un documento HTML, incluidos encabezados, párrafos, gráficos, hipervínculos, tablas, listas, etc.
Sintaxis:
<body> ... </body>
-
etiqueta de título: la etiqueta de título le permite especificar un título para una página web. Este título aparece en la barra de título del navegador.
<title> ... <title>
Ejemplo 1: El siguiente ejemplo muestra el título como «Ejemplo de etiqueta» en la barra de título del navegador. La etiqueta del cuerpo representa todos los datos en el navegador web.
HTML
<!DOCTYPE html> <html> <head> <title>Tag Example</title> </head> <body> This is an example for GeeksforGeeks HTML tags. </body> </html>
Producción:
Etiquetas semánticas: los elementos semánticos tienen nombres significativos que informan sobre el tipo de contenido.
-
etiqueta de encabezado: presenta información que presenta una página (por ejemplo, un título) o una parte de una página.
Sintaxis:
<header> ... </header>
-
etiqueta de navegación: Define una barra de navegación que contiene un conjunto de menús o un menú de hipervínculos.
Sintaxis:
<nav> ... </nav>
-
etiqueta principal: Contiene el contenido principal de la página web.
Sintaxis:
<main> ... </main>
-
etiqueta aparte: presenta información que solo está vinculada de forma distante a la sección principal de la página
Sintaxis:
<aside> ... </aside>
-
etiqueta de pie de página: El pie de página de una página, o una parte de una página, se encuentra en la parte inferior de la página. En la mayoría de los casos, el pie de página proporciona información relacionada con el contenido, como el autor y una declaración de derechos de autor.
Sintaxis:
<footer> ... <footer>
-
etiqueta del artículo: esta etiqueta especifica contenido independiente e independiente. Esto no hace nada, pero si queremos aplicar CSS, entonces funciona de esa manera.
Sintaxis:
<article> ... </article>
Ejemplo 2: El siguiente código demuestra algunas de las etiquetas semánticas.
HTML
<!DOCTYPE html> <html> <head> <title>Tag Example</title> </head> <body> <article> <header>A heading here</header> <main> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/python/">Python</a> </nav> <p>GeeksforGeeks GeeksforGeeks GeeksforGeeks GeeksforGeeks</p> <aside> <p>GeeksforGeeks</p> <p>GeeksforGeeks GeeksforGeeks GeeksforGeeks GeeksforGeeks</p> </aside> <p>GeeksforGeeks GeeksforGeeks GeeksforGeeks GeeksforGeeks</p> </main> <footer>Write footer here</footer> </article> </body> </html>
Producción:
Etiqueta de tablas: la tabla HTML es una disposición de datos en filas y columnas, o posiblemente en una estructura más compleja.
-
etiqueta de tabla: muestra la tabla en la página web.
Sintaxis:
<table> ... </table>
-
etiqueta tr: muestra la fila de la tabla.
Sintaxis:
<tr> ... </tr>
-
ª etiqueta: Muestra los nombres de las columnas de la tabla o podemos decir fila de encabezado.
Sintaxis:
<th> ... </th>
-
td tag: Muestra los datos de la tabla.
<td> ... </td>
Ejemplo 3: el código siguiente muestra las etiquetas de la tabla .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h2>GeeksforGeeks Employee's Saving</h2>
<table style="width: 20%">
<tr>
<th>Name</th>
<th>saving</th>
</tr>
<tr>
<td>Kishan</td>
<td>$200</td>
</tr>
<tr>
<td>Pradumna</td>
<td>$150</td>
</tr>
<tr>
<td>Riya</td>
<td>$50</td>
</tr>
<tr>
<td>Rohan</td>
<td>$100</td>
</tr>
<tr>
<td>Samaksh</td>
<td>$170</td>
</tr>
</table>
</body>
</html>
Producción:
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.
-
etiqueta de encabezado: una etiqueta de encabezado HTML se utiliza para definir los encabezados de una página.
Sintaxis:
<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>
-
Etiqueta de párrafo: La etiqueta <p> en HTML define un párrafo.
Sintaxis:
<p> ... </p>
-
etiqueta div: un contenedor para un bloque de contenido.
Sintaxis:
<div>...</div>
-
etiqueta span: contenedor de contenido en línea, como el contenido dentro de un párrafo.
Sintaxis:
<span> ... </span>
-
em tag: Esta etiqueta da énfasis al texto contenido (generalmente en cursiva).
Sintaxis:
<em> ... </em>
-
etiqueta fuerte: esta etiqueta hace que el contenido esté en negrita.
Sintaxis:
<strong>...</strong>
-
una etiqueta: esta etiqueta agrega el enlace al texto.
Sintaxis:
<a> ... </a>
-
ol tag: Esta etiqueta es para la lista ordenada.
Sintaxis:
<ol> ... </ol>
-
Etiqueta ul: esta etiqueta es para la lista desordenada.
Sintaxis:
<ul> ... </ul>
-
etiqueta li: esta etiqueta es para la lista de artículos
Sintaxis:
<li> ... </li>
Ejemplo 4: el código siguiente muestra las etiquetas de contenedor .
HTML
<!DOCTYPE html><html> <head> <title>Container Tags</title> </head> <body> <h1>H1 Heading</h1> <h2>H2 heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6> <a href="">Link</a> <p>GeeksforGeeks</p> </body></html> |
Producción:
Ejemplo 5: el código siguiente muestra las etiquetas de contenedor .
HTML
<!DOCTYPE html><html> <head> <title>Container Tags</title> </head> <body> <strong>Bold</strong> <p>GeeksforGeeks</p> <em>emphasize the text</em> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body></html> |
Producción:
Publicación traducida automáticamente
Artículo escrito por rohanmittal1366 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA