Prompting AI for HTML Structure
HTML provides the skeleton of your webpage — the content and structure that everything else builds upon. Well-structured HTML makes styling easier, improves accessibility, and helps search engines understand your content.
Semantic HTML Elements
Modern HTML includes elements that describe their purpose, not just their appearance:
<header>— introductory content, often containing navigation<nav>— navigation links<main>— the primary content of the page<section>— a thematic grouping of content<article>— self-contained content that could stand alone<footer>— closing content, often containing links and copyright
Using these instead of generic <div> elements everywhere makes your HTML meaningful. Screen readers use them to help visually impaired users navigate. Search engines use them to understand your content's structure.
Prompting AI for Structure
Describe what sections and content you need:
Create HTML for a personal portfolio page with:
- Header with my name and navigation links
- Hero section with tagline and call-to-action button
- Projects section with 3 project cards (image, title, description, link)
- About section with bio and skills list
- Contact section with a form (name, email, message)
- Footer with social media links
Use semantic HTML5 elements. Include placeholder content.
Add comments explaining each section.
This prompt specifies structure, content types, and asks for comments that help you understand the result.
Reviewing Generated HTML
When AI returns HTML, check for:
Semantic elements: Does it use <header>, <main>, <section>, or just <div> everywhere?
Accessibility basics: Do images have alt attributes? Do form inputs have <label> elements? Is there a logical heading hierarchy (<h1>, then <h2>, etc.)?
Logical structure: Does the nesting make sense? Are related elements grouped together?
<!-- Good: semantic and accessible -->
<section id="projects">
<h2>My Projects</h2>
<article class="project-card">
<img src="project1.jpg" alt="Screenshot of weather app">
<h3>Weather App</h3>
<p>A simple weather forecast application.</p>
</article>
</section>
Modifying to Fit Your Needs
AI generates a starting point, not a final product. Change placeholder text to your actual content. Add or remove sections. Adjust the structure to match your vision.
If something's unclear, ask: "Why did you use an <article> inside the <section> here?" Understanding the reasoning helps you make informed modifications.