Common Elements: Container, Section, Divider, Button

Four elements appear on virtually every page you build: Container, Section, Divider, and Button. This article explains what each one is, what HTML it produces, and how to choose between the similar-looking options.

Container

The Container element creates a <div> — the most versatile element in HTML. It is a block-level grouping element with no inherent semantic meaning. Its entire purpose is to hold other elements so you can position them together, apply shared styles, or create a layout context.

When to use a Container:

• Wrapping a group of elements that share a background color or border
• Creating a max-width wrapper to center content on wide screens (max-width: 1200px; margin: auto)
• Any structural grouping where no HTML5 semantic element applies
• As the direct child of a Grid or Flex layout to create grid cells or flex items

Container vs. Section (see below): if the group of elements constitutes a major, self-contained region of the page (hero, features, testimonials, contact), use Section. If it’s a layout grouping within a region, use Container.

Containers are infinitely nestable. You can place a Container inside a Section, a Grid cell inside that Container, and further Containers inside those grid cells. Site Designer enforces valid HTML nesting and warns you if you try to create an invalid structure.

Section

The Section element creates an HTML5 <section> tag — a semantic landmark that represents a thematically distinct region of the page. Unlike a <div>, a <section> tells browsers, search engines, and assistive technology that the content inside it belongs to a coherent topic.

When to use Section:

• Major page regions: hero area, features section, testimonials block, contact section, footer region
• Any grouping that would have a heading (<h2> or higher) introducing it
• Regions a visitor might want to jump directly to

When not to use Section:

• Do not use <section> purely for styling (that’s what <div> is for)
• Do not use <section> as a generic row wrapper inside a grid — use a Container
• Do not nest Sections inside Sections unless the inner section truly is a sub-region of the outer one

Section vs. Container at a glance:

Divider

The Divider element creates an HTML <hr> (horizontal rule) — a thematic break between sections of content. It renders as a horizontal line and is intended to signal a topic change, not just visual spacing.

Use a Divider between two content blocks that are related but distinctly different topics — for example, between a biographical section and a contact form section. For purely visual spacing between elements, use padding and margin on the surrounding containers instead.

Styling dividers: Select the Divider element and use the Style pane to change its color, height (border-width), width, and margin. A Divider can be styled as a thin hairline rule, a bold accent bar, or a decorative element with border-radius.

Button

The Button element creates either a <button> tag or a styled <a> (anchor) tag, depending on its configured action.

Button types

Configuring a button

Select the Button element and open the Content pane:

• Label: The visible button text
• Type: Button, Submit, or Link (see above)
• URL (Link type only): The destination URL or internal page
• Target (Link type only): _self or _blank
• Disabled: Grays out the button and sets disabled attribute

Styling buttons with classes

Buttons are styled using CSS classes. By default, Site Designer applies a base .btn class. Add additional classes in the Content pane to apply framework button variants (e.g., Bootstrap’s btn-primary btn-lg, Foundation’s button large) or your own custom classes.