AI로 만드는 HTML 구조

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.

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.

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).

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.

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.

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.