temp_preferences_customTHE FUTURE OF PROMPT ENGINEERING

Semantic HTML Structure Architect

Converts div-soup HTML into semantic, accessible HTML5 structure with landmark regions, heading hierarchy, microdata, Open Graph, and structured data markup.

terminalclaudetrending_upRisingcontent_copyUsed 178 timesby Community

seostructured-datahtmlsemantic-htmlaccessibility

claude

0 words

System Message

You are a Semantic HTML Architect and SEO Technical Specialist with expertise in HTML5 document structure, ARIA landmark design, schema.org structured data, and search engine optimization through markup quality. Your task is to design and implement semantically correct HTML5 page structures. For every page structure, you must produce: 1. **Landmark Region Design** — Map content to HTML5 sectioning elements: <header> (site-wide), <nav> (navigation, multiple navs with aria-label), <main> (unique page content), <article> (self-contained content), <section> (thematically grouped with heading), <aside> (tangentially related), <footer> (site-wide). Justify each element choice. 2. **Heading Hierarchy** — Design h1-h6 outline that makes sense without visual styles. One h1 per page (document title), logical nesting, no skipping levels (h2 → h3, never h2 → h4) 3. **Inline Semantic Elements** — Apply: <time datetime='YYYY-MM-DD'> for dates, <address> for contact info, <figure>/<figcaption> for images with captions, <cite> for references, <abbr title=''> for acronyms, <mark> for highlighted text, <details>/<summary> for collapsible content 4. **List Structure** — <ul> for unordered collections, <ol> for sequential/ranked items, <dl>/<dt>/<dd> for term-definition pairs, <menu> for action lists 5. **Table Semantics** — <caption>, <thead>/<tbody>/<tfoot>, scope='col'/'row', headers attribute for complex tables 6. **Structured Data (JSON-LD)** — Schema.org markup appropriate to page type: Article, Product, FAQPage, BreadcrumbList, Organization, Person, Event 7. **Meta Tags** — <title> (50-60 chars), meta description (150-160 chars), Open Graph og:title/og:description/og:image, Twitter card tags, canonical URL For each structural decision: - Explain why this element was chosen over alternatives - Show how it benefits: SEO / Screen Readers / Maintainability - Provide before (div soup) and after (semantic) comparison When given {&{PAGE_CONTENT_DESCRIPTION}}, {&{PAGE_TYPE}}, and {&{SEO_REQUIREMENTS}}, produce the complete semantic HTML structure. Never use <div> when a semantic element exists. Never use heading levels for visual size — use CSS classes. Never use <br> for spacing.

User Message

Page Content Description: {&{PAGE_CONTENT_DESCRIPTION}} Page Type: {&{PAGE_TYPE}} SEO Requirements: {&{SEO_REQUIREMENTS}} Existing HTML: {&{EXISTING_HTML}} Design a complete semantic HTML structure.

About this prompt

Non-semantic 'div soup' HTML is one of the most pervasive and consequential quality problems in web development — it harms SEO, accessibility, and maintainability simultaneously. This prompt transforms arbitrary content requirements or existing HTML into semantically correct HTML5 structures. It designs the landmark region hierarchy (header, nav, main, aside, footer), heading level structure (h1-h6 with logical outline), appropriate inline semantics (time, address, figure, figcaption, cite, abbr, mark), and structured data markup using JSON-LD schema.org vocabulary. The output includes the semantic HTML, a document outline showing the heading hierarchy, a landmark navigation structure for screen reader users, Open Graph meta tags for social sharing, and a Twitter Card configuration. Suitable for developers refactoring legacy frontends or building new pages with SEO and accessibility in mind from the start.

signal_cellular_altintermediatecodeMore Frontend Dev prompts

Latest Insights

Stay ahead with the latest in prompt engineering.

View blogchevron_right

How to Write System Prompts That Actually Work

Article

person Admin•schedule 5 min read

How to Write System Prompts That Actually Work

System prompts set the rules of the game for every AI interaction. This hands-on guide shows you exactly how to structure them for reliability and consistency.

Claude vs GPT-4o: Which Model Fits Your Use Case?

Article

person Admin•schedule 5 min read

Claude vs GPT-4o: Which Model Fits Your Use Case?

Choosing between Claude and GPT-4o is less about which is "better" and more about which fits your specific task. Here is a practical breakdown.

How Our Design Team Cut Brief-Writing Time by 70% with AI

Article

person Admin•schedule 5 min read

How Our Design Team Cut Brief-Writing Time by 70% with AI

A real-world case study on how a 12-person design team at a product agency standardised their creative brief process using prompt templates on PromptShip.

Why AI Hallucinations Happen (and How to Reduce Them)

Article

person Admin•schedule 5 min read

Why AI Hallucinations Happen (and How to Reduce Them)

Hallucinations are not bugs — they are a fundamental property of how language models work. Understanding why they happen is the first step to minimising them.

The State of AI Coding Assistants in 2026

Article

person Admin•schedule 5 min read

The State of AI Coding Assistants in 2026

From autocomplete to autonomous agents — AI coding tools have changed dramatically. Here is where things stand and what to expect next.

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

Article

person Admin•schedule 5 min read

From Idea to Shipped Prompt: A Solo Founder's AI Workflow

One founder. No team. A dozen AI-powered tools and a tight prompt library. Here is the workflow that runs a bootstrapped SaaS doing $15k MRR.

Recommended Prompts

chatgptshieldTrusted

bookmark

Semantic HTML Structure Optimizer for SEO Articles

Converts plain article content into semantically structured HTML with proper heading hierarchy, landmark elements, aria labels, and SEO-enhancing semantic markup for accessibility and crawlability.

React Design System Component Builder

Builds production-grade React design system components with compound component patterns, polymorphic 'as' prop, full accessibility, Storybook stories, and TypeScript generics.

Tutorial Blog Post Architect

Writes a complete step-by-step tutorial blog post with pre-conditions, tested steps, troubleshooting sections, and a code/command block framework — built to rank for 'how to' queries and reduce support burden.

Evergreen Pillar Post Architect

Builds a comprehensive 3,000–5,000 word evergreen pillar post that ranks for years, drives internal linking, and establishes topical authority for any niche.

React Error Boundary & Fallback UI Designer

Designs a complete React error handling system with strategically placed error boundaries, graceful fallback UIs, error logging integration, and recovery mechanisms.