Documentación de HTML
Referencia concisa y basada en ejemplos de HTML. Lee el concepto, mira el código y practícalo en un recorrido de Coddy.
Empezar el cursoPrimeros pasos
- Doctype`<!DOCTYPE html>` es la primera línea de todo documento HTML. Le indica al navegador que muestre la página en modo estándar y no en modo quirks. Aprende la sintaxis, qué provocan los doctypes antiguos y cómo comprobar el modo.
- Etiquetas HTMLLas etiquetas HTML marcan el contenido para que el navegador sepa qué es cada parte: un título, un párrafo, un enlace, una imagen. Aprende cómo funcionan las etiquetas y los elementos, qué etiquetas no tienen cierre, cómo se anidan y cuáles usarás más.
- Atributos HTMLLos atributos añaden información a un elemento HTML: a dónde va un enlace, qué muestra una imagen, qué clase de CSS se aplica. Aprende la sintaxis, los atributos globales que acepta todo elemento, class e id, los atributos booleanos y los atributos data-*.
- Comentarios HTMLUn comentario en HTML es texto entre <!-- y --> que el navegador no muestra. Aprende la sintaxis, los comentarios de varias líneas, cómo comentar código, el atajo del editor, por qué los comentarios no se pueden anidar y por qué nunca son privados.
- Div en HTMLLa etiqueta <div> es un contenedor genérico en bloque sin significado propio. Aprende a agrupar contenido con ella, darle estilo con una clase, construir diseños con divs y flexbox, y cuándo es mejor una etiqueta semántica o un botón.
- Span en HTMLLa etiqueta <span> es un contenedor genérico en línea: envuelve unas palabras dentro de una línea para darles estilo o manejarlas con scripts sin romper la línea. Aprende a usarla, en qué se diferencia de div y cuándo encaja mejor una etiqueta más específica.
Texto
- Encabezados HTMLHTML tiene seis niveles de encabezado, de <h1> a <h6>, que le dan a la página su esquema. Aprende los tamaños por defecto, cómo ordenar los encabezados, cuántas etiquetas h1 usar, cómo cambiar su tamaño con CSS y cómo los usan los lectores de pantalla.
- Salto de líneaUsa <br> para empezar una línea nueva dentro de un bloque de texto. Aprende cuándo <br> es lo correcto y cuándo es mejor un párrafo, cómo conservar los saltos de línea de tu texto, cómo dejar que las palabras largas se corten con <wbr> y cómo evitar que una línea se corte.
- Espacios en HTMLLos navegadores juntan en uno cualquier serie de espacios en HTML. Aprende a añadir espacios extra con , qué hace un espacio de no separación, cómo conservar espacios y tabulaciones con <pre> y white-space, y cuándo es mejor el espaciado con CSS.
- Negrita y cursivaPon texto en negrita en HTML con <strong> o <b>, y en cursiva con <em> o <i>. Aprende qué etiqueta usar en cada caso, cómo combinar negrita y cursiva, y cómo poner texto en negrita o cursiva con CSS.
- Subrayado y tachadoSubraya texto en HTML con <u> o con text-decoration de CSS, y táchalo con <s> o <del>. Aprende qué significa cada etiqueta, cómo <ins> y <del> marcan cambios, y por qué subrayar un texto que no es un enlace confunde a los lectores.
- SuperíndiceEscribe texto en superíndice con <sup> y en subíndice con <sub>: exponentes, ordinales, llamadas a notas al pie y fórmulas químicas. Aprende los usos habituales, cómo evitar que separen las líneas y cuándo encaja mejor un carácter Unicode o MathML.
- Línea horizontalDibuja una línea horizontal en HTML con la etiqueta <hr>. Aprende qué significa, cómo cambiar su color, grosor, ancho y estilo con CSS, cómo crear un separador con texto en el medio y cómo hacer una línea vertical.
- Centrar textoCentra texto en HTML con la propiedad CSS text-align: center. Aprende dónde ponerla, por qué no funciona en un span, cómo centrar texto verticalmente en una caja, cómo alinear el texto al inicio, al final o a ambos bordes, y cómo sangrar párrafos.
Enlaces e imágenes
- Enlaces (a href)Cómo crea enlaces el elemento <a>: el atributo href, URL absolutas y relativas, saltar a una sección de la página con #id, enlaces de descarga, tarjetas enlazadas y los errores que los rompen.
- Abrir en nueva pestañaAñade target="_blank" a un enlace para abrirlo en una nueva pestaña. Esta página explica rel="noopener" y noreferrer, cómo avisar de que un enlace abre una pestaña nueva, los demás valores de target y cómo hacerlo desde JavaScript.
- Enlaces mailtoCrea un enlace que abra un correo nuevo con href="mailto:", rellena el asunto, el cuerpo, cc y bcc, codifícalos correctamente y crea enlaces para llamar con tel: y sms:.
- Botón con enlaceLa forma correcta de crear un botón que lleve a otra página es un enlace con estilo de botón. Descubre por qué fallan un botón dentro de un enlace y la navegación con onclick, cuándo un botón de formulario es la opción correcta y cómo dar estilo y deshabilitar enlaces con aspecto de botón.
- Imágenes en HTMLCómo insertar una imagen en HTML con la etiqueta <img>: src y alt, el tamaño de la imagen con width y height, imágenes responsive, recortar con object-fit, pies de foto con figure, carga diferida y el hueco bajo las imágenes.
Listas y tablas
- Listas en HTMLCómo hacer listas en HTML: viñetas con <ul>, listas numeradas con <ol> (start, reversed, letras y números romanos), listas anidadas, listas de descripción, y cómo cambiar o quitar las viñetas con CSS.
- Tablas en HTMLCómo hacer una tabla en HTML: filas con <tr>, celdas con <td>, celdas de encabezado con <th> y scope, títulos con caption, thead, tbody y tfoot, filas de cebra y tablas que se desplazan en pantallas pequeñas.
- Bordes de tablaCómo añadir bordes a una tabla HTML con CSS: líneas simples con border-collapse, border-spacing, solo líneas entre filas, solo bordes interiores, esquinas redondeadas y por qué el atributo border está obsoleto.
- Colspan y rowspanCombina celdas de una tabla a lo ancho de varias columnas con colspan y hacia abajo en varias filas con rowspan. Aprende a contar las celdas para que la tabla quede cuadrada, a crear encabezados agrupados y a mantener legibles para los lectores de pantalla las tablas con celdas combinadas.
Formularios
- Formularios HTMLCómo crear un formulario en HTML: el elemento form, los atributos name, action y method (GET frente a POST), agrupar campos con fieldset y legend, la validación integrada con required y pattern, y cómo gestionar el envío con JavaScript.
- Tipos de inputTodos los tipos de la etiqueta <input> de HTML en un solo lugar: text, email, password, number, range, date y time, color, file, hidden y el resto, con lo que valida cada uno, el teclado que abre en los teléfonos y los atributos que comparten.
- Botones HTMLCómo crear un botón en HTML con el elemento <button>: los tres tipos (submit, button, reset), enviar un valor con el formulario, botones deshabilitados, iconos y estilos CSS que conservan el anillo de foco.
- Checkbox en HTMLCómo crear una casilla de verificación en HTML con <input type="checkbox">: etiquetas, el atributo checked, lo que envía el formulario cuando está marcada y cuando no, grupos de casillas, seleccionar todo con el estado indeterminate y estilos.
- Radio buttonCómo funcionan los botones de opción en HTML: agruparlos con el atributo name, una opción por defecto con checked, grupos obligatorios, leer el valor seleccionado en JavaScript, el comportamiento con el teclado y cómo darles estilo como círculos propios o tarjetas.
- Lista desplegableCómo crear una lista desplegable en HTML con <select> y <option>: valores, una opción por defecto o de marcador, required, grupos de opciones, selección múltiple, leer y fijar el valor en JavaScript y dar estilo a la flecha.
- Textarea en HTMLCómo crear un campo de texto de varias líneas con <textarea>: rows y cols, texto por defecto entre las etiquetas, redimensionar y crecer automáticamente, maxlength con un contador de caracteres, saltos de línea en el texto enviado y estilos.
- Label en HTMLCómo da nombre a un campo de formulario el elemento <label>: conectarlo con for e id o envolviendo el campo, la zona de clic más grande en checkboxes y radios, pistas y mensajes de error, etiquetas ocultas y los errores que rompen la conexión.
HTML semántico
- HTML semánticoHTML semántico significa elegir las etiquetas por lo que es el contenido, no por cómo se ve. Aprende las etiquetas semánticas de estructura (header, nav, main, article, aside, footer), lo que aportan a los lectores de pantalla y a los buscadores, y cómo revisar la estructura de tu página.
- Header en HTMLEl elemento <header> contiene la introducción de una página o de una sección: un logo, un título, la navegación, la autoría. Aprende a construir la cabecera de un sitio, en qué se diferencia <header> de <head> y de los encabezados, cómo usarlo dentro de artículos y cómo hacerlo fijo.
- Footer en HTMLEl elemento <footer> cierra una página o una sección: copyright, datos de contacto, enlaces, información del autor. Aprende a construir el pie de un sitio con columnas de enlaces, a mantenerlo abajo en una página corta y a usar footers dentro de artículos.
- Nav en HTMLEl elemento <nav> marca un bloque de enlaces de navegación principales. Aprende a construir una barra de navegación con <nav> y una lista, a marcar la página actual, a etiquetar varios nav en una misma página y a crear un botón de menú para móvil.
- Section en HTMLEl elemento <section> agrupa contenido de un mismo tema bajo su propio encabezado. Aprende cuándo usar <section>, cuándo es mejor <article> o <div>, cómo se anidan los tres y cómo una section con nombre se convierte en landmark.
Head y etiquetas meta
- Etiqueta titleEl elemento <title> da nombre a la página en la pestaña del navegador, en los marcadores y en los resultados de búsqueda. Aprende dónde va, qué longitud debe tener, en qué se diferencia de <h1> y del atributo title, y cómo cambiarlo con JavaScript.
- Meta viewportLa etiqueta meta viewport les dice a los teléfonos que diseñen la página al ancho de la pantalla y no a un ancho de escritorio. Aprende la etiqueta estándar, qué hace cada valor, por qué el CSS responsive depende de ella y qué valores evitar.
- Redirección HTMLRedirige una página a otra con una etiqueta meta refresh en HTML puro, con JavaScript o en el servidor. Aprende la sintaxis de meta refresh, cómo recargar una página automáticamente, por qué una redirección 301 en el servidor es la mejor opción y qué hacen los buscadores con cada una.
- FaviconUn favicon es el pequeño icono de la pestaña del navegador. Aprende la etiqueta link que lo añade, qué archivos y tamaños incluir (ICO, SVG, PNG, apple-touch-icon), cómo hacer un favicon SVG o con un emoji, cómo cambiarlo con JavaScript y por qué sigue apareciendo uno antiguo.
- Atributo langEl atributo lang les dice a los navegadores, a los lectores de pantalla y a las herramientas de traducción en qué idioma está tu contenido. Aprende dónde ponerlo, qué códigos usar (en, es-MX, pt-BR), cómo marcar una frase en otro idioma y las cosas visibles que cambia.
Multimedia e interactivos
- Etiqueta iframeEl elemento <iframe> muestra otra página web dentro de la tuya. Aprende los atributos que necesitas (src, title, width, height), cómo insertar vídeos de YouTube y mapas, cómo hacer un iframe responsive, cómo sandbox limita lo que puede hacer y por qué algunos sitios se niegan a cargar dentro de uno.
- Etiqueta videoEl elemento <video> reproduce archivos de vídeo con el reproductor propio del navegador. Aprende el marcado, los atributos que importan (controls, autoplay, muted, loop, playsinline, poster, preload), los formatos alternativos con <source>, los subtítulos con <track>, el tamaño responsive y cómo controlar la reproducción con JavaScript.
- Etiqueta audioEl elemento <audio> reproduce archivos de sonido con el reproductor integrado del navegador. Aprende el marcado, los atributos (controls, autoplay, loop, muted, preload), qué formatos usar, por qué se bloquea el autoplay con sonido y cómo crear tu propio botón de reproducir con JavaScript.
- Details y summaryLos elementos <details> y <summary> crean una sección desplegable sin JavaScript: el summary siempre está visible y al pulsarlo se muestra u oculta el resto. Aprende el marcado, los atributos open y name, los acordeones, cómo dar estilo a la flecha y el evento toggle.
