How to customize div wrapper from component

In a previous post we saw how it is possible to remove the default DIV wrapper automatically generated by AEM for each component. In this article we will see instead how to customize DIV wrapper from component.

Just a quick recap on AEM DIV wrapper

AEM wrap by default each component html placed in a page with a DIV tag with an associated class named matching the component name:

<div class="mycomponentname">
 ...
 ...
</div>

How to customize div wrapper

We can use cq:htmlTag node to manipulate wrapper div using following properties:

• class – The CSS class names that may be used for styling.
• id – The id of the element in the rendered HTML.
• cq:tagName – The tag that will be used to represent our component in the DOM (div, span, p, etc.)

For example, with the following settings:

class = myClass
id = myId
cq:tagName = span

we will get an html wrapper like this:

<span id="myId" class="myClass">
.... my component html ....
</span>