Modify the auto-generated DIVs using cq:htmlTag
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.