HTML ดูตัวอย่าง

Write HTML โค้ด and see the ผลลัพธ์ in real-เวลา. Perfect for testing HTML structure and styling.

HTML ดูตัวอย่าง

Write HTML, CSS, JavaScript โค้ด and ดูตัวอย่าง it in real-เวลา

ตัวแก้ไขโค้ด

<!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 ที่แยกต่างหาก

รีเซ็ตและเทมเพลต

เริ่มต้นใหม่หรือใช้เทมเพลตเริ่มต้น