HTML Div / Span Builder

Wrap content in a
or with custom classes, id, and inline styles.
Element Settings
Inline Styles
Tips: Use data-* attributes for JavaScript hooks and custom data. Use ARIA attributes to improve accessibility for screen reader users.

Features

  • 10 Element Types: div, span, section, article, aside, header, footer, main, nav, p.
  • CSS Class Builder: Add multiple classes separated by spaces.
  • Data Attributes: Add custom data-* attributes line by line.
  • ARIA Attributes: Add accessibility roles and labels.
  • Inline Style Builder: Visually configure display, width, padding, colors, border, and radius.
  • Live Preview: See the element render as you configure it.

How to Use

  1. Choose Tag: Select the HTML element type.
  2. Add Content: Enter the inner text or HTML content.
  3. Set Attributes: Fill in id, classes, data-* and ARIA attributes.
  4. Style: Configure inline styles using the visual controls.
  5. Copy: Switch to Code tab and copy the result.