HTML
Explica qué es HTML, cómo estructura un documento web y por qué su semántica importa para navegadores, buscadores, accesibilidad y JavaScript.
HTML describe el de un documento web.
<article>
<h1>Guía de HTML</h1>
<p>Aprende a estructurar contenido para la web.</p>
</article>HTML → estructura y significado
CSS → presentación
JavaScript → comportamiento y lógicaLas capas colaboran, pero una no reemplaza a las otras.
<button type="button">Guardar</button>HTML ya aporta semántica, foco, activación mediante teclado y participación en formularios. CSS puede cambiar su aspecto y JavaScript responder a la acción.
HTML sirve tanto para documentos como para interfaces.
<article>
<h1>Cómo funciona el navegador</h1>
<p>...</p>
</article><form>
<label for="query">Buscar productos</label>
<input id="query" name="query" type="search">
<button>Buscar</button>
</form>Incluso una aplicación sigue siendo un documento con elementos, relaciones y estados nativos.
HTML no expresa algoritmos generales. Declara recursos y relaciones:
<img
src="product.webp"
alt="Teclado mecánico negro"
loading="lazy"
>El navegador procesa esa declaración según el estándar y el entorno.
<h2>Productos recientes</h2>h2 no significa “texto grande”. Significa un encabezado de nivel dos.
<strong>Pago pendiente</strong>strong comunica importancia, no solamente negrilla.
La apariencia puede cambiar con CSS; el significado permanece.
<main>
<h1>Portfolio</h1>
<p>Proyectos seleccionados.</p>
</main>main
├─ h1
│ └─ "Portfolio"
└─ p
└─ "Proyectos seleccionados."JavaScript y tecnologías de asistencia trabajan sobre esa estructura DOM, no directamente sobre el texto del archivo.
HTML se mantiene como un Living Standard. No existe una edición final “HTML6” que reemplace periódicamente todo el lenguaje.
El estándar evoluciona mientras navegadores, pruebas y documentación se actualizan.
Para aprender:
<div onclick="submitForm()">Enviar</div>Puede renderizarse, pero no tiene el contrato completo de un botón.
<button type="submit">Enviar</button>La calidad incluye sintaxis, semántica, accesibilidad, seguridad, resiliencia y rendimiento.
El HTML recibido no siempre coincide con el árbol final.
<table>
<tr><td>Producto</td></tr>
</table>El navegador puede insertar un tbody implícito.
source markup → texto enviado
DOM tree → estructura construidaEl servidor suele enviar:
Content-Type: text/html; charset=utf-8Eso indica qué parser y codificación deben aplicarse. Servir el mismo texto como XML cambia las reglas.
<a href="/products?page=2">Siguiente página</a>JavaScript puede mejorar la navegación, pero el enlace conserva una ruta real si el script falla.
<section aria-labelledby="contact-title">
<h2 id="contact-title">¿Tienes un proyecto en mente?</h2>
<p>Cuéntame qué necesitas resolver.</p>
<a href="mailto:hello@example.com">Enviar correo</a>
</section>La estructura sigue siendo comprensible sin estilos ni scripts.
div para cualquier control.¿Por qué un button suele ser mejor que un div con click?
Porque ya incluye semántica, foco, activación por teclado, rol accesible y comportamiento de formulario.
Documento HTML mínimo construye la base del documento.