एचटीएमएल पूर्वावलोकन

एचटीएमएल कोड लिखें और वास्तविक समय में परिणाम देखें। एचटीएमएल संरचना और स्टाइलिंग का परीक्षण करने के लिए बिल्कुल सही।

एचटीएमएल पूर्वावलोकन

एचटीएमएल, सीएसएस, जावास्क्रिप्ट कोड लिखें और वास्तविक समय में इसका पूर्वावलोकन करें

कोड संपादक

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

लाइव पूर्वावलोकन

विशेषताएँ

लाइव पूर्वावलोकन

टाइप करते ही अपने परिवर्तनों को तुरंत देखें

उत्तरदायी परीक्षण

विभिन्न स्क्रीन आकारों पर अपने कोड का परीक्षण करें

डाउनलोड और साझा करें

अपनी एचटीएमएल फ़ाइल डाउनलोड करें या कोड कॉपी करें

सिंटैक्स समर्थन

पूर्ण एचटीएमएल, सीएसएस और जावास्क्रिप्ट समर्थन

सुरक्षित निष्पादन

कोड एक सैंडबॉक्स किए गए आईफ्रेम में चलता है

रीसेट और टेम्पलेट

नए सिरे से शुरू करें या डिफ़ॉल्ट टेम्पलेट का उपयोग करें