Etiquetas de HTML: Qué son, para qué sirven y lista completa

jac ADesarrollo Web, HTML1 years ago2.1K Views

HTML es el lenguaje estándar para crear páginas web. En su núcleo, HTML utiliza etiquetas para estructurar y dar formato al contenido. En este artículo, exploraremos qué son las etiquetas de HTML, para qué sirven y los tipos principales que todo desarrollador web debe conocer.

Índice

¿Qué son las etiquetas de HTML?
¿Para qué sirven las etiquetas de HTML?
- Ejemplo de etiqueta
Tipos de etiquetas de HTML
Lista de etiquetas de HTML más comunes
Cómo Ver las Etiquetas de HTML de tu Web: Guía Paso a Paso
- Paso a Paso:

¿Qué son las etiquetas de HTML?

Las etiquetas de HTML son los componentes básicos utilizados en HTML para definir la estructura y el contenido de una página web.

Una etiqueta de HTML está formada por un nombre de etiqueta entre corchetes angulares (por ejemplo, <etiqueta>) y generalmente viene en pares: una etiqueta de apertura (<etiqueta>) y una etiqueta de cierre (</etiqueta>).

Algunas etiquetas no tienen una etiqueta de cierre y se denominan etiquetas vacías (por ejemplo, <img>).

¿Para qué sirven las etiquetas de HTML?

Las etiquetas de HTML sirven para:

Estructurar el contenido: Organizan el contenido en elementos como párrafos, encabezados, listas, tablas, etc.
Definir la apariencia: Trabajan junto con CSS (Cascading Style Sheets) para aplicar estilos y diseños.
Enlazar recursos: Permiten incluir recursos externos como imágenes, videos, enlaces, etc.
Agregar interactividad: Junto con JavaScript, permiten añadir funciones interactivas y dinámicas a la página.

Ejemplo de etiqueta

<p>Esto es un párrafo</p>

Tipos de etiquetas de HTML

1. Etiquetas de estructura

Estas etiquetas son fundamentales para definir la estructura básica de una página web.

<html>: Define el comienzo de un documento HTML.
<head>: Contiene metadatos sobre el documento (como <title>, <meta>, <link>, etc.).
<body>: Contiene el contenido principal de la página.

<!DOCTYPE html>
<html>
<head>
  <title>Mi Página Web</title>
</head>
<body>
  <p>Contenido de mi página web.</p>
</body>
</html>

2. Etiquetas de encabezado

Las etiquetas de encabezado (<h1> a <h6>) se utilizan para definir títulos y subtítulos.

<h1>: Encabezado principal, generalmente el título más importante.
<h2>: Encabezado secundario.
<h3> a <h6>: Encabezados de niveles inferiores.

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Encabezado de tercer nivel</h3>

3. Etiquetas de texto

Estas etiquetas se utilizan para dar formato al texto.

<p>: Define un párrafo.
<strong>: Define texto fuerte, generalmente se muestra en negrita.
<em>: Define texto enfatizado, generalmente se muestra en cursiva.
<br>: Inserta un salto de línea.
<span>: Define una sección en línea dentro de un documento.

<p>Este es un <strong>texto en negrita</strong> y este es un <em>texto en cursiva</em>.</p>
<p>Línea 1<br>Línea 2</p>
<p>Texto con <span style="color: red;">color rojo</span>.</p>

4. Etiquetas de listas

Las listas permiten organizar elementos en una secuencia.

<ul>: Define una lista no ordenada (con viñetas).
<ol>: Define una lista ordenada (numerada).
<li>: Define un ítem dentro de una lista.

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

5. Etiquetas de enlace e imagen

Estas etiquetas son cruciales para enlazar recursos externos y añadir imágenes.

<a>: Define un hipervínculo.
<img>: Inserta una imagen.

<a href="https://www.ejemplo.com">Visita Ejemplo.com</a>
<img src="imagen.jpg" alt="Descripción de la imagen">

6. Etiquetas de tabla

Las tablas organizan datos en filas y columnas.

<table>: Define una tabla.
<tr>: Define una fila de tabla.
<td>: Define una celda de tabla.
<th>: Define una celda de encabezado de tabla.

<table>
  <tr>
    <th>Encabezado 1</th>
    <th>Encabezado 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
  <tr>
    <td>Dato 3</td>
    <td>Dato 4</td>
  </tr>
</table>

7. Etiquetas de formulario

Los formularios permiten la entrada de datos por parte del usuario.

<form>: Define un formulario.
<input>: Define un campo de entrada.
<label>: Etiqueta para un elemento <input>.

<form action="/submit" method="post">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre">
  <input type="submit" value="Enviar">
</form>

Lista de etiquetas de HTML más comunes

Etiqueta	Descripción

<html> Define el comienzo de un documento HTML.

<head> Contiene metadatos sobre el documento, como el título y enlaces a CSS.

<title> Define el título del documento, mostrado en la barra del navegador.

<meta> Define metadatos como el autor, descripción y palabras clave.

<link> Enlaza recursos externos, como hojas de estilo CSS.

<style> Contiene reglas CSS para dar estilo al contenido HTML.

<script> Define y enlaza scripts de JavaScript.

<body> Contiene el contenido principal de la página.

<header> Define la cabecera de una sección o página.

<nav> Define una sección de navegación.

<main> Define el contenido principal del documento.

<section> Define una sección genérica del documento. Ver aquí

<article> Define contenido independiente, como un artículo o blog.

