Removing extra component div in AEM

While you make a component and if you see the HTML of the component in publish mode then it contains the extra div of the component due to this your css and js might break.

So to remove the component div you have to make cq:htmlTag node inside your component.

This node primaryType is nt:unstructured. And also you have to add another property i.e cq:tagName.

In this you can write tag name which you want, which is of String type. Ex– cq:tagName –>  div, p or sly etc.

If you write tag name then that particular tag will appear in HTML.

You can left blank the value of cq:tagName if you dont want any div.

So when you will see the html of publish mode then there is no extra div of particular tag.

>>>>>>>Example

My component name is topnavthird, so in the publish mode when I see the HTML of component then it contains the extra div which contains class attribute of value component name i.e topnavthird.

Extra div under ul tag.

But When I use cq:htmlTag node and set cq:tagName property to blank

then the extra component div is removed.

But it does not mean that you can not use any value, you can set any value to cq:tagName property.

Here I use sly, so now there is an extra sly division in place of div.

All this I experienced in 6.2 and above.

@Reference

https://docs.adobe.com/content/help/en/experience-manager-64/developing/components/decoration-tag.html