What is the automatically generated div tag around a component used for

If a component is included for example by the <cq:include> tag, a div tag is added automatically around the component in the generated HTML.
What is this div tag used for and is it possible to suppress the automatic creation of it?

Answer, Resolution

This div tag is used for the editing system of CQ5 (drawing the edit bars, rollover frames etc), the Designer system of CQ5 (set CSS class name, Designer CSS styling) and also for identifying the component in the client DOM.

It's possible to suppress this generated div tag either by specifying an empty property cq:cellName in the component definition (see How are Design Cell Ids built) or by using the IncludeOptions.forceSameContext(true).
Note: In both cases, you won't be able to edit the component anymore (i.e. no dialogs).

The generated div tag has always at least a CSS class name attribute built from the cell name of the component (see How are Design Cell Ids built) used for the CSS styling of the component.
This CSS class name attribute can't be suppressed.
It's possible to add additional attributes for this generated div tag by the node cq:htmlTag in the component definition.
Each property of this node will be added as tag attribute.
It's also possible to 'overwrite' the CSS class name attribute of the div tag by adding the property class in the node cq:htmlTag.
In this case the cell name is not added automatically anymore. Therefor the css relevant design properties from the design dialog (added to the generated Designer css file) have no effect anymore -> the cell name has to be added to the property class in the node cq:htmlTag manually.

The automatically generated Designer css file (/etc/designs/<designname>.css) includes the css relevant design properties form the design dialog with the css class name equal to the component div. You have to make sure that the css class names from your static css file (/etc/designs/<designname>/static.css) don't clash with this names!

CQ5.3 and above

Starting with CQ5.3, a new and more dedicated API has been implemented that allows for better control of (automatically created) decoration tags:

• option for specifying the tag name for a component (cq:htmlTag/cq:tagName property)
• option for controlling the tag per include: IncludeOptions#setDecorationTagName
  
• option for controlling the default tag name: ComponentContext#setDefaultDecorationTagName

All the options above allow to suppress the decoration tag if set to an empty string.

Applies to

CQ5.2
CQ5.3+