93 lines · 2.6 KB

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sample Page</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      color: #1a1a2e;
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem 1.5rem;
      background: #fafafa;
    }
    h1 { font-size: 2rem; margin-bottom: 0.5rem; }
    h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; color: #16213e; }
    p { margin-bottom: 1rem; color: #333; }
    ul { padding-left: 1.5rem; margin-bottom: 1rem; }
    li { margin-bottom: 0.25rem; }
    a { color: #0f3460; }
    code {
      background: #e8e8e8;
      padding: 0.15em 0.4em;
      border-radius: 4px;
      font-size: 0.9em;
    }
    .card {
      background: white;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 1.25rem;
      margin-bottom: 1rem;
    }
    .badge {
      display: inline-block;
      background: #0f3460;
      color: white;
      padding: 0.2em 0.6em;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    form input, form textarea {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 0.75rem;
      font-family: inherit;
    }
    form button {
      background: #0f3460;
      color: white;
      border: none;
      padding: 0.5rem 1.25rem;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
    }
    form button:hover { background: #16213e; }
  </style>
</head>
<body>
  <span class="badge">Sample</span>
  <h1>Hello, World!</h1>
  <p>This is a sample HTML page to get you started. Edit the code on the left and see the preview update in real time.</p>

<h2>Features</h2>
  <ul>
    <li>Inline <code>&lt;style&gt;</code> blocks</li>
    <li>Lists, links, and semantic elements</li>
    <li>A sample form with inputs</li>
    <li>Responsive layout with <code>max-width</code></li>
  </ul>

<div class="card">
    <h2>Contact Form</h2>
    <form onsubmit="event.preventDefault(); alert('Submitted!')">
      <input type="text" placeholder="Your name" />
      <input type="email" placeholder="Email address" />
      <textarea rows="3" placeholder="Message"></textarea>
      <button type="submit">Send Message</button>
    </form>
  </div>

<p>Built with <a href="https://webstatus.in/html" target="_blank">WebStatus.in HTML Editor</a>.</p>
</body>
</html>

Live Preview

Related Tools

JSON Editor

Format, validate, and explore JSON with a code editor and tree view.

Text Diff Checker

Compare two versions of HTML side by side to see exactly what changed.

Base64 Encoder

Encode images or text in Base64 for embedding directly in HTML data URIs.

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a page using elements represented by tags — such as <h1> for headings, <p> for paragraphs, and <a> for links. Browsers read HTML and render it as the visual web pages you interact with every day.

HTML works together with CSS (for styling and layout) and JavaScript (for interactivity). A complete HTML document includes a <head> section for metadata and a <body> section for visible content.

How to Use This HTML Editor

Type or paste HTML in the code editor. The live preview updates automatically as you type.
Click Format to beautify your HTML with proper indentation.
Import an .html file from your computer, or Export the editor contents as a file.
Use Preview in New Tab to see the full-page rendering in a separate browser tab.
On mobile, use the Code / Preview tabs to switch between the editor and the rendered output.

Common Use Cases

Prototyping: Quickly sketch out a page layout or component without setting up a full dev environment.
Email templates: Write and preview HTML email templates with inline CSS before sending.
Learning: Experiment with HTML tags, CSS properties, and JavaScript events in a safe sandbox.
Debugging: Paste HTML from an API response or CMS output to inspect how it renders.
Sharing: Use the Share button to create a link that includes your HTML, so others can view and edit it.

Security & Privacy

All processing happens entirely in your browser — your HTML is never sent to any server. The live preview uses a sandboxed iframe with restricted permissions, preventing the preview from navigating the parent page, submitting forms to external servers, or accessing cookies.

JavaScript in the preview runs in isolation. The sandbox allows allow-scripts so interactive elements work, but blocks all other capabilities like allow-same-origin, allow-forms, and allow-top-navigation.