working with templates, the rules

Is there a list of what type of HTML tags can be used with all the different types of IW controls? I.e.: what goes with what?

I'm trying to use a Bootstrap template with things like:

                      &tdiv class="card"&t
                        &tdiv class="card-body"&t
                          &tdiv class="card-title d-flex align-items-start justify-content-between"&t
                            &tdiv class="avatar flex-shrink-0"&t
                              &timg
                                src="assets/img/user.png"
                                alt="Users"
                                class="rounded"
                              /&t
                            &t/div&t
                            &tdiv class="dropdown"&t
                              &tbutton
                                class="btn p-0"
                                type="button"
                                id="cardOpt3"
                                data-bs-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              &t
                                &ti class="bx bx-dots-vertical-rounded"&t&t/i&t
                              &t/button&t
                              &tdiv class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3"&t
                                &ta class="dropdown-item" href="javascript:void(0);"&tList&t/a&t
                                &ta class="dropdown-item" href="javascript:void(0);"&tManage&t/a&t
                              &t/div&t
                            &t/div&t
                          &t/div&t
                          &tspan class="fw-semibold d-block mb-1"&tUsers:&t/span&t
                          {%lblUserCount class="card-title mb-2"%}
                        &t/div&t
                      &t/div&t


I want the image to be static, as it is. But ideally clickable. Do I have to replace the entire IMG with an IW component? Or wrap it into an &tA&t&t/A&t (and then if I do, how do I link that to an IW button, for example)?

And with classes/styles in the HTML, how can I link a button (or anything) back to &tA&t? And then can I push styles/classes back to HTML controls (whether I do or do not map them to anything from code)? Like the "active" below, when the next item is clicked:

[...]
          &tul class="menu-inner py-1"&t
            &tli class="menu-item active"&t
              &ta href="index.html" class="menu-link"&t
                &ti class="menu-icon tf-icons bx bx-home-circle"&t&t/i&t
                &tdiv data-i18n="Analytics"&tDashboard&t/div&t
              &t/a&t
            &t/li&t

            &tli class="menu-item"&t
              &ta href="javascript:void(0);" class="menu-link menu-toggle"&t
                &ti class="menu-icon tf-icons bx bx-layout"&t&t/i&t
                &tdiv data-i18n="Layouts"&tLayouts&t/div&t
              &t/a&t
[...]


Or does the entire structure need to be replaced with a Tab control for this?

It really needs another Guide, it's a whole new field...