پیش‌نمایش HTML

کد HTML بنویسید و نتیجه را در زمان واقعی ببینید. عالی برای آزمایش ساختار و استایل HTML.

پیش‌نمایش HTML

کد HTML، CSS، JavaScript بنویسید و آن را در زمان واقعی پیش‌نمایش کنید

ویرایشگر کد

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

پیش‌نمایش زنده

ویژگی‌ها

پیش‌نمایش زنده

تغییرات خود را فوراً هنگام تایپ ببینید

تست واکنش‌گرا

کد خود را در اندازه‌های مختلف صفحه آزمایش کنید

دانلود و اشتراک‌گذاری

فایل HTML خود را دانلود کنید یا کد را کپی کنید

پشتیبانی نحو

پشتیبانی کامل از HTML، CSS و JavaScript

اجرای ایمن

کد در یک iframe ایزوله اجرا می‌شود

بازنشانی و قالب‌ها

شروع تازه یا استفاده از قالب‌های پیش‌فرض