How to Customize Div Wrapper from 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>

Source: https://aemcorner.com/how-to-customize-div-wrapper-from-component/