القائمة
Semantic HTML5 markup patterns for meaningful, accessible, and SEO-optimized content structure
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-html --skill semantic-htmlيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
WCAG 2.2 AA compliance, ARIA patterns, screen reader compatibility, and inclusive design patterns
HTML5 forms, Constraint Validation API, accessible form patterns, and modern input types
Core HTML5 elements, document structure, and foundational markup patterns
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | semantic-html |
| description | Semantic HTML5 markup patterns for meaningful, accessible, and SEO-optimized content structure |
| sasmp_version | 1.3.0 |
| bonded_agent | html-expert |
| bond_type | PRIMARY_BOND |
| version | 2.0.0 |
| category | semantics |
| complexity | intermediate |
| dependencies | ["html-basics"] |
| parameters | {"content_type":{"type":"string","required":true,"enum":["article","navigation","sidebar","header","footer","section","figure","list","table"]},"semantic_level":{"type":"string","default":"strict","enum":["strict","moderate","minimal"]},"include_landmarks":{"type":"boolean","default":true}} |
| retry | {"max_attempts":3,"backoff_ms":[1000,2000,4000],"retryable_errors":["PARSE_ERROR","VALIDATION_ERROR"]} |
Transform markup from presentation-focused to meaning-focused, enabling accessibility, SEO, and AI/voice interface compatibility.
Provide atomic, single-responsibility operations for:
<article>, <section>, <nav>)interface SemanticHtmlInput {
operation: 'analyze' | 'convert' | 'validate' | 'suggest';
content_type: ContentType;
markup?: string; // Existing HTML to analyze/convert
context?: {
page_type: 'homepage' | 'article' | 'product' | 'contact' | 'search';
has_sidebar: boolean;
has_comments: boolean;
};
options?: {
semantic_level: 'strict' | 'moderate' | 'minimal';
include_landmarks: boolean;
preserve_classes: boolean;
};
}
type ContentType =
| 'article' // Blog post, news article
| 'navigation' // Nav menus, breadcrumbs
| 'sidebar'
|
|
|
|
|
| ;
interface SemanticHtmlOutput {
success: boolean;
markup: string;
semantic_score: number; // 0-100
improvements: Improvement[];
landmark_map: LandmarkMap;
outline: DocumentOutline;
}
interface Improvement {
original: string;
suggested: string;
reason: string;
impact: 'critical' | 'high' | 'medium' | 'low';
}
┌─────────────────────────────────────────────────────────────┐
│ Semantic Element Decision Tree │
├─────────────────────────────────────────────────────────────┤
│ │
│ Is it the main content? │
│ └── Yes → <main> │
│ └── No ↓ │
│ │
│ Is it independently distributable? │
│ └── Yes → <article> │
│ └── No ↓ │
│ │
│ Is it a thematic grouping with a heading? │
│ └── Yes → <section> │
│ └── No ↓ │
│ │
│ Is it navigation links? │
│ └── Yes → <nav> │
│ └── No ↓ │
│ │
│ Is it tangentially related content? │
│ └── Yes → <aside> │
│ └── No ↓ │
│ │
│ Is it introductory or navigational content? │
│ └── Yes → <header> │
│ └── No ↓ │
│ │
│ Is it footer/meta information? │
│ └── Yes → <footer> │
│ └── No → <div> │
│ │
└─────────────────────────────────────────────────────────────┘
| HTML5 Element | ARIA Landmark Role | Implicit Role |
|---|---|---|
<header> (page) | banner | Yes |
<nav> | navigation | Yes |
<main> | main | Yes |
<aside> | complementary | Yes |
<footer> (page) | contentinfo | Yes |
<section> | region | If has accessible name |
<article> | article | Yes |
<form> | form | If has accessible name |
<body>
<header>
<nav aria-label="Main">...</nav>
</header>
<main>
<article>
<header>
<h1>Article Title</h1>
<p>By <a rel="author" href="/author">Author</a></p>
<time datetime="2025-01-15">January 15, 2025</time>
</header>
<section aria-labelledby="intro">
<h2 id="intro">Introduction</h2>
<p>Content...</p>
</section>
<section aria-labelledby="main-content">
<h2 id="main-content">Main Content</h2>
<p>Content...</p>
</section>
<footer>
<p>Tags: <a href="/tag/html" rel="tag">HTML</a></p>
</footer>
</article>
<aside aria-label="Related articles">
<h2>Related Articles</h2>
<ul>...</ul>
</aside>
</main>
<footer>
<nav aria-label="Footer">...</nav>
<p>© 2025</p>
</footer>
</body>
<body>
<header>
<nav aria-label="Main">...</nav>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/products/widgets" aria-current="page">Widget</a></li>
</ol>
</nav>
</header>
<main>
<article itemscope itemtype="https://schema.org/Product">
<h1 itemprop="name">Product Name</h1>
<figure>
<img itemprop="image" src="product.jpg" alt="Product description">
</figure>
<section aria-labelledby="description">
<h2 id="description">Description</h2>
<p itemprop="description">Product details...</p>
</section>
<section aria-labelledby="pricing">
<h2 id="pricing">Pricing</h2>
<p itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price" content="29.99">$29.99</span>
</p>
</section>
</article>
<aside aria-label="Related products">
<h2>You May Also Like</h2>
<ul>...</ul>
</aside>
</main>
<footer>...</footer>
</body>
| Code | Description | Recovery |
|---|---|---|
SH001 | Missing document outline | Add proper heading hierarchy |
SH002 | No main landmark | Wrap primary content in <main> |
SH003 | Multiple main elements | Keep only one <main> |
SH004 | Section without heading | Add heading or use <div> |
SH005 | Article without heading | Add <h1>-<h6> |
SH006 | Nav without label | Add aria-label |
SH007 | Div soup detected | Suggest semantic alternatives |
Analyze Input → Identify Anti-Patterns → Suggest Fixes → Validate → Report
↓
[If conversion requested]
↓
Apply automatic fixes → Re-validate → Return improved markup
Debug Checklist:
□ Is <main> present and unique?
□ Are headings in logical order (h1→h2→h3)?
□ Do sections have accessible names?
□ Are nav elements labeled uniquely?
□ Is banner/contentinfo outside main?
Debug Checklist:
□ Is <article> used for main content?
□ Is author/date marked with rel/datetime?
□ Are headings used (not just styled divs)?
□ Is structured data (schema.org) present?
□ Are images in <figure> with <figcaption>?
Conversion Guide:
<div class="header"> → <header>
<div class="nav"> → <nav>
<div class="main"> → <main>
<div class="article"> → <article>
<div class="sidebar"> → <aside>
<div class="footer"> → <footer>
<div class="section"> → <section>
<div class="figure"> → <figure>
| Factor | Weight | Measurement |
|---|---|---|
| Landmark coverage | 25% | banner, main, contentinfo present |
| Heading hierarchy | 25% | Correct h1→h6 nesting |
| Semantic ratio | 20% | semantic / (semantic + div + span) |
| Accessible names | 15% | Labeled sections and navs |
| Article structure | 15% | Proper article markup |
Score Interpretation:
# Analyze existing markup
skill: semantic-html
operation: analyze
markup: "<div class='main'><div class='post'>...</div></div>"
# Convert to semantic HTML
skill: semantic-html
operation: convert
content_type: article
markup: "<div class='blog-post'>...</div>"
options:
semantic_level: strict
include_landmarks: true
# Suggest improvements
skill: semantic-html
operation: suggest
content_type: navigation
context:
page_type: homepage
has_sidebar: true