HTML - Is there a short way to add many tags inside html?

HTML-CSS
#1

For practice purposes, I am trying to make a copy of website that picks a random R6 operator for you.
There are around 50 operators, and if I want to add and icon for all of them, do I have to make a div for every one of them, or is there a shorter way of doing such things?
I will give a sample code to show what I mean.

<article id="r6-randomizer">
            <div id="result"></div>
            
            <div id="buttons">
                <div id="defenders-button"></div>
                <div id="attackers-button"></div>
            </div>

            <div id="operator-icons">
                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>

                <div id="operator-card">
                    <img src="" alt="">
                </div>
            </div>
        </article>
#2

You don’t have to make a div for any of them at all. It depends on whether you want to group anything else with each image, such as text or a link. The easiest way to do this is by using JavaScript: put your operator data in an array and iterate through it using a loop to create all the HTML you need.

You’ll definitely want to change that id of ‘operator-card’ to a class, though. In HTML, ids are meant to identify a single, unique element.

#3

Thanks. That’s what I was doing while waiting for help :smiley:, making a function to add multiple elements. I just thought that this is a bad design, because it will use some cpu(or a couple of automated tag creation is not so demanding?)
Thanks for the ID, I forgot about the fact, that ID’s are for unique elements.

#4

check out Emmit. it comes with vscode by default and you can use the syntax in codepen.

eg.
to make 3 divs you just type div*3
to make a div with an id you type #someId

by the way if you have a div element that youre gong to use more than once you should use class instead of Id

#5