Apr 18, 2013

Modify the auto-generated DIVs using cq:htmlTag

Posted by Vianney Baron

Out of the box AEM creates a number of div tags in the HTML code, these are used by the editing system, but also to identify the various components in the DOM.

As a designer you want to make sure the HTML presented to the end user complies to what you originally put together, so these generated elements can often be seen as a nuisance.

However there are a few ways to work around this, one of them is to use the cq:htmlTag node as described in this post.

First off we need to create a new node in the component definition name cq:htmlTag like so:


Then in this node we can define:

  • The class(es) associated with our element, note that CQ always adds one class named after the cell name of our component in the page.
  • The ID added to the element.
  • The actual nature of the tag that will be used to represent our component in the DOM (div, span, p, etc.)

For example this:


Will embed the component in the following piece of HTML:

Of course you should be careful when using this feature, as wrong choices might result in a broken DOM and impact both the editing system and the final resulting HTML.