QUICK ANSWER
What you should remember
- Reduce the answer to one self-contained HTML file before debugging multiple files.
- Fix the first console or parser error before chasing later symptoms.
- Replace computer-only file paths and missing relative assets with valid browser URLs.
- Ask AI for a minimal correction and a change explanation instead of a full rewrite.
Start with evidence, not another full rewrite
When generated HTML fails, repeatedly asking for a brand-new page often swaps one problem for another. Preserve the broken version and narrow the failure down.
Open the source beside a live preview, then check Problems and Console. Record the first error, its line number and the action that triggers it. The earliest error often causes many later messages, so fix one cause at a time.
For a multi-file answer, temporarily place the CSS in a style element and the JavaScript in a script element inside one HTML document. This removes incorrect filenames and folder paths from the investigation. Once the page works, split the files again deliberately.
- Reproduce it
Write down what you expected, what happened and the smallest action needed to see the failure.
- Preserve it
Save the original generated answer before editing or asking for a correction.
- Read the first error
Start at the first parser or console error, not the longest or most dramatic message.
- Change one thing
Make a small correction, rerun the same action and compare the outcome.
The 12 fixes, in a useful order
Work from document structure and file loading toward JavaScript behavior and responsive styling.
- 1. Add a complete document shell
Use doctype, html, head, meta viewport, title and body. Fragments can work, but a complete shell removes ambiguity.
- 2. Close malformed tags
Check quotes, angle brackets and nesting. A missing closing quote can make the browser interpret the rest of the page as one attribute.
- 3. Confirm file placement
If CSS or JavaScript was provided separately, verify the filename and that the link or script element points to it.
- 4. Replace local computer paths
Paths such as C:\Users\Name\image.png do not work for website visitors. Import the asset or use an HTTPS URL.
- 5. Fix relative URLs
A preview does not have the original project folders. Use self-contained assets or paths that exist in the deployed project.
- 6. Wait for the element
Load scripts with defer, place them near the closing body tag or wait for DOMContentLoaded before selecting elements.
- 7. Match selectors exactly
An element with id="menu-button" will not match #menuButton. IDs and class names are case-sensitive in selector matching.
- 8. Remove duplicate IDs
Each ID must identify one element. Use classes for repeated cards, rows or buttons.
- 9. Define missing functions and variables
Look for “is not defined” and confirm that names are spelled consistently and declared before use.
- 10. Replace unsupported or server-only APIs
Node modules, file-system APIs and environment variables do not automatically run in an ordinary browser page.
- 11. Check stacking and overflow
If content exists but cannot be seen, inspect display, visibility, opacity, position, z-index, height and overflow.
- 12. Test narrow screens and zoom
Add the viewport meta tag, avoid fixed page widths and confirm the layout at phone widths and 200% text zoom.
Example: the button exists but nothing happens
This is a common generated-code failure: the script runs before the button exists and the selector does not match the HTML.
<head>
<script>
document.querySelector('#menuButton')
.addEventListener('click', openMenu);
</script>
</head>
<body>
<button id="menu-button">Menu</button>
</body><head>
<script defer src="script.js"></script>
</head>
<body>
<button id="menu-button"
aria-expanded="false">
Menu
</button>
</body>
// script.js
const button = document.querySelector('#menu-button');
button?.addEventListener('click', openMenu);The corrected file defers the script until the document has been parsed, matches the actual ID and guards the listener when the element is absent. The aria-expanded state should also be updated inside openMenu.
A better prompt for a repair
Give the assistant observable evidence and restrict the size of the change.
textAct as a debugging partner, not a page generator.
Expected: selecting “Menu” opens the navigation.
Actual: nothing changes.
First console error: Cannot read properties of null
Environment: a single browser HTML file, no Node.js.
1. Identify the smallest likely cause.
2. Return only the changed lines in a diff.
3. Explain why each change is needed.
4. Do not add libraries, trackers or remote assets.
5. Include one manual test for the fix.A constrained prompt makes the response easier to review. Include the smallest reproducible code sample after the evidence, and remove secrets or personal data first.
When should you start over?
Repair is usually faster when the page has a clear structure and a small number of faults. Rebuild only when the foundation is the problem.
- Start again when the answer mixes incompatible frameworks or assumes build tools you do not have.
- Start again when you cannot explain the purpose of most scripts or third-party dependencies.
- Keep repairing when the issue is a selector, path, malformed tag, loading order or isolated layout rule.
- If you restart, keep the working content and requirements; regenerate one component at a time rather than the whole product.
Use these tools with the workflow
Each link opens an existing HTMLOnline tool or course that supports a specific part of the review.
Standards and primary references
These references support the standards and product-capability statements in this guide. Our workflows and examples are original.
- Parsing HTML documentsWHATWG HTML Standard
- The script defer attributeMDN Web Docs
- Document.querySelector referenceMDN Web Docs
Frequently asked questions
Why does ChatGPT HTML open as plain text?
Save the file with an .html extension and open it in a browser or import it into an HTML viewer. Also remove Markdown code-fence markers such as ```html.
Why do images work for ChatGPT but not in my HTML file?
The answer may contain placeholder URLs, local computer paths or relative paths to files you do not have. Replace them with imported files or complete HTTPS URLs you control.
Can ChatGPT run Node.js code inside normal HTML?
Not directly. Browser HTML does not provide Node.js modules or file-system APIs. Use browser APIs, a compatible bundled library or an actual server/build environment.