HTML Structure with AI

Semantic HTML: Structure That Means Something

HTML isn’t just about making things appear on screen — it’s about giving content meaning. AI can generate any HTML you ask for, but the quality depends on how well you describe the structure.

The Page Skeleton

Every web page starts with the same foundation:

Create a semantic HTML5 page structure for a [type of page: landing page / blog post / portfolio / product page].

Include:
1. DOCTYPE and html lang attribute
2. Head: meta charset, viewport, title, meta description
3. Body structure using semantic elements:
   - header (site branding + navigation)
   - main (primary content area)
   - footer (copyright, links, contact)
4. Landmark roles where appropriate
5. Skip navigation link for accessibility

Do NOT include any CSS or JavaScript — just clean, semantic HTML.

✅ Quick Check: Why does the prompt specify “no CSS or JavaScript”?

Because mixing concerns in early prompts produces messy code. When AI generates HTML, CSS, and JavaScript together, it often cuts corners on the HTML structure to make the styling work faster. Requesting HTML only forces AI to focus on proper semantics and accessibility — the foundation everything else builds on.

Navigation is one of the most complex HTML components to get right:

Create a semantic navigation component for a website with these pages:
- Home
- About
- Services (with dropdown: Consulting, Training, Support)
- Blog
- Contact

Requirements:
- Use nav element with aria-label
- Use unordered list structure
- Dropdown must be keyboard-accessible (Enter to open, Escape to close, Arrow keys to navigate)
- Include aria-expanded and aria-haspopup for the dropdown trigger
- Mark the current page with aria-current="page"
- Mobile-friendly structure (will add CSS later)

HTML only — no CSS or JavaScript yet.

Forms That Work for Everyone

Forms are where accessibility matters most:

Create an HTML form for [purpose: contact / registration / checkout / survey].

Fields:
1. [field name] — [type: text/email/tel/select/textarea/checkbox/radio] — [required/optional]
2. [field name] — [type] — [required/optional]
3. [repeat for all fields]

Accessibility requirements:
- Every input has a label element linked via for/id
- Required fields marked with aria-required="true" and visual indicator
- Error message containers with aria-describedby linking to each input
- Fieldset/legend for related groups (radio buttons, checkboxes)
- Submit button (not input type="submit")
- Form has an accessible name via aria-label or aria-labelledby

Include placeholder text only where it adds value (not as a label replacement).

Content Sections

Article and Blog Post Structure

Create semantic HTML for a blog post page:

Content structure:
- Article title (h1)
- Author name and publish date (with time element)
- Featured image with descriptive alt text
- Article body with:
  - 3-4 sections with h2 headings
  - A blockquote
  - An ordered list
  - A code snippet (use pre + code elements)
- Tags/categories section
- Author bio box
- Related posts section (3 cards with title, excerpt, link)

Use article, section, aside, figure, figcaption, time elements appropriately.

Cards and Listing Pages

Create semantic HTML for a listing page showing [products / blog posts / team members / portfolio items]:

Page structure:
- Page heading (h1) with item count
- Filter/sort controls (using form elements)
- Grid of cards, each containing:
  - Image with alt text
  - Title (h3, linked)
  - Brief description
  - [metadata: price / date / role / tags]
  - Call-to-action link or button
- Pagination (using nav element with aria-label="Pagination")

Use unordered list for the card grid (li for each card). Each card should be an article element.

HTML Verification Checklist

After AI generates HTML, run through this checklist:

Review this HTML for quality and accessibility:

[paste your HTML]

Check for:
1. Semantic elements used correctly (not div soup)
2. Heading hierarchy (h1 → h2 → h3, no skipped levels)
3. All images have meaningful alt text (not "image" or empty for decorative)
4. Form inputs have associated labels
5. Links have descriptive text (not "click here")
6. Language attribute on html element
7. Meta viewport for responsive design
8. No inline styles or scripts
9. Valid HTML5 structure

List any issues found and provide corrected code.

✅ Quick Check: Why check for “no skipped heading levels”?

Screen reader users navigate by heading levels — jumping from h1 to h2 to h3 like a table of contents. Skipping from h1 to h3 creates a gap that confuses this navigation. Heading hierarchy isn’t visual decoration (that’s CSS’s job) — it’s document structure that assistive technology relies on.

Exercise: Build a Page Structure

Choose a page type (landing page, blog post, or portfolio)
Use the page skeleton prompt to generate the base HTML
Add a navigation component with at least one dropdown
Add a content section appropriate for your page type
Run the verification checklist on the complete HTML
Open the file in a browser — it won’t look styled, but the content structure should be logical and complete

Key Takeaways

Semantic HTML (header, nav, main, article, footer) communicates meaning to browsers, screen readers, and search engines — div-based layouts communicate nothing
Generate HTML separately from CSS and JavaScript to ensure AI focuses on proper structure and accessibility
Detailed form prompts (field types, validation, labels, error placement) produce production-ready forms; vague prompts produce bare-minimum forms
Every image needs meaningful alt text, every form input needs a label, every heading follows hierarchy — verify these after every AI generation
Navigation components need keyboard accessibility (Enter, Escape, Arrow keys) and ARIA attributes — request these explicitly in your prompts
Run an accessibility verification on all AI-generated HTML before adding styles or behavior

Up Next: In the next lesson, you’ll add CSS to your HTML structures — responsive layouts, modern styling techniques, and design systems that work on every device.