Vista Previa HTML

Escribe código HTML y ve el resultado en tiempo real. Perfecto para probar estructura HTML y estilos.

Vista Previa HTML

Escribe código HTML, CSS, JavaScript y previsualizalo en tiempo real

Editor de Código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Semantic Layout</title>
</head>
<body>
    <header>
        <nav aria-label="Main navigation">
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<main>
        <article>
            <header>
                <h1>Welcome to HTML5</h1>
                <p><time datetime="2024-01-15">January 15, 2024</time></p>
            </header>

<section id="intro">
                <h2>Introduction</h2>
                <p>HTML5 introduces semantic elements that clearly describe their meaning.</p>
                <figure>
                    <img src="https://via.placeholder.com/300x150" alt="Placeholder image" loading="lazy">
                    <figcaption>A sample figure with caption</figcaption>
                </figure>
            </section>

<section id="features">
                <h2>Key Features</h2>
                <details>
                    <summary>Click to expand</summary>
                    <p>HTML5 includes new semantic elements, form controls, and multimedia support.</p>
                </details>
                <meter value="75" min="0" max="100">75%</meter>
                <progress value="60" max="100">60%</progress>
            </section>

<aside>
                <h3>Related Links</h3>
                <ul>
                    <li><a href="#">MDN Web Docs</a></li>
                    <li><a href="#">W3C Standards</a></li>
                </ul>
            </aside>
        </article>
    </main>

<footer>
        <address>
            Contact: <a href="mailto:hello@example.com">hello@example.com</a>
        </address>
        <small>&copy; 2024 HTML5 Demo. All rights reserved.</small>
    </footer>

<dialog id="modal">
        <h2>Modal Dialog</h2>
        <p>This is a native HTML5 dialog element.</p>
        <button onclick="document.getElementById('modal').close()">Close</button>
    </dialog>
    <button onclick="document.getElementById('modal').showModal()">Open Dialog</button>
</body>
</html>

Vista Previa en Vivo

Características

Vista Previa en Vivo

Ve tus cambios instantáneamente mientras escribes

Pruebas Responsivas

Prueba tu código en diferentes tamaños de pantalla

Descargar y Compartir

Descarga tu archivo HTML o copia el código

Soporte de Sintaxis

Soporte completo para HTML, CSS y JavaScript

Ejecución Segura

El código se ejecuta en un iframe aislado

Restablecer y Plantillas

Comienza de nuevo o usa plantillas predeterminadas