html-semantic
Generate accessible, semantically correct HTML5 with proper landmark elements and ARIA attributes.
소스 정보
- 저장소
- glayph/Agent
- 최근 소스 활동
- 2026년 9월 19일 22:39
- 감지된 SKILL.md 언어
- 영어
- 스타
- 0
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- html-semantic
- description
- Generate accessible, semantically correct HTML5 with proper landmark elements and ARIA attributes.
- version
- 1.0.0
- author
- Miki
- license
- MIT
- platforms
- ["linux","macos","windows"]
- metadata
- {"Miki":{"tags":["html5","semantic-markup","accessibility","seo"],"related_skills":["accessibility","css-styling"]}}
# HTML5 & Semantic Markup
## Document structure
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page title</title>
</head>
<body>
<header> <!-- site/banner -->
<nav> <!-- navigation -->
<main> <!-- primary content -->
<article> <!-- self-contained composition -->
<section> <!-- thematic grouping -->
<aside> <!-- tangentially related -->
<footer> <!-- footer -->
</body>
</html>
```
## Landmarks
| Element | ARIA role | Use |
|---------|-----------|-----|
| `<header>` | `banner` | Site header (NOT per-section headers) |
| `<nav>` | `navigation` | Primary nav blocks |
| `<main>` | `main` | One per page, wraps unique content |
| `<article>` | `article` | Forum posts, blog entries, news stories |
| `<section>` | `region` | Group with heading — only use `aria-label` if no heading |
| `<aside>` | `complementary` | Sidebars, pull quotes, related links |
| `<footer>` | `contentinfo` | Site footer (NOT per-section footers) |
| `<form>` | `form` | Only if has `aria-label` or `<legend>` |
## Heading hierarchy
- Single `<h1>` per page
- No gaps: h1→h2→h3, never h1→h3
- Headings describe content structure, not visual size
## ARIA rules (5 golden rules)
1. Don't use ARIA if native HTML works (`<button>` not `<div role="button">`)
2. Don't override native semantics (`role="heading"` on `<h2>` — pointless)
3. All interactive elements must be keyboard accessible
4. `aria-label` only when visible label is absent
5. `role="presentation"` / `role="none"` only on decorative images
## Accessibility checklist
- Alt text on all `<img>` (empty alt for decorative)
- Form inputs have `<label>` or `aria-label`
- Color not sole differentiator
- Focus order matches visual order
- Skip navigation link as first focusable element
- `prefers-reduced-motion` respected
- Error messages associated via `aria-describedby`
GitHub에서 보기