Html

HTML5 - Reglas y Convenciones

---

1. Filosofía

1. Semántica primero — Cada etiqueta tiene un significado. Usar `, , en lugar de ` genéricos. El HTML debe ser legible y comprensible incluso sin CSS.
2. Accesibilidad por defecto — No es opcional ni un afterthought. WCAG AA es el mínimo: lang, alt, labels, contraste, teclado, headings jerárquicos.
3. Progressive Enhancement — El contenido debe ser accesible y funcional sin JavaScript. JS solo añade mejoras, no es requisito para operar.
4. Estructura sobre presentación — El HTML define la estructura y el significado. La presentación es responsabilidad exclusiva de CSS. No usar HTML para efectos visuales.
5. Menos es más — HTML mínimo y semántico. Sin etiquetas innecesarias, sin contenedores que no aportan estructura.

---

2. Versión Mínima

| Tecnología | Versión | | ---------- | ------------------ | | HTML | 5 (HTML semántico) |

---

3. Estructura Base

  
    
    
    
    Título de la página
    
  
  
    
      
        
          Inicio
          Sobre nosotros
        
      
    

    
      
        Título principal
        Contenido del artículo
      
    

    
      © 2026
    
  

Doctype y Lang

---

4. Etiquetas Semánticas

Landmarks

| Etiqueta | Propósito | | ----------- | -------------------------------------- | | ` | Cabecera de página o sección | | | Navegación principal | | | Contenido principal (único por página) | | | Contenido independiente (blog, post) | | | Agrupación temática | | | Contenido complementario | | ` | Pie de página o sección |

Content Models

Los elementos HTML se clasifican en categorías de contenido que determinan dónde pueden usarse:

| Categoría | Descripción | Ejemplos | | --------------- | ----------------------------------- | --------------------------------------------------- | | Flow | Mayoría de elementos visibles | `, , , , | | **Phrasing** | Elementos inline, texto | , , , , | | **Heading** | Encabezados | - | | **Sectioning** | Define secciones del documento | , , , | | **Embedded** | Contenido externo o multimedia | , , , | | **Interactive** | Elementos con los que se interactúa | , , , | | **Metadata** | Información del documento | , , , , ` |

Cada elemento puede pertenecer a una o más categorías. Ej: ` es Flow, Phrasing, Interactive y (con type=hidden`) Metadata.

Texto

| Etiqueta | Propósito | | -------------- | ---------------------------------------- | | `- | Jerarquía de títulos (1 h1 por página) | | | Párrafo | | | Cita larga (con cite opcional) | | | Título de obra citada | | | Código en línea | | | Código preformateado | | | Abreviatura (con title para expansión) | | | Información de contacto | | | Fecha/hora machine-readable | | | Texto resaltado contextualmente | | | Letra pequeña, notas legales | | | Énfasis fuerte (semántico) | | ` | Énfasis (semántico) |

HTML
15 de julio de 2026
contacto@ejemplo.com
Texto resaltado

Listas

  Primero
  Segundo

  Item
  Item

  Término
  Definición

Citas

Texto citado

  Texto de la cita larga.
  — Nombre de la obra

---

5. Tablas

  
    Ventas por trimestre 2026
  
  
    
      Trimestre
      Ventas
      Crecimiento
    
  
  
    
      Q1
      $10,000
      +5%
    
    
      Q2
      $12,000
      +20%
    
  
  
    
      Total
      $22,000
      +12.5%
    
  

scope (obligatorio para accesibilidad)

| Valor | Uso | | ---------- | ---------------------------- | | col | Encabezado de columna | | row | Encabezado de fila | | colgroup | Encabezado de grupo columnas | | rowgroup | Encabezado de grupo filas |

Columnas con colgroup

  
    
    
  
  
    Nombre
    Edad
    Ciudad
  

---

6. Formularios

Estructura Accesible

  
    Información de contacto

    
      Nombre completo
      
      Mínimo 3 caracteres
      
    

    
      Correo electrónico
      
      
    

    
      País
      
        Selecciona un país
        México
        España
        Argentina
      
    

    
      Mensaje
      
    

    
      Preferencias de contacto
      
        Email
      
        Teléfono
    

    Enviar
  

Tipos de Input

| Tipo | Cuándo usarlo | Validación nativa | | ---------------- | --------------------------- | ----------------------------------- | | text | Texto genérico | minlength, maxlength, pattern | | email | Correo electrónico | Formato email | | password | Contraseñas | minlength | | number | Números | min, max, step | | tel | Teléfono | pattern | | url | URLs | Formato URL | | search | Búsquedas | — | | date | Fechas | min, max | | datetime-local | Fecha y hora | min, max | | month | Mes y año | min, max | | week | Semana del año | min, max | | time | Hora | min, max | | file | Subida de archivos | accept | | checkbox | Opciones múltiples | — | | radio | Opción única | — | | range | Valores en rango | min, max, step | | color | Selector de color | — | | hidden | Datos ocultos (no sensible) | — |

Elementos de formulario avanzados

Elige un navegador:

  
  
  
  

  
  
  100

Subida:
70%

Disco:
  
    65%
  

Validación Nativa

Autocomplete

---

7. Multimedia

Imágenes

  
  
  
  

  
  Figura 1: Arquitectura de microservicios

Video

  
  
  
  
  Tu navegador no soporta video. Descargar

  

Audio

  
  
  
    Tu navegador no soporta audio. Descargar
  

---

8. Componentes Interactivos

