non semantic and semantic HTML [duplicate] - html

Question

This question already exists:
non-semantic html code to semantic code html [closed]
Closed 3 years ago.
I currently have the HTML and CSS code below where I have used divs for different elemenets within the webpage. You can run the code to see the output below. I have been told by my lecturer that it is not semantic and need to change the divs to main, section, article etc but i'm not entirely sure how to go about doing this with the HTML and CSS that I have posted below. Can you still add classes to main, section etc?
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font:15px/1.5 Arial, Helvetica, sans-serif;
}
/*box display*/
.box_content{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/*box sizing*/
.box_content .box{
position: relative;
width: 350px;
padding: 30px;
background:#2a333b;
box-shadow: 0px 20px 25px rgba(0,0,0,.2);
border-radius: 4px;
margin: 30px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
/*number icons*/
.box_content .box .icon{
position: relative;
width: 80px;
height: 80px;
color: #fff;
background: #000;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 50%;
font-size: 40px;
font-weight: 700;
transition: 1s;
}
/*icon colouring*/
.box_content .box .icon{
box-shadow: 0 0 0 #4eb1ba;
background: #4eb1ba;
}
/*hovering*/
.box_content .box:hover .icon{
box-shadow: 0 0 0 400px #4eb1ba;
}
/*position content*/
.box_content .box .content{
position: relative;
z-index: 1;
transition: 0.5s;
}
/*title color*/
.box_content .box .content {
color: #fff;
}
/*paragraph sizing*/
.box_content .box .content p{
margin: 10px;
padding: 0;
}
/*heading size*/
.box_content .box .content h1{
margin: 10px;
padding: 0;
font-size: 25px;
}
/*links- read more*/
.box_content .box .content a{
display: inline-block;
padding:10px 20px;
background: #2a333b;
color:#fff;
border-radius: 4px;
text-decoration: none;
font-weight: 500;
margin: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
*/
<div class="box_content">
<div class="box">
<div class="icon">01</div>
<div class="content">
<h1>Intro to Business Management</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
<div class="box">
<div class="icon">02</div>
<div class="content">
<h1>Digital Identity</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
<div class="box">
<div class="icon">03</div>
<div class="content">
<h1>Information Systems & Databases</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
</div>