HTML

¿Qué es HTML?

HyperText Markup Language - Lenguaje de marcado para crear páginas web

¿Qué es HTML5?

La quinta versión de HTML, introducida en 2014 con nuevas características semánticas y multimedia

Estructura básica de HTML5

Todo documento HTML5 debe tener DOCTYPE, html, head y body

Etiqueta DOCTYPE

Declara el tipo de documento y versión de HTML

Etiqueta html

Elemento raíz que contiene todo el contenido de la página

Etiqueta head

Contiene metadatos sobre el documento que no se muestran al usuario

Etiqueta body

Contiene todo el contenido visible de la página web

Etiqueta title

Define el título que aparece en la pestaña del navegador

Atributo lang

Especifica el idioma del contenido del elemento

Meta charset

Define la codificación de caracteres del documento

Etiquetas de encabezado (h1-h6)

Definen títulos y subtítulos con jerarquía del 1 al 6

Etiqueta p

Define un párrafo de texto

Etiqueta br

Inserta un salto de línea simple (elemento vacío)

Etiqueta hr

Crea una línea horizontal divisoria (elemento vacío)

Etiqueta strong

Indica texto con importancia fuerte (generalmente negrita)

Etiqueta em

Enfatiza texto (generalmente cursiva)

Etiqueta a

Crea enlaces a otras páginas o recursos

Atributo href

Especifica la URL de destino de un enlace

Atributo target

Especifica dónde abrir el enlace

Etiqueta img

Inserta una imagen en la página (elemento vacío)

Atributo src

Especifica la ruta o URL de la imagen

Atributo alt

Proporciona texto alternativo para la imagen

Etiqueta ul

Crea una lista no ordenada (con viñetas)

Etiqueta ol

Crea una lista ordenada (numerada)

Etiqueta li

Define un elemento de lista

Etiqueta div

Contenedor genérico para agrupar elementos

Etiqueta span

Contenedor inline genérico para texto

Atributo class

Asigna una o más clases CSS al elemento

Atributo id

Asigna un identificador único al elemento

Etiqueta table

Crea una tabla para mostrar datos tabulares

Etiqueta tr

Define una fila en una tabla

Etiqueta th

Define una celda de encabezado en una tabla

Etiqueta td

Define una celda de datos en una tabla

Etiqueta form

Crea un formulario para entrada de datos del usuario

Etiqueta input

Crea campos de entrada de datos (elemento vacío)

Atributo type en input

Especifica el tipo de campo de entrada

Etiqueta label

Etiqueta descriptiva para campos de formulario

Etiqueta textarea

Crea un área de texto multilínea

Etiqueta select

Crea una lista desplegable de opciones

Etiqueta option

Define una opción dentro de un select

Etiqueta button

Crea un botón clickeable

Atributo placeholder

Muestra texto de ayuda dentro de un campo de entrada

Atributo required

Hace que un campo sea obligatorio

Etiqueta header

Define el encabezado de una página o sección

Etiqueta nav

Define una sección de navegación

Etiqueta main

Define el contenido principal de la página

Etiqueta section

Define una sección temática del documento

Etiqueta article

Define contenido independiente y autocontenido

Etiqueta aside

Define contenido relacionado pero secundario

Etiqueta footer

Define el pie de página de una página o sección

Etiqueta figure

Agrupa contenido multimedia con su descripción

Etiqueta figcaption

Proporciona una descripción para un elemento figure

Etiqueta video

Inserta contenido de video en la página

Etiqueta audio

Inserta contenido de audio en la página

Atributo controls

Muestra controles de reproducción para video/audio

Etiqueta source

Especifica múltiples recursos multimedia

Etiqueta canvas

Área de dibujo para gráficos con JavaScript

Etiqueta iframe

Inserta otra página web dentro de la actual

Atributo style

Aplica estilos CSS directamente al elemento

Comentarios HTML

Texto que no se muestra en el navegador

Entidades HTML

Códigos especiales para caracteres reservados

Atributo width y height

Especifica el ancho y alto de elementos multimedia

Etiqueta meta viewport

Controla cómo se muestra la página en dispositivos móviles

Etiqueta link

Conecta recursos externos como CSS

Etiqueta script

Incluye código JavaScript en la página

Atributo data-*

Almacena datos personalizados en elementos HTML

Etiqueta time

Representa fechas y horas de forma semántica

Etiqueta mark

Resalta texto como si estuviera marcado

Etiqueta details

Crea contenido expandible/colapsable

Etiqueta summary

Define el encabezado visible de un elemento details

Etiqueta progress

Muestra el progreso de una tarea

Etiqueta meter

Muestra una medida escalar dentro de un rango

Atributo contenteditable

Hace que el contenido del elemento sea editable

Atributo draggable

Especifica si un elemento se puede arrastrar

Atributo hidden

Oculta el elemento de la vista

Input type=“email”

Campo de entrada específico para direcciones de email

Input type=“url”

Campo de entrada específico para URLs

Input type=“tel”

Campo de entrada específico para números telefónicos

Input type=“number”

Campo de entrada específico para números

Input type=“range”

Crea un control deslizante para seleccionar valores

Input type=“date”

Campo de entrada específico para fechas

Input type=“color”

Campo de entrada para seleccionar colores

Input type=“file”

Permite al usuario seleccionar archivos

Atributo accept

Especifica tipos de archivo aceptados en input file

Atributo multiple

Permite seleccionar múltiples valores u archivos

Etiqueta optgroup

Agrupa opciones relacionadas en un select

Atributo disabled

Desactiva un elemento de formulario

Atributo readonly

Hace que un campo sea de solo lectura

Atributo autofocus

Enfoca automáticamente un elemento al cargar la página

Atributo autocomplete

Controla el autocompletado del navegador

Validación HTML5 pattern

Define una expresión regular para validar entrada

Atributo min y max

Especifica valores mínimos y máximos para campos numéricos

Atributo step

Especifica el intervalo entre valores válidos

Etiqueta fieldset

Agrupa controles relacionados en un formulario

Etiqueta legend

Proporciona un título para un fieldset

Atributo for en label

Asocia una etiqueta con un control de formulario

Atributo tabindex

Especifica el orden de tabulación de los elementos

Elementos en línea vs bloque

En línea no rompen el flujo (span, a), bloque ocupan toda la línea (div, p)

Anidamiento correcto

Los elementos deben cerrarse en orden inverso a como se abren

Mejores prácticas HTML5

Usar semántica apropiada, validar código, optimizar imágenes, usar UTF-8