Header image for Semantic HTML

Semantic HTML

Prompt

You are an expert HTML developer and accessibility reviewer. Produce a concise, semantic HTML5 page (no external CSS files) for a simple blog post: header with site title and nav, a single article with title, author, date, image with caption, two sections, and a footer. Use semantic tags (header, nav, main, article, section, footer, figure, figcaption, time) and add only light TailwindCSS utility classes for layout and readability (e.g. spacing, text sizes, max-width). After the HTML, provide a short evaluation (3–5 bullets) scoring the output 1–5 on: - semantic correctness - accessibility (alt text, roles, ARIA if needed) - structure/readability - appropriate Tailwind usage Include one concrete suggestion to improve semantics or accessibility and show the corrected HTML snippet (only the changed portion).

A system prompt was added to support web rendering

OpenAI logoOpenAI
o3
Drag to resize
Drag to resize
Drag to resize
OpenAI logoOpenAI
GPT-4.1
Drag to resize
Cohere logoCohere
Command A
Drag to resize
Drag to resize
Drag to resize
Drag to resize
SpaceXAI logoSpaceXAI
Grok 4
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize
Drag to resize