How to Use Claude to Create and Edit HTML

Claude can write, edit, and explain HTML. You describe the task, Claude produces the code, and you preview and check it before using it. For small tasks — a contact form, a landing page section, a table, an email template — this workflow is fast. Tools like fenbs keep the requirements, revision decisions, and any unfinished fixes in one place so work does not get lost between sessions.

HTML that looks correct in one browser or email client can break in another. Previewing the output, checking it on a real device, and testing accessibility are steps you need to run yourself. Claude produces the code; you verify it works.

Briefing a small HTML task

Give Claude the context it needs: what the HTML is for, where it will be used, and any constraints. A contact form for a personal site has different requirements than an HTML email that must render in Outlook. State those constraints in the first message rather than discovering them after the first draft.

Write a simple HTML contact form with fields for Name, Email, and Message. Add a Submit button. Style it with inline CSS only (no external stylesheet). It will be embedded in an existing page with a white background. Include basic accessible labels for each field.

If you need semantic HTML5, say so. If you need ARIA attributes for screen reader support, ask for them. If the output will be pasted into a CMS that strips certain tags, mention that. The more Claude knows about the environment, the more useful the first draft.

Previewing the output

Copy the HTML Claude produces and save it as an .html file on your desktop. Open it in a browser. This takes thirty seconds and tells you immediately whether the structure and layout are correct. For HTML email, paste it into Litmus, Email on Acid, or a similar testing tool to check rendering across clients.

Claude.ai can render HTML artifacts in some interfaces, which lets you preview directly in the conversation. Even if the preview looks right, test the actual file in the environment where it will be used. A preview in Claude.ai is not a test of how it renders in your CMS, email client, or browser target.

Checking accessibility

Accessible HTML follows a few straightforward rules that Claude may or may not apply by default. Ask Claude explicitly to include a <label> for each form field, use a logical heading hierarchy (one <h1>, then <h2>, and so on), add alt text to any <img> tag, and ensure interactive elements are reachable by keyboard.

After getting the code, paste it into an automated accessibility checker such as axe DevTools (a free browser extension) or the WAVE tool. Fix the errors it reports before using the HTML in production. Automated tools catch the most common issues; manual keyboard testing catches the rest.

Editing existing HTML

Paste the HTML you want to edit into Claude, describe the change, and ask for the revised version. For small changes — updating text, changing a class name, adding a new row to a table — this is faster than editing manually when the structure is complex. For larger changes, describe the goal and ask Claude to explain what it changed and why, so you can review the diff.

Keep the original HTML until you have tested the revised version. If the revision breaks something, you need the previous working version to compare against. Ask Claude what it changed if the diff is not obvious from reading the code.

Testing behavior

Test the behavior you expect, not just the appearance. For a form, submit it with valid data, submit it with missing required fields, and check that validation messages appear correctly. For a navigation component, tab through it with a keyboard. For a table, resize the browser window to check that it does not overflow.

If a form submits data, you are responsible for the server-side validation and security. Claude can help you understand the HTML form attributes and how a browser handles them, but it cannot implement or test the server that receives the form data.

Common HTML tasks Claude handles well

• Simple forms with labels, input types, and validation attributes.
• Responsive HTML email templates with inline CSS.
• Data tables with accessible headers and summary text.
• Navigation menus with keyboard-accessible patterns.
• Landing page sections with semantic heading structure.
• Fixing broken markup and explaining what went wrong.

How to do this with fenbs

1. Create a free account and add a project for this HTML work.
2. Paste the task requirements — the environment, any constraints, and the intended use — into a context note.
3. Record decisions about the approved version or structure — such as which form layout was accepted — as Decisions and rules.
4. Track open fixes — accessibility issues found in testing, browser-specific bugs — as tasks on the board.
5. Before returning to the work, review the context and open tasks so the next session starts from the current state.

When to use Claude versus a dedicated tool

Claude is a good fit for one-off HTML tasks, editing a specific component, or understanding why a markup pattern works the way it does. For a full site build, ongoing front-end development, or complex JavaScript-heavy interfaces, a proper editor with a linter and browser dev tools will catch errors faster than Claude can. See what is Claude Code for how Claude Code handles larger coding projects in a development environment.