HTML semántico y estructura de una página

Elementos y atributos

Un elemento suele tener una etiqueta de apertura, contenido y una etiqueta de cierre. Los atributos añaden información: href indica el destino de un enlace y lang declara el idioma. Algunos elementos, como input, son vacíos y no llevan etiqueta de cierre.

Un documento completo

head contiene metadatos y el título de la pestaña; body contiene la página visible. Guarda este ejemplo como index.html y ábrelo en un navegador. La declaración viewport ayuda a que la página use el ancho del dispositivo en móviles.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi biblioteca</title>
</head>
<body>
  <main>
    <h1>Biblioteca de programación</h1>
    <p>Conceptos y ejemplos para aprender.</p>
    <a href="https://developer.mozilla.org/es/">Consultar MDN</a>
  </main>
</body>
</html>

Escoger etiquetas por su función

main identifica el contenido principal, nav agrupa navegación y article sirve para una composición independiente. Los encabezados h1 a h6 organizan niveles: elige el nivel por la jerarquía del contenido y ajusta el tamaño con CSS. Un div es un contenedor genérico cuando no necesitas un significado específico.

Enlaces, botones y formularios

Usa un enlace para navegar y un botón para ejecutar una acción. Los controles nativos ya tienen comportamiento de teclado. En formularios, asocia cada campo con un label mediante for e id; un placeholder no sustituye a una etiqueta visible.

<label for="nombre">Nombre</label>
<input id="nombre" name="nombre" type="text">
<button type="button">Mostrar saludo</button>

Revisión práctica

1. Recorre enlaces y controles con Tab y comprueba que el foco sea visible.
2. Lee solo los encabezados: deben describir el orden del contenido.
3. Comprueba que el título de la pestaña y el idioma correspondan a tu documento.