<aside> Define contenido secundario, como una barra lateral.

<footer> Define el pie de página.

<h1> - <h6> Define encabezados de diferentes niveles (del más importante <h1> al menos <h6>).

<p> Define un párrafo.

<br> Inserta un salto de línea.

<hr> Inserta una línea horizontal.

<strong> Define texto fuerte (negrita).

<em> Define texto enfatizado (cursiva).

<a> Define un hipervínculo.

<img> Inserta una imagen.

<ul> Define una lista no ordenada.

<ol> Define una lista ordenada.

<li> Define un ítem dentro de una lista.

<table> Define una tabla.

<tr> Define una fila de tabla.

<td> Define una celda de tabla.

<th> Define una celda de encabezado de tabla.

<form> Define un formulario.

<input> Define un campo de entrada de datos.

<label> Etiqueta para un elemento <input>.

<button> Define un botón clicable.

<select> Define un menú desplegable.

<option> Define una opción en un menú desplegable.

<textarea> Define un área de texto para entrada de datos largos.

<div> Define una división o sección en un documento.

<span> Define una sección en línea dentro de un documento.

<iframe> Define un marco en línea para incrustar otro documento.

<canvas> Define un área de gráficos para dibujar con JavaScript.

<audio> Inserta contenido de audio.

<video> Inserta contenido de video.

<source> Define múltiples recursos multimedia para elementos <audio> o <video>.

<track> Define pistas de texto para elementos <audio> o <video>.

Cómo Ver las Etiquetas de HTML de tu Web: Guía Paso a Paso

Si eres nuevo en el desarrollo web, una de las habilidades fundamentales que necesitas dominar es cómo ver y analizar las etiquetas HTML en un sitio web.

Las etiquetas HTML son la columna vertebral de cualquier página web, y aprender a verlas te ayudará a entender cómo se estructura y se presenta la información. Aquí te explico cómo hacerlo de forma sencilla:

Paso a Paso:

Abrir el Navegador:
- Asegúrate de tener abierto tu navegador favorito.
Navegar a la Página Web:
- Ve a la página web de la que deseas ver las etiquetas HTML.
Acceder a la Herramienta de Inspección:
- Google Chrome: Haz clic derecho en cualquier parte de la página y selecciona “Inspeccionar” o simplemente presiona Ctrl+Shift+I (Windows) o Cmd+Option+I (Mac).
- Firefox: Haz clic derecho y selecciona “Inspeccionar” o presiona Ctrl+Shift+I (Windows) o Cmd+Option+I (Mac).
- Safari: Activa las herramientas de desarrollo desde “Preferencias > Avanzado > Mostrar menú Desarrollo en la barra de menús”. Luego haz clic derecho y selecciona “Inspeccionar elemento”.
- Microsoft Edge: Haz clic derecho y selecciona “Inspeccionar” o presiona Ctrl+Shift+I.
Explorar el Código HTML:
- Se abrirá un panel en tu navegador que muestra el código HTML de la página. Aquí podrás ver todas las etiquetas HTML utilizadas.

2. Utilizar Atajos de Teclado

Si prefieres los atajos de teclado, puedes acceder a la herramienta de inspección rápidamente:

Google Chrome y Firefox: Ctrl+Shift+I (Windows) o Cmd+Option+I (Mac).
Safari: Cmd+Option+I.
Microsoft Edge: Ctrl+Shift+I.

3. Usar Extensiones de Navegador

También existen extensiones que facilitan la inspección de etiquetas HTML:

Web Developer: Disponible para Chrome y Firefox. Añade un botón en la barra de herramientas del navegador que permite ver y modificar el código HTML directamente.
HTML Validator: Para validar y ver errores en el código HTML en tiempo real.

¿Cómo validar y depurar tu HTML?

Puedes usar herramientas como el Validador de W3C para comprobar que tu HTML cumple con los estándares web. Además, las herramientas de desarrollo del navegador también te permiten detectar y solucionar errores en tu código HTML.

¿Cuáles son las mejores prácticas para escribir etiquetas de HTML limpias y organizadas?

Algunas mejores prácticas incluyen:

Utilizar etiquetas semánticas adecuadas.
Anidar correctamente las etiquetas.
Comentar el código cuando sea necesario.
Mantener una estructura clara y ordenada.
Usar atributos de manera consistente y significativa.

¿Qué es una etiqueta anidada y cómo se utiliza?

Una etiqueta anidada es una etiqueta HTML dentro de otra etiqueta. Por ejemplo:

<a href="#">
   <img src="imagen.jpg" alt="Imagen">
</a>

es una etiqueta <img> anidada dentro de una etiqueta <a>.

Conclusión

Las etiquetas de HTML son la base sobre la cual se construye la web. Entender cómo funcionan, cómo inspeccionarlas y cómo utilizarlas correctamente es esencial para cualquier desarrollador web.¿

Dominar las etiquetas HTML te permitirá crear páginas web bien estructuradas, accesibles y optimizadas para motores de búsqueda.

Además, el uso adecuado de etiquetas semánticas puede mejorar significativamente la experiencia del usuario y la accesibilidad de tu sitio web.

Recuerda siempre validar tu código HTML para asegurarte de que cumple con los estándares web, y utiliza las herramientas de inspección del navegador para verificar y depurar tu código.

Mantener un código limpio y organizado no solo facilita la colaboración, sino que también hace que el mantenimiento y las futuras modificaciones sean mucho más sencillas.