非语义和语义HTML

我现在有下面的HTML和CSS代码，在这里我为网页中的不同元素使用了div。您可以运行代码以查看下面的输出。我的讲师告诉我，这不是语义，需要将div改为main、section、article等，但我不完全确定如何使用下面发布的HTML和CSS来实现这一点。你还能把类添加到main、section等吗

*{
框大小：边框框；
}
身体{
保证金：0；
填充：0；
字体：15px/1.5 Arial，Helvetica，无衬线；
}
/*盒式显示器*/
.box_内容{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
/*盒子尺寸*/
.box\u内容.box{
位置：相对位置；
宽度：350px；
填充：30px；
背景：#2a333b；
盒影：0px20px25pxRGBA（0,0,0,2）；
边界半径：4px；
利润率：30像素；
框大小：边框框；
溢出：隐藏；
文本对齐：居中；
}
/*数字图标*/
.box\u content.box.icon{
位置：相对位置；
宽度：80px；
高度：80px；
颜色：#fff；
背景：#000；
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
边界半径：50%；
字体大小：40px；
字号：700；
过渡：1s；
}
/*图标着色*/
.box\u content.box.icon{
盒影：0#4eb1ba；
背景：#4eb1ba；
}
/*盘旋*/
.box\u content.box:悬停图标{
盒影：0 400px#4eb1ba；
}
/*职位内容*/
.box\u content.box.content{
位置：相对位置；
z指数：1；
过渡：0.5s；
}
/*标题颜色*/
.box\u content.box.content{
颜色：#fff；
}
/*段落大小*/
.box\u content.box.content p{
利润率：10px；
填充：0；
}
/*抽穗大小*/
.box\u content.box.content h1{
利润率：10px；
填充：0；
字体大小：25px；
}
/*链接-阅读更多*/
.box\u content.box.content a{
显示：内联块；
填充：10px 20px；
背景：#2a333b；
颜色：#fff；
边界半径：4px；
文字装饰：无；
字号：500；
利润率：20px；
盒影：0 2px 5px rgba（0,0,0,2）；
}
*/

01
企业管理导论
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

02
数字身份
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

03
信息系统与数据库
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

您可以向任何元素添加类。请不要再问刚刚结束的问题。