Markup first / preview second

Create an HTML File Online

Create an index.html file in HCODX, add a complete HTML document, preview it in your browser and save the source for your website.

Create an HTML fileSee the document example
Ace source editorBrowser-rendered previewNo account required
The job

Start with an index.html document

An HTML editor changes source text; the preview shows how a browser interprets that text. The important part is the relationship between the two.

HTML is not a drawing format. A heading identifies the topic, a link names a destination, a label names a form control, and a main landmark identifies the page’s central content. The browser supplies a default presentation, while CSS can change its appearance later. Starting with useful elements makes the page more resilient when styles fail or a screen reader reads it aloud.

Open the editor and create or select an HTML file. Write a small, complete document first; then add CSS and JavaScript only when the structure is clear. Preview catches obvious layout surprises, but it does not prove that the markup conforms to every rule of the HTML standard.

Source

Edit tags, attributes and text in Ace with syntax highlighting and completion.

Result

See the browser render the current document in a separate preview frame.

Files

Keep markup, styles and scripts in separate project files when a page grows.

Create your first file

Create, name and preview your HTML file

A complete document gives the browser the metadata and structure it needs.

Create a project file Open HCODX and use the project file controls to create a new file named index.html. The .html extension identifies the file as HTML source.
Add the document structure Use the example below with a doctype, language, charset, page title and body. Replace the sample heading with your own.
Preview the document Select the HTML file and open preview. Check that the visible heading matches the text you entered.
Keep a file copy Use the editor download or export controls when you need the source outside the current browser. A local browser copy is not a cross-device backup.
Copy, run, inspect

One page, one clear outline

Paste this small document into an HTML file. It uses landmarks for page regions and a real link rather than a clickable div.

The title in the head is for the browser tab and search result; the h1 is the visible topic. They can be similar without being duplicates of every other page. The navigation names the destination, and main contains the content unique to this page. Change the link target to a real route before publishing.

Try removing the stylesheet: the heading, navigation and article still read in a useful order. That is a practical test of whether the HTML carries meaning rather than depending entirely on its visual treatment.

A complete HTML document with one main landmark and a heading hierarchy.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Field notes | Mira</title>
</head>
<body>
  <header>
    <a href="/">Mira</a>
    <nav aria-label="Primary"><a href="/notes/">Notes</a></nav>
  </header>
  <main>
    <article>
      <h1>Field notes</h1>
      <p>Short observations from the garden.</p>
      <h2>What changed this week</h2>
      <p>The first tomatoes ripened after three warm days.</p>
    </article>
  </main>
</body>
</html>
Before styling

Review the markup in four passes

A visual preview is one check, not the whole quality test.

01

Read the headings alone

Keep one visible h1 for the page topic and use h2 headings for major sections. Do not pick heading levels merely to get a particular font size.

02

Read links out of context

“View project files” tells a reader more than “click here”. Check that href values point to real destinations.

03

Inspect images and forms

Give informative images meaningful alt text, decorative images empty alt text, and inputs a programmatic label.

04

Validate separately

A browser repairs some mistakes silently. Use a standards validator for conformance after the page looks right; the preview alone cannot replace one.

A second document pattern

Make a longer page navigable by its headings

A page outline becomes more useful when a reader can jump to a named section and understand where the link lands.

The in-page links below point to IDs on actual headings. The nav has its own accessible name because a site might also have a global navigation bar. When the page grows, this small table of contents lets keyboard users and readers of assistive technology move to a specific part without scanning every paragraph.

Keep the link text descriptive and each id unique. If an anchor stops working after you rename a heading, check the href and id together. Do not use a heading level merely for its visual size; style the semantic heading with CSS instead.

Each fragment link names a real heading ID in the same document.
<nav aria-label="On this article">
  <a href="#conditions">Growing conditions</a>
  <a href="#harvest">Harvest notes</a>
</nav>
<main>
  <article>
    <h1>Field notes</h1>
    <h2 id="conditions">Growing conditions</h2>
    <p>Three warm days and regular watering.</p>
    <h2 id="harvest">Harvest notes</h2>
    <p>The first tomatoes ripened this week.</p>
  </article>
</main>
Know the boundary

Editing, previewing and validating are different tasks

This page is about authoring HTML. It does not present the preview as a standards test.

Compare

Editor

Changes the source document. Ace helps you navigate and type, but syntax coloring is not a proof of correctness.

Compare

Preview

Shows the browser’s repaired DOM and pixels. It reveals visible problems but may conceal invalid nesting.

Compare

Validator

Checks a complete document against the HTML specification. Use the markup checklist here as preparation, then run a dedicated validator.

Practical answers

HTML editing questions

A few decisions that matter when moving from a snippet to a document.

No. HTML describes the content and its relationships. A page with a doctype, title and useful body markup can be valid and usable before any CSS is added.

No. Browsers repair many markup errors. Inspect the source and use a dedicated HTML validator when conformance matters.

A heading creates structure for navigation and assistive technology. Bold styling changes appearance only. CSS can style the heading after you choose the right element.

A document should have one main content region, excluding repeated site navigation and footers. Give that region a main landmark so readers can skip directly to it.

No. A section represents a thematic group that usually has its own heading. A simple article or series of paragraphs does not improve by wrapping each paragraph in an extra section.

Use an h1 in the body for the visible topic and a title element in the head for the browser tab and search result. They serve different surfaces and should both describe this page specifically.
Related Tools

Explore the Full HCODX Suite

HTML and CSS Editor

Edit HTML and CSS together in HCODX. Preview styling changes, test selectors and build layouts with a browser-based code editor.

HTML Validator

Check HTML errors with the HCODX editor validator. Learn how to run Validate HTML, read diagnostics and fix nesting, duplicate IDs and form labels.

Multi-File HTML Editor

Build a multi-file HTML project in HCODX. Organize pages, CSS, JavaScript and images, check relative paths and export the complete folder structure.

HTML5 Editor

Use the HCODX HTML5 editor to test semantic markup, native form controls and browser features. Preview a working example and inspect the source.

HTML File Editor

Open an existing HTML file in HCODX, edit its source, check the result in preview and download your changes with related project files.

CSS Media Query Test

Test CSS media queries in HCODX with a responsive layout example. Resize the preview, find overflow and check exactly when each breakpoint applies.

Make the first document real

Write a small page, preview it, then improve its structure before polishing the styles.

Open HCODX editor

Instant HTML Runner & Viewer with Live Preview

Need to run a short HTML, CSS and JavaScript snippet? The HTML Runner Online has a focused editing surface with live output.

Open HTML Runner Online