Resumen de etiquetas HTML
A continuación hemos creado un práctico resumen de etiquetas HTML en formato de chuleta. Aprende rápidamente las etiquetas clave para diseñar páginas web. Esperamos que esta tabla resumen te ayude en el desarrollo de tus proyectos de diseño de sitios web.
1. Estructura básica
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<!-- Comentario -->
<p>párrafo</p>
</body>
</html>
2. Elementos estructurales
| Elemento | Descripción | Jerarquía |
|---|---|---|
<!DOCTYPE html> | Indica que el documento está bajo el estándar de HTML5. | Fuera de <html> |
<html> | Representa la raíz del documento HTML. Contiene los elementos <head> y <body>. Es importante añadir el atributo lang para especificar el idioma del contenido, lo que mejora la accesibilidad y optimiza el SEO. | Raíz del documento |
<head> | Contiene metadatos sobre el documento, como enlaces a hojas de estilo, scripts y otras configuraciones que no son visibles para el usuario, pero que son esenciales para el navegador. | Dentro de <html> |
<meta> | Define los metadatos del documento, como la codificación de caracteres (charset), la descripción (name="description") o el autor. Esto influye en la forma en que los motores de búsqueda y navegadores interpretan la página. | Dentro de <head> |
<title> | Representa el título del documento. Se muestra en la barra superior del navegador. | Dentro de <head> |
<link> | Enlaza documentos externos como hojas de estilo CSS. | Dentro de <head> |
<style> | Define CSS interno. | Dentro de <head> |
<script> | Define código JavaScript, que puede estar embebido en el documento o enlazado a un archivo externo. Puede colocarse en <head> para scripts que se cargan antes del contenido, o al final de <body> para scripts que se ejecutan después de cargar la página. | Dentro de <head> o al final de <body> |
<body> | Contiene todo el contenido visible para el usuario. Sólo puede existir un elemento <body> en el documento. | Dentro de <html> |
Ver más sobre elementos estructurales →
3. Elementos semánticos
| Elemento | Descripción |
<section> | Define secciones de una web. |
<nav> | Especifica una sección que contiene un menú de navegación. |
<article> | Determina secciones de contenido. |
<aside> | Define la barra lateral de una página web. |
<h1> <h2> <h3> <h4> <h5> <h6> | Describe el tema de la sección. Disponemos de seis niveles: de h1 a h6, siendo <h1> la cabecera de mayor importancia. Sólo puede existir una etiqueta <h1> en el documento. |
<header> | Determina la cabecera de una web o de un elemento. |
<footer> | Define el pie de página. También se puede utilizar para definir el pie de otros elementos. |
<address> | Especifica una sección que contiene información de contacto. |
<main> | Determina el contenido principal del documento. Solo puede existir un elemento <main> en el documento. |
Ver más sobre elementos semánticos →
4. Etiquetas de contenido
| Elemento | Descripción |
|---|---|
<p> | Define una parte que debe mostrarse como un párrafo. |
<hr> | Representa un cambio temático entre párrafos. Suele representar una línea horizontal. |
<pre> | Indica que su contenido está preformateado y que este formato debe ser preservado. (En HTML, cuando no usas <pre>, los espacios en blanco múltiples, saltos de línea o tabulaciones se comprimen a un solo espacio) |
<blockquote> | Representa un contenido citado desde otra fuente. |
<ol> | Especifica una lista ordenada de elementos. |
<ul> | Determina una lista de elementos sin orden. |
<li> | Define un elemento de una lista. |
<dl> | Especifica una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas. |
<dt> | Representa un término definido por el siguiente <dd>. |
<dd> | Indica la definición de los términos listados antes que él. |
<figure> | Agrupa cualquier contenido que forme parte de un bloque o unidad independiente de información visual o multimedia, que puede ir acompañado de una descripción (<figcaption>). Esto incluye imágenes, videos, audios, y cualquier otro tipo de contenido relacionado. |
<figcaption> | Representa la leyenda o título de un elemento <figure>. |
<div> | Representa un contenedor genérico sin ningún significado especial. |
Ver más sobre etiquetas de contenido →
5. Etiquetas de texto
| Elemento | Descripción |
|---|---|
<a> | Representa un hiperenlace. |
<em> | Especifica un texto enfatizado. |
<strong> | Establece un texto importante. |
<small> | Define un comentario aparte, es decir, textos de políticas de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento. |
<s> | Representa contenido que no es exacto, tiene el estilo tachado. |
<cite> | Indica el título de una obra. |
<q> | Representa una cita textual entre comillas. |
<dfn> | Sirve para marcar el término que se quiere definir. |
<abbr> | Envuelve un texto que al pasar el puntero por encima despliega un tooltip. El contenido del tooltip se detalla mediante el atributo title. |
<time> | Determina un valor de fecha y hora. |
<code> | Establece un código de programación. |
<sub><sup> | Establece un subíndice y un superíndice respectivamente. |
<i> | Muestra el texto marcado con un estilo en cursiva o itálica. |
<b> | Representa el texto marcado con un estilo en negrita. |
<u> | Muestra el texto subrayado. |
<mark> | Representa un texto marcado o resaltado. |
<span> | Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea. |
<br> | Inserta un salto de línea. |
<wbr> | Indica una oportunidad de salto de línea, es decir, un punto sugerido donde el texto puede ser dividido para mejorar su legibilidad. |
Ver más sobre etiquetas de texto →
6. Hiperenlaces: valores del atributo target
| Valor | Descripción |
|---|---|
| «_blank» | Abre el enlace en una nueva ventana o pestaña del navegador. |
| «_self» | Abre el enlace en la misma ventana o pestaña del navegador (valor predeterminado). |
7. Caracteres especiales
| Símbolo | Código decimal | Entidad |
| & | & | & |
| < | < | < |
| “ | " | " |
| > | > | > |
| © | © | © |
| ÷ | ÷ | ÷ |
| € | € | € |
| ← | ← | ← |
Ver más sobre caracteres especiales →
8. Etiquetas para la creación de formularios
| Elemento | Descripción |
<form> | Define un formulario. |
<fieldset> | Permite organizar en grupos los campos de un formulario. |
<legend> | Representa el título de un <fieldset>. |
<label> | Representa el título de un elemento de control de un formulario. |
<input> | Se usa para crear controles interactivos que reciben datos del usuario. |
<button> | Representa un botón. |
<option> | Representa una opción en un elemento <select> o <datalist>. |
<select> | Representa un elemento de control que permite la selección entre un conjunto de opciones <option>. |
<optgroup> | Representa un conjunto de opciones, agrupadas lógicamente dentro de un <select> |
<datalist> | Se utiliza junto con la etiqueta <input> para proporcionar una lista de opciones <option> que ayudan a los usuarios a seleccionar un valor mientras escriben en un campo de entrada <input>. |
<textarea> | Representa un elemento de control de edición de texto multilínea. |
<output> | Representa el resultado de un cálculo. |
Ver más sobre etiquetas de formularios →
9. Atributos de la etiqueta <input>
| Atributos | Descripción |
| type | Tipo de input: text, password, checkbox, radio, etc. |
| value | Valor inicial del input. |
| readonly | El input es de solo lectura. |
| disabled | El input no se puede modificar. |
| size | Cantidad de caracteres visibles en un input. Su valor por defecto es 20. Funciona en los inputs de los siguientes tipos: text, search, tel, url, email, and password. |
| maxlength | Máximo número de caracteres del input. |
| min / max | Mínimo y máximo número de caracteres del input. |
| pattern | Nos permite indicar un patrón. |
| placeholder | Describe el valor esperado en un campo. |
| required | Especifica que es obligatorio completar el input. |
| autofocus | Indica que se hace foco en ese input cuando se carga la página. |
Ver más sobre atributos de input →
10. Tipos de inputs: atributo type
| Type | Description |
| checkbox | Casilla de verificación que permite seleccionar o deseleccionar distintos valores. |
| color | Control para especificar un color; abre un selector de colores cuando está activo. |
| date | Permite indicar una fecha (año, mes y día, sin hora). Abre un selector de fechas para año, mes y día. |
| Permite insertar un correo electrónico haciendo su validación. | |
| file | Permite seleccionar un archivo. |
| image | Botón con imagen de tipo submit. La imagen se define en el atributo src. |
| month | Permite ingresar mes y año. |
| number | Permite ingresar un número. Muestra un selector y agrega validación predeterminada. |
| password | Valor oculto. Usado para contraseñas. |
| radio | Permite seleccionar un valor único entre múltiples opciones. |
| range | Nos deja ingresar un número cuyo valor exacto no es importante. Se muestra como un widget de rango con un valor predeterminado en el medio. Se utiliza en conjunto con «min» y «max» para definir el rango de valores aceptados. |
| search | Campo para ingresar cadenas de búsqueda. |
| submit | Botón que envía el formulario |
| tel | Control para ingresar un número de teléfono y agrega validación predeterminada. |
| text | Control para campo de texto con validación predeterminada. |
| time | Control para hora. |
| url | Nos permite ingresar una URL. |
| week | Control para ingresar una fecha. |
Ver más sobre tipos de inputs →
11. Patrones y expresiones regulares
| Clases de caracteres | |
| . | Cualquier carácter excepto salto de línea |
| [abc] | Cualquiera de los caracteres entre corchetes |
| [^abc] | Que NO sea cualquiera de los caracteres entre corchetes |
| [a-g] | Cualquier carácter entre a y g (en minúscula) |
| (a|b) | a o b |
| Anclas | |
| ^abc | Comienzo de una línea |
| abc$ | Final de una línea |
| Caracteres específicos | |
| \w\ d \s | Palabra, dígito, espacio en blanco |
| \W \D \S | Que NO sea palabra, dígito o espacio en blanco |
| \t \n \r | Tabulador, salto de línea, retorno de carro |
| Cuantificadores | |
| a* a+ a? | 0 o más veces, 1 o más veces, 0 o 1 vez |
| a{5} a{2,} | Solo 5, 2 o más |
| a{1,3} | Entre 1 y 3 |
Ver más sobre patrones y expresiones regulares →
12. Tablas de contenido
| Elemento | Descripción |
|---|---|
<table> | Define la tabla. |
<caption> | Título de una tabla. |
<tr> | Representa una fila de celdas en una tabla. |
<td> | Representa una celda de datos en una tabla. |
<th> | Representa el encabezado de una tabla. |
13. Contenido incrustado
| Elemento | Descripción |
|---|---|
<img> | Representa una imagen. |
<iframe> | Representa un contexto anidado de navegación, es decir, un documento HTML embebido. |
<embed> | Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML. |
<object> | Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin. |
<video> | Representa un vídeo. |
<audio> | Representa un sonido. |
<source> | Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>. |
<canvas> | Representa un área de mapa de bits en el que se pueden utilizar scripts para renderizar gráficos. |
<svg> | Define una imagen vectorial embebida. |
Ver más sobre contenido incrustado →
14. Elementos en bloque o block
Etiquetas HTML en bloque: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><ol><p><pre><section><table><ul><video>
15. Elementos en línea o inline
Etiquetas HTML en línea: <a><abbr><b><button><cite><code><dfn><em><i><img><input><label><q><select><small><span><strong><sub><sup><textarea><time>
Ver más sobre elementos en bloque →
16. Marcadores o anclas en HTML
<a name="nombre_marcador"></a>
<a href="#nombre_marcador">Ir al título</a>
17. Metaetiquetas
| Metaetiqueta | Descripción |
|---|---|
<title> | Define el título del documento, que se muestra en la barra de título del navegador y en los resultados de búsqueda. |
<meta charset="UTF-8"> | Especifica la codificación de caracteres utilizada en el documento. UTF-8 es la codificación más comúnmente utilizada para admitir caracteres multilingües. |
<meta name="description" content=""> | Proporciona una breve descripción del contenido del sitio web. Es utilizado por los motores de búsqueda para mostrar información sobre el sitio en los resultados de búsqueda. |
<meta name="keywords" content=""> | Especifica palabras clave relacionadas con el contenido del sitio web. Aunque no es tan relevante para los motores de búsqueda modernos, aún puede ser utilizado para conocer la temática del sitio web. |
<meta name="viewport" content=""> | Define cómo se debe ajustar y escalar el contenido en dispositivos móviles. Es importante para lograr un diseño responsive. Ver configuración de la metaetiqueta viewport. |
<meta name="author" content=""> | Especifica el nombre del autor del documento. |
<meta name="copyright" content=""> | Indica los derechos de autor del documento. |
<meta name="robots" content=""> | Indica a los motores de búsqueda si deben indexar y seguir los enlaces dentro del documento. |
18. Metaetiqueta viewport
| Propiedad | Descripción | Ejemplo |
|---|---|---|
| width | Ancho inicial del viewport | <meta name="viewport" content="width=device-width"> |
| initial-scale | Nivel de escala inicial del viewport | <meta name="viewport" content="initial-scale=1.0"> |
| minimum-scale | Escala mínima permitida del viewport | <meta name="viewport" content="minimum-scale=0.5"> |
| maximum-scale | Escala máxima permitida del viewport | <meta name="viewport" content="maximum-scale=2.0"> |
| user-scalable | Habilita/deshabilita el zoom del usuario | <meta name="viewport" content="user-scalable=yes"> |
Ver más sobre la metaetiqueta viewport →
Para llevar tus habilidades al siguiente nivel y dar vida y estilo a tus páginas, te invitamos a continuar con el tutorial de CSS de nivel inicial.