HTML Önizleme

HTML kodu yazın ve sonucu gerçek zamanlı olarak görün. HTML yapısını ve stilini test etmek için mükemmeldir.

HTML Önizleme

HTML, CSS, JavaScript kodu yazın ve gerçek zamanlı olarak önizleyin

Kod Düzenleyici

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

Canlı Önizleme

Özellikler

Canlı Önizleme

Yazarken değişikliklerinizi anında görün

Duyarlı Test

Kodunuzu farklı ekran boyutlarında test edin

İndir ve Paylaş

HTML dosyanızı indirin veya kodu kopyalayın

Sözdizimi Desteği

Tam HTML, CSS ve JavaScript desteği

Güvenli Çalıştırma

Kod korumalı bir iframe içinde çalışır

Sıfırla ve Şablonlar

Baştan başlayın veya varsayılan şablonları kullanın