# Html

> Reglas de HTML5 semántico - accesibilidad, SEO, formularios, multimedia, Web Components, performance, seguridad

- **Type:** Skill
- **Install:** `agentstack add skill-14bryanespinoza-agent-stack-html`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [14BryanEspinoza](https://agentstack.voostack.com/s/14bryanespinoza)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [14BryanEspinoza](https://github.com/14BryanEspinoza)
- **Source:** https://github.com/14BryanEspinoza/agent-stack/tree/agent-stack/skills/html

## Install

```sh
agentstack add skill-14bryanespinoza-agent-stack-html
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

```html

  
    
    
    
    Título de la página
    
  
  
    
      
        
          Inicio
          Sobre nosotros
        
      
    

    
      
        Título principal
        Contenido del artículo
      
    

    
      © 2026
    
  

```

### Doctype y Lang

```html

  
    
      
      
        
        
      
    
  

```

---

## 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

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

### Listas

```html

  Primero
  Segundo

  Item
  Item

  Término
  Definición

```

### Citas

```html

Texto citado

  Texto de la cita larga.
  — Nombre de la obra

```

---

## 5. Tablas

```html

  
    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

```html

  
    
    
  
  
    Nombre
    Edad
    Ciudad
  

```

---

## 6. Formularios

### Estructura Accesible

```html

  
    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

```html

Elige un navegador:

  
  
  
  

  
  
  100

Subida:
70%

Disco:
  
    65%
  
```

### Validación Nativa

```html

```

### Autocomplete

```html

```

---

## 7. Multimedia

### Imágenes

```html

  
  
  
  

  
  Figura 1: Arquitectura de microservicios

```

### Video

```html

  
  
  
  
  Tu navegador no soporta video. Descargar

  

```

### Audio

```html

  
  
  
    Tu navegador no soporta audio. Descargar
  

```

---

## 8. Componentes Interactivos

### Dialog

```html

  
    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

```html

  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

```html

  
    .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):

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

### Skip Link

```html
Saltar al contenido principal
```

### ARIA

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

```html

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-\*)

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

#### Propiedades

```html

  

Mínimo 8 caracteres, 1 mayúscula

  Opciones de pago

```

### Focus Management

#### tabindex

```html

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

```html

  Aceptar

  Confirmación

```

### Imágenes (accesibilidad)

```html

  

  

  Buscar
  

```

---

## 11. SEO

### Meta Tags Esenciales

```html

```

### Microdata (Schema.org)

```html

  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

```html

```

### Scripts

```html

```

### Lazy loading

```html

```

---

## 13. Seguridad

### Content Security Policy (CSP)

```html

```

### Iframe sandbox

```html

```

### Prevención XSS

```html

{{ user_input }}

{{ escapeHtml(user_input) }}

❌ No hacer
✅ Usar button
```

### CORS

```html

```

---

## 14. Favicons y PWA

```html

```

### manifest.json

```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)

```html

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

```

---

## 15. Canvas y SVG

### SVG inline

```html

  
  
  

  
    
    
  

  

```

### Canvas (usar solo cuando sea necesario)

```html

  Tu navegador no soporta canvas.

```

---

## 16. Buenas Prácticas

### Links vs Botones

```html

Ir a página

Guardar
Enviar formulario

Guardar

Ir a página
```

### Links

```html

Ver todos los productos

Click aquí

Sitio externo

(123) 456-7890

info@ejemplo.com

Descargar manual (PDF, 2.4MB)
```

### Carga de recursos (Buenas Practicas)

```html

```

### i18n

```html

  
  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](https://github.com/14BryanEspinoza)
- **Source:** [14BryanEspinoza/agent-stack](https://github.com/14BryanEspinoza/agent-stack)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-14bryanespinoza-agent-stack-html
- Seller: https://agentstack.voostack.com/s/14bryanespinoza
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.