Dialog

  
    Confirmar acción
    ¿Estás seguro de eliminar este elemento?
    
      Cancelar
      Confirmar
    
  

Abrir modal

  document.getElementById("open-modal")?.addEventListener("click", () => {
    document.getElementById("modal")?.showModal();
  });

Details / Summary

  Más información
  Contenido expandible. Ideal para FAQs, acordeones, etc.

  Sección 1
  
    Sub-sección 1.1
    Contenido anidado
  

---

9. Web Components

Template + Slot

  
    .card {
      border: 1px solid #ddd;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    .card__title {
      font-size: 1.25rem;
      font-weight: 600;
    }
    ::slotted(img) {
      max-width: 100%;
    }
  
  
    Título por defecto
    
      
    
  

  
    Mi título
    Contenido del card
  

---

10. Accesibilidad (WCAG AA)

Reglas Obligatorias

1. Idioma: lang en ``
2. Skip link: Enlace para saltar navegación
3. Headings: Jerarquía correcta (h1 > h2 > h3...)
4. Alt text: alt descriptivo en imágenes
5. Labels: ` asociado a cada `
6. Contraste: Ratio 4.5:1 texto normal, 3:1 texto grande, 3:1 UI
7. Teclado: Todos los elementos interactivos accesibles con Tab

Touch Targets

Los elementos interactivos deben tener un tamaño mínimo de 44x44px para ser accesibles en dispositivos táctiles (WCAG 2.5.5):

button,
a.btn,
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1rem;
}

Skip Link

Saltar al contenido principal

ARIA

Usar ARIA solo cuando HTML semántico no es suficiente.

Enviar

Enviar

Roles

| Rol | Cuándo usarlo | | --------------- | ------------------------------------------ | | banner | ` (global) | | navigation | | | main | | | complementary | | | contentinfo | (global) | | alert | Mensajes de error dinámicos | | dialog | Modales/ventanas de diálogo | | tabpanel | Paneles de tabs | | progressbar | Barras de progreso | | status` | Zonas de contenido dinámico (live regions) |

Estados (aria-\*)

Menú
Tab activo
Error al guardar
Contenido actualizado cada 30s

Propiedades

  

Mínimo 8 caracteres, 1 mayúscula

  Opciones de pago

Focus Management

tabindex

Primero

Segundo

Tercero
Primero
Segundo

Contenido custom con teclado

No hacer

Reglas:

• tabindex="0" — el elemento sigue el orden natural del DOM (para hacer focuseable un div)
• tabindex="-1" — el elemento es focuseable solo por JS, no por Tab
• tabindex="1" (o mayor) — altera el orden natural, evitar siempre
• No usar tabindex en elementos nativos como `, , ` — ya son focuseables

Autofocus y Trap

  Aceptar

  Confirmación

Imágenes (accesibilidad)

  

  

  Buscar
  

---

11. SEO

Meta Tags Esenciales

Microdata (Schema.org)

  Título del artículo
  Descripción breve
  
  
    Autor
  

  
    
      Inicio
      
    
    
      Productos
      
    
  

  Producto
  
    
    299.00
  

Headings

• Una sola `` por página
• Jerarquía estricta: h1 > h2 > h3 (no saltar niveles)
• Los headings describen el contenido, no son solo para estilos

---

12. Performance

Carga de recursos

Scripts

Lazy loading

---

13. Seguridad

Content Security Policy (CSP)

Iframe sandbox

Prevención XSS

{{ user_input }}

{{ escapeHtml(user_input) }}

❌ No hacer
✅ Usar button

CORS

---

14. Favicons y PWA

manifest.json

{
  "name": "Mi App",
  "short_name": "App",
  "description": "Descripción",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker (registro)

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js");
  }

---

15. Canvas y SVG

SVG inline

Canvas (usar solo cuando sea necesario)

  Tu navegador no soporta canvas.

---

16. Buenas Prácticas

Links vs Botones

Ir a página

Guardar
Enviar formulario

Guardar

Ir a página

Links

Ver todos los productos

Click aquí

Sitio externo

(123) 456-7890

info@ejemplo.com

Descargar manual (PDF, 2.4MB)

Carga de recursos (Buenas Practicas)

i18n

  
  El término callback se refiere a...

---

17. Prohibiciones

• ❌ NO usar `` para todo (usar etiquetas semánticas)
• ❌ No usar ` para separar párrafos (usar `)
• ❌ No usar ` / (usar / `)
• ❌ No usar tablas para layout
• ❌ No inline styles (style="...") - usar CSS classes
• ❌ No omitir alt en imágenes (excepto decorativas con alt="")
• ❌ No onclick/onchange inline en HTML
• ❌ No dejar lang sin definir
• ❌ No saltar niveles de heading (h1 → h3)
• ❌ No usar javascript:void(0) en links
• ❌ No usar `, , , ` (obsoletos)
• ❌ No duplicar `` en una misma página
• ❌ No poner texto en imágenes sin alt equivalente
• ❌ No usar placeholder como único label (falta accesibilidad)
• ❌ No enviar contraseñas por GET en formularios

---

18. Referencias

> Nota: Para CSS, ver [CSS](../css/SKILL.md) > Nota: Para JavaScript, ver [JavaScript](../javascript/SKILL.md)

---

Última actualización: 2026-07

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: 14BryanEspinoza
• Source: 14BryanEspinoza/agent-stack
• License: MIT

Install and usage instructions live in the source repository linked above.