Is this proper semantic html?

I'm making a component for a website where I need to make a checklist with the different W3C guidelines. I currently use a form as a parent element with an article and different details/summary elements inside but I feel like this is not correct semantic HTML. Outside of the component I already use a and so I'm not worried about that. I just feel like I'm using the and elements wrong.

{#each principe.richtlijnen as richtlijn}


Richtlijn {richtlijn.index}


{richtlijn.titel}



{#each richtlijn.succescriteria as succescriterium}




Criteria {succescriterium.index} ({succescriterium.niveau})


{succescriterium.titel}



e.id === succescriterium.id)}
/>


{@html richtlijn.uitleg.html}

{/each}

{/each}




This is the current live link for the component:
https://dry-checklist-vervoerregio.vercel.app/ (It's the only component live because it's a school project).


Can anyone help me make my HTML more semantic?