Etiquetas HTML

Guía completa para estudiantes

Esta guía contiene todas las etiquetas HTML organizadas por categorías según su función. Explora cada sección para aprender sobre su uso, sintaxis y ejemplos prácticos.

No se encontraron resultados

Intenta con otro término de búsqueda

Etiquetas de Estructura

<html>
Define el documento HTML. Es el contenedor raíz de toda la página.
<html>
  <head>...</head>
  <body>...</body>
</html>
<head>
Contiene metadatos/información sobre el documento.
<head>
  <title>Título de la página</title>
  <meta charset="UTF-8">
</head>
<body>
Contiene el contenido visible de la página web.
<body>
  <h1>Mi página web</h1>
  <p>Contenido de la página</p>
</body>
<div>
Define una división o sección en un documento HTML.
<div class="contenedor">
  <p>Contenido dentro del div</p>
</div>
<span>
Contenedor en línea para texto, usado para aplicar estilos.
<p>Texto con <span style="color:red">parte en rojo</span></p>

Etiquetas de Texto

<h1> - <h6>
Encabezados de diferentes niveles (h1 es el más importante).
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sección</h3>
<p>
Define un párrafo de texto.
<p>Este es un párrafo de texto en mi página web.</p>
<strong>
Texto en negrita con importancia semántica.
<p>Texto <strong>importante</strong> en negrita.</p>
<em>
Texto en cursiva con énfasis semántico.
<p>Texto con <em>énfasis</em> en cursiva.</p>
<br>
Salto de línea (etiqueta vacía).
<p>Primera línea<br>Segunda línea</p>
<hr>
Línea horizontal para separar contenido.
<p>Texto arriba</p>
<hr>
<p>Texto abajo</p>

Etiquetas de Multimedia

<img>
Inserta una imagen en el documento.
<img src="imagen.jpg" alt="Descripción" width="300">
<audio>
Inserta contenido de audio.
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video>
Inserta contenido de video.
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Etiquetas de Formularios

<form>
Contenedor para elementos de un formulario.
<form action="/procesar" method="post">
  ... elementos del formulario ...
</form>
<input>
Campo de entrada de datos.
<input type="text" name="nombre" placeholder="Tu nombre">
<textarea>
Área de texto multilínea.
<textarea name="mensaje" rows="4" cols="50">
Texto por defecto
</textarea>
<select>
Lista desplegable de opciones.
<select name="color">
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
</select>
<button>
Botón clickeable.
<button type="submit">Enviar</button>

Etiquetas de Tablas

<table>
Define una tabla.
<table>
  <tr>
    <th>Encabezado</th>
  </tr>
  <tr>
    <td>Dato</td>
  </tr>
</table>
<tr>
Fila de una tabla.
<tr>
  <td>Celda 1</td>
  <td>Celda 2</td>
</tr>
<td>
Celda de datos en una tabla.
<td>Contenido de la celda</td>
<th>
Celda de encabezado en una tabla.
<th>Nombre de columna</th>

Etiquetas Semánticas

<header>
Cabecera de una página o sección.
<header>
  <h1>Título del sitio</h1>
</header>
<nav>
Sección de navegación.
<nav>
  <a href="#inicio">Inicio</a>
  <a href="#contacto">Contacto</a>
</nav>
<main>
Contenido principal del documento.
<main>
  <article>...</article>
</main>
<article>
Contenido autónomo e independiente.
<article>
  <h2>Título del artículo</h2>
  <p>Contenido...</p>
</article>
<section>
Sección temática de contenido.
<section>
  <h2>Sección 1</h2>
  <p>Contenido...</p>
</section>
<footer>
Pie de página o sección.
<footer>
  <p>Derechos reservados 2023</p>
</footer>

Etiquetas de Metadatos

<title>
Define el título del documento (se muestra en la pestaña del navegador).
<title>Mi Página Web</title>
<meta>
Proporciona metadatos sobre el documento HTML.
<meta charset="UTF-8">
<meta name="description" content="Descripción de la página">
<link>
Define la relación entre el documento y un recurso externo.
<link rel="stylesheet" href="estilos.css">
<style>
Define estilos CSS internos.
<style>
  body {
    background-color: lightblue;
  }
</style>
<script>
Define código JavaScript.
<script>
  console.log('Hola Mundo');
</script>

Etiquetas Más Utilizadas

<div>
Contenedor genérico para agrupar elementos.
<p>
Define un párrafo de texto.
<a>
Define un hipervínculo.
<img>
Inserta una imagen en el documento.
<ul> / <ol>
Listas no ordenadas y ordenadas.
<li>
Elemento de una lista.
<span>
Contenedor en línea para texto.
<h1> - <h6>
Encabezados de diferentes niveles.