skills.rest
AnthonyPAlicea
AnthonyPAliceaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

de-div

Refactor non-semantic div and span elements into HTML5 semantic tags.

84|11|Updated Jun 8, 2026
Search Tags:#html#accessibility#web development#refactoring#frontend#semantics
One-click install
npx skills add https://github.com/AnthonyPAlicea/skills --skill de-div
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: de-div
Source: https://github.com/AnthonyPAlicea/skills/tree/main/skills/de-div
Command: npx skills add https://github.com/AnthonyPAlicea/skills --skill de-div

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the common issue of div soup, where developers default to using meaningless div and span elements, resulting in inaccessible and poorly structured code.

Core Features & Use Cases

  • EDIT Mode: Refactors existing codebases, components, or templates to use semantic HTML elements while preserving visual appearance.
  • CREATE Mode: Guides the authoring of new markup, ensuring semantic elements are chosen from the start.
  • Educational Reporting: Generates a detailed report explaining the semantic choices made, helping developers learn to author better HTML.

Quick Start

Activate the de-div skill and ask it to refactor the current component to use semantic HTML elements instead of divs.

Frequently Asked Questions about de-div

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor existing HTML to replace div and span elements with semantic tags?▼

Refactor HTML by analyzing non-semantic div and span elements to replace them with appropriate HTML5 semantic tags. The process preserves visual appearance by evaluating host language syntax and CSS styling during the conversion.

What is div soup and how does it affect web accessibility?▼

Div soup is the practice of overusing meaningless div and span elements, which results in poorly structured and inaccessible web markup. Replacing these generic containers with semantic HTML5 elements improves accessibility and document structure.

Can I use this to guide the authoring of new semantic HTML components?▼

Yes, you can author new markup by ensuring appropriate semantic HTML elements are chosen from the start. This prevents div soup by guiding the selection of HTML5 semantic tags during the initial component creation phase.

Will refactoring div elements to semantic HTML change my CSS styling?▼

Refactoring divs to semantic HTML will not change your CSS styling. The process requires analyzing host language syntax and CSS styling to ensure visual consistency is preserved throughout the markup conversion.

Does replacing non-semantic divs with HTML5 semantic tags generate an accessibility report?▼

Yes, replacing non-semantic divs with HTML5 semantic tags generates an educational report explaining the semantic choices made. This detailed report helps developers learn to author better and more accessible HTML.

What's the best way to improve frontend document structure without breaking visual appearance?▼

The best way to improve frontend document structure is refactoring div soup into semantic HTML elements. This approach analyzes host language syntax and CSS to ensure visual appearance is maintained while enhancing accessibility.

Related Skills

Explore More Software Engineering Skills→
rakibulismrakibulism
2

design-to-code

Translate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
thisisAhsanIqbalthisisAhsanIqbal
7

semantic-layout

Validate HTML semantic elements and accessibility structure for SEO clarity.

Community
Intermediate