Div

Universal container element that transforms into any HTML tag

Overview

The Div element is the most flexible container in the builder. It renders as a <div> by default with flex flex-col gap-4 classes, but can transform into over 30 different HTML tags via the Tag setting. This makes it ideal for creating semantic HTML structures and custom layouts.

Unlike Section and Container which have specific purposes, Div is a general-purpose container that adapts to whatever structure you need. Use it when you need a wrapper element that doesn't fit the standard layout patterns.

Key Features

  • Tag transformation: Change the HTML tag to any of 30+ supported elements (div, span, article, nav, aside, figure, details, and more)
  • Multiple display modes: Switch between block, flex, grid, inline, inline-block, inline-flex, inline-grid, or hidden
  • Default flex layout: Starts with flex flex-col gap-4 for easy vertical stacking
  • Nesting support: Can contain any other elements as children
  • Semantic markup: Create proper HTML5 document structure with article, nav, aside, header, footer, etc.
Semantic HTML Benefits

Using semantic tags like <article>, <nav>, and <aside> improves accessibility for screen readers and helps search engines understand your page structure.

Settings

Configure the Div element using these settings in the Inspector panel:

Setting Description Default
Tag The HTML element tag to render. Choose from: div, span, article, nav, aside, header, footer, main, section, figure, figcaption, details, summary, and more. div
Display CSS display mode: block, flex, grid, inline, inline-block, inline-flex, inline-grid, or hidden. flex
Direction Flex direction when display is flex: row (flex-row) or column (flex-col). column (flex-col)
Gap Space between child elements using Tailwind's gap scale (gap-0 through gap-16). gap-4 (1rem)

Allowed Tags

The Div element can transform into any of these HTML tags:

Structural Tags

Tag Purpose
div Generic block container (default)
span Generic inline container
section Thematic grouping of content
article Self-contained content (blog post, comment, forum post)
nav Navigation links section
aside Sidebar or tangential content
header Introductory content or navigation
footer Footer for nearest sectioning content
main Main content of the document (use once per page)
hgroup Heading group with subheadings
address Contact information
search Search functionality container

Content Tags

Tag Purpose
figure Self-contained content like images with captions
figcaption Caption for a figure element
blockquote Extended quotation
pre Preformatted text
center Centered block content (legacy)

List Tags

Tag Purpose
ul Unordered list
ol Ordered list
li List item
dl Description list
dt Description term
dd Description details
menu Menu of commands

Interactive Tags

Tag Purpose
details Disclosure widget (expandable/collapsible)
summary Visible heading for details element
dialog Dialog box or modal

Form Tags

Tag Purpose
form Form container
fieldset Group of form controls
legend Caption for fieldset

Embed Tags

Tag Purpose
canvas Graphics canvas for drawing
iframe Inline frame for embedding content

Display Modes

The Div element supports these CSS display modes:

Mode Description
block Full-width block element, stacks vertically
flex Flexbox container (default), enables flex layout
grid CSS Grid container, enables grid layout
inline Inline element, flows with text
inline-block Inline but respects width/height
inline-flex Inline flexbox container
inline-grid Inline grid container
hidden Hidden from view (display: none)

Examples

Basic Flex Column Div (Default)

A vertical stack of elements with gap between them:

<div class="flex flex-col gap-4">
  <h2>Title</h2>
  <p>Content paragraph</p>
  <a href="#">Learn more</a>
</div>

Div as Article (Semantic Markup)

Transform to <article> for blog posts or standalone content:

<article class="flex flex-col gap-4 p-6 bg-white rounded-lg shadow">
  <header>
    <h2 class="text-2xl font-bold">Blog Post Title</h2>
    <time class="text-gray-500">June 2, 2026</time>
  </header>
  <p>Blog post content goes here...</p>
  <footer>
    <a href="#" class="text-blue-600">Read more</a>
  </footer>
</article>

Div as Inline-Flex for Badges

Use inline-flex for horizontal badge layouts that flow with text:

<div class="inline-flex items-center gap-2">
  <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">New</span>
  <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Featured</span>
  <span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Pro</span>
</div>

Div as Details/Summary for Collapsible Content

Create native expandable sections using the details and summary tags:

<details class="border rounded-lg overflow-hidden">
  <summary class="px-4 py-3 bg-gray-100 cursor-pointer font-medium">
    Click to expand
  </summary>
  <div class="p-4">
    <p>This content is hidden by default and reveals when the summary is clicked.</p>
  </div>
</details>

Use the <nav> tag for navigation menus:

<nav class="flex flex-row gap-6 items-center">
  <a href="/" class="text-gray-900 font-medium">Home</a>
  <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
  <a href="/services" class="text-gray-600 hover:text-gray-900">Services</a>
  <a href="/contact" class="text-gray-600 hover:text-gray-900">Contact</a>
</nav>

Div as Figure with Caption

Wrap images with captions using <figure> and <figcaption>:

<figure class="flex flex-col gap-2">
  <img src="photo.jpg" alt="Description" class="rounded-lg">
  <figcaption class="text-sm text-gray-500 text-center">
    Photo caption describing the image
  </figcaption>
</figure>
Semantic Tag Guidelines

Use semantic tags appropriately: <article> for blog posts, <nav> for navigation, <aside> for sidebars, <figure> for images with captions. This improves accessibility and SEO.

Best Practices

  • Choose semantic tags: Use <article> for content, <nav> for navigation, <aside> for sidebars when appropriate
  • Default flex is convenient: The default flex flex-col gap-4 works well for most content stacking needs
  • Switch display modes as needed: Use grid for complex layouts, inline-flex for inline groups
  • One <main> per page: Only use the main tag once per page for the primary content area
  • Use details for FAQs: The <details> and <summary> tags provide native collapsible behavior without JavaScript