HTML Online Compiler

Create and preview HTML pages with our online HTML compiler. Perfect for web development, learning HTML/CSS/JavaScript, and rapid prototyping.

html Online Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Online Compiler</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #333;
            text-align: center;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }
        
        .highlight {
            background-color: #fff3cd;
            padding: 15px;
            border-left: 4px solid #ffc107;
            margin: 20px 0;
        }
        
        .button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .button:hover {
            background-color: #0056b3;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        .card h3 {
            margin-top: 0;
            color: #495057;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            border: 1px solid #dee2e6;
            padding: 12px;
            text-align: left;
        }
        
        th {
            background-color: #e9ecef;
            font-weight: bold;
        }
        
        .form-group {
            margin: 15px 0;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 14px;
        }
        
        textarea {
            height: 100px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌐 HTML Online Compiler</h1>
        
        <div class="highlight">
            <strong>Welcome!</strong> This is a live HTML preview. You can see your HTML, CSS, and JavaScript code rendered in real-time.
        </div>
        
        <h2>HTML Features Showcase</h2>
        
        <div class="grid">
            <div class="card">
                <h3>📝 Text Elements</h3>
                <p>This is a <strong>paragraph</strong> with <em>emphasized text</em> and a <a href="#" onclick="alert('Link clicked!')">clickable link</a>.</p>
                <blockquote>
                    "HTML is the standard markup language for creating web pages."
                </blockquote>
            </div>
            
            <div class="card">
                <h3>📋 Lists</h3>
                <ul>
                    <li>HTML Structure</li>
                    <li>CSS Styling</li>
                    <li>JavaScript Interactivity</li>
                </ul>
                <ol>
                    <li>Plan your layout</li>
                    <li>Write semantic HTML</li>
                    <li>Add CSS styles</li>
                </ol>
            </div>
        </div>
        
        <h3>📊 Data Table</h3>
        <table>
            <thead>
                <tr>
                    <th>Technology</th>
                    <th>Purpose</th>
                    <th>Difficulty</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>HTML</td>
                    <td>Structure</td>
                    <td>Beginner</td>
                </tr>
                <tr>
                    <td>CSS</td>
                    <td>Styling</td>
                    <td>Intermediate</td>
                </tr>
                <tr>
                    <td>JavaScript</td>
                    <td>Interactivity</td>
                    <td>Advanced</td>
                </tr>
            </tbody>
        </table>
        
        <h3>📝 Interactive Form</h3>
        <form onsubmit="handleSubmit(event)">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" placeholder="Enter your name" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            
            <div class="form-group">
                <label for="language">Favorite Language:</label>
                <select id="language" name="language">
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">JavaScript</option>
                    <option value="python">Python</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="message">Message:</label>
                <textarea id="message" name="message" placeholder="Tell us about your coding journey..."></textarea>
            </div>
            
            <button type="submit" class="button">Submit Form</button>
        </form>
        
        <div style="margin-top: 30px; text-align: center;">
            <button class="button" onclick="changeTheme()">🎨 Toggle Theme</button>
            <button class="button" onclick="showTime()" style="margin-left: 10px;">⏰ Show Time</button>
        </div>
        
        <div id="output" style="margin-top: 20px; padding: 15px; background: #e9ecef; border-radius: 5px; display: none;">
            <h4>Output:</h4>
            <p id="outputText"></p>
        </div>
    </div>
    
    <script>
        function handleSubmit(event) {
            event.preventDefault();
            const formData = new FormData(event.target);
            const data = Object.fromEntries(formData);
            
            document.getElementById('outputText').innerHTML = 
                `<strong>Form Submitted!</strong><br>
                Name: ${data.name}<br>
                Email: ${data.email}<br>
                Favorite Language: ${data.language}<br>
                Message: ${data.message}`;
            
            document.getElementById('output').style.display = 'block';
        }
        
        function changeTheme() {
            const body = document.body;
            const container = document.querySelector('.container');
            
            if (body.style.backgroundColor === 'rgb(33, 37, 41)') {
                // Light theme
                body.style.backgroundColor = '#f5f5f5';
                body.style.color = '#333';
                container.style.backgroundColor = 'white';
            } else {
                // Dark theme
                body.style.backgroundColor = '#212529';
                body.style.color = '#fff';
                container.style.backgroundColor = '#343a40';
            }
        }
        
        function showTime() {
            const now = new Date();
            const timeString = now.toLocaleString();
            
            document.getElementById('outputText').innerHTML = 
                `<strong>Current Time:</strong><br>${timeString}`;
            document.getElementById('output').style.display = 'block';
        }
        
        // Add some interactivity on page load
        document.addEventListener('DOMContentLoaded', function() {
            console.log('HTML page loaded successfully!');
            
            // Add click animation to buttons
            const buttons = document.querySelectorAll('.button');
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 100);
                });
            });
        });
    </script>
</body>
</html>

Output

Click "Run" to execute your code and see the output here...

HTML Compiler Features

HTML5 with modern features
CSS3 styling support
JavaScript interactivity
Live preview and rendering
Responsive design testing

About HTML Development

HTML (HyperText Markup Language) is the standard markup language for creating web pages. Combined with CSS for styling and JavaScript for interactivity, it forms the foundation of web development.

Modern HTML5 provides semantic elements, multimedia support, and APIs that enable rich, interactive web applications. It's the starting point for anyone learning web development.

Use our HTML online compiler to create web pages, test responsive designs, or learn web development fundamentals with instant visual feedback.