HTML

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mi página</title>
    <link rel="stylesheet" href="/styles.css" />
    <script type="module" src="/main.js"></script>
  </head>
  <body>
    <main>
      <h1>Hola mundo</h1>
    </main>
  </body>
</html>

<meta name="description" content="Resumen de la página en ~155 caracteres." />
<meta name="theme-color" content="#0f172a" />
<link rel="canonical" href="https://example.com/guia" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<!-- Open Graph (previews in social networks and chats) -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Título para compartir" />
<meta property="og:description" content="Descripción breve." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/guia" />

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Sitio externo</a>
<a href="mailto:hola@example.com">Escríbenos</a>
<a href="/docs/guia.pdf" download>Descargar PDF</a>

<img src="foto-800.jpg" alt="Equipo revisando un tablero" width="800" height="600"
     loading="lazy" decoding="async"
     srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw" />

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Vista del producto" width="1200" height="600" />
</picture>

<form action="/signup" method="post">
  <fieldset>
    <legend>Datos de contacto</legend>
    <label for="email">Correo</label>
    <input id="email" name="email" type="email" autocomplete="email" required />
    <label>
      <input type="checkbox" name="terms" required /> Acepto los términos
    </label>
  </fieldset>
  <button type="submit">Registrarme</button>
</form>

<table>
  <caption>Ventas por trimestre (MXN)</caption>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col">Ventas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>120,000</td>
    </tr>
  </tbody>
</table>

<details>
  <summary>¿Cómo cambio mi contraseña?</summary>
  <p>Ve a Ajustes y luego a Seguridad.</p>
</details>

<dialog id="confirm">
  <form method="dialog">
    <p>¿Eliminar el archivo?</p>
    <button value="cancel">Cancelar</button>
    <button value="ok">Eliminar</button>
  </form>
</dialog>
<button onclick="document.getElementById('confirm').showModal()">Eliminar</button>

<button popovertarget="menu">Opciones</button>
<div id="menu" popover>Contenido flotante que se cierra con Esc o clic fuera</div>