From Design to Markup: Building Semantic HTML Frameworks With ChatGPT

Most web redesigns start with the same ingredients: a fresh batch of design files, a handful of content fragments, and a well-intentioned plan to "keep SEO in mind." But getting from visual layouts to clean, structured, semantic HTML isn't always straightforward.

Recently, we worked through a full-page redesign process for several Jellyfish Training templates. What made this round different was how we used ChatGPT not as a copywriter, but as a markup strategist.

Here we outline how we did it.

Why bother with semantic HTML?

Before jumping into code, it's worth stepping back. Semantic HTML isn't about ticking accessibility checkboxes or following Google’s latest whims. It’s about clarity:

• Clarity for screen readers and assistive devices
• Clarity for crawlers and search engines
• Clarity for generative systems that use your markup to infer context, category, or meaning

Put simply, semantic HTML is a shared language between humans and machines. If your content structure makes sense in the source code, you're giving every system, from Googlebot to GPTs, a better chance of understanding what you're actually offering.

The Process: From visual design to HTML structure

We started with a high-fidelity design in Figma. Each page represented a different use case: home page, category landing pages, individual course details, informational pages and hybrid sales/training formats like the GA4 Toolkit.

Instead of handing these over directly to devs with vague labels like "hero block" or "course module," we ran each design through a semantic breakdown in ChatGPT.

The prompt wasn’t complicated. It looked more like this:

“Here’s the visual design. Recommend semantic HTML structure using main, section, article, ARIA roles, and heading levels. Nest headings appropriately. Prioritise machine readability.”

From there, we layered in:

• header with nav landmarks
• Proper h1 in main only, with contextual h2 and h3 throughout
• Use of article for course cards and FAQs
• aria-labelledby and aria-label attributes for accessibility
• aside blocks for filters and CTAs

It’s important to note that before the action prompt, I primed the AI with a long-form conversation about semantic HTML, accessibility, and content structure - challenging it where necessary. This meant I was confident that we’d minimise any errors or hallucinations.

The result was that each page structure became a boilerplate our developers could interpret and implement with real content. Not line-by-line specs, but a shared scaffold that ensures markup quality.

What ChatGPT got right

• Structural awareness: It understood when to use section vs article, and the correct contextual h1-h3s within the page structure.
• Labelling regions: Suggestions for aria-label and aria-labelledby were surprisingly consistent
• Crawl clarity: The markup it generated was easy to follow, easy to scan, and easy to extend with schema later

More importantly, it helped us challenge lazy habits like wrapping everything in div class="block" without thinking about hierarchy.

What we needed to correct

No surprises here: AI can’t read hierarchy perfectly from images alone. It can make a good start, but that it still needed human judgments to clear up a few hard to interpret content hierarchies.

We had to intervene when:

• Visual elements were decorative, not structural
• Headings looked semantically important but weren’t
• Buttons needed descriptive text for screen readers

We also reminded ourselves (and our devs) that this markup was a framework, not a finished product. The job of semantic scaffolding is to suggest intent rather than to lock in precise syntax.

A screenshot of the ChatGPT output with HTML framework and semantic markup

Lessons for your next project

If you're redesigning site templates or building new pages in a component system, you might consider incorporating this process into your workflow:

1. Prime ChatGPT with your expectations: accessibility, SEO, UX.
2. Upload Figma screenshots or describe the structure clearly.
3. Ask for semantic scaffolding, not full code output.
4. Edit the results—don't copy/paste.
5. Share the HTML framework with your developers as a guide, not a spec.

It won’t replace human logic, but it will force better markup conversations.

Why semantic HTML still matters

With generative search interfaces (Google's AIOs and AI Mode, ChatGPT, Perplexity etc.) indexing and summarising content based on structure, your HTML is no longer just for rendering - it’s for retrievability. As we move from the era of pure Search Engines to Answer Engines it's time to double down on many of the things we should have been doing already but perhaps sometimes slipped through the net.

That means better use of:

• Landmark elements for orientation
• Structured headings for content hierarchy
• Accessible labels and ARIA roles
• Schema to define entities, prices, FAQs, etc.

The sites that win in this new environment won’t just look well-designed. They’ll be structurally sound, semantically clear, and easy to interpret across systems.

If you’re investing in new page designs, or looking to update your current structures, now’s the time to invest in the markup that supports them.

If you want to explore how ChatGPT can help you in your day to day processes, check out our Introduction to ChatGPT course. Or, if you've already mastered the basics we offer an advanced ChatGPT workflows course - currently available to up-skill whole teams.

If you're interested in how to transition your search strategies in the AI era you can also check out our SEO to AEO course.