div 和语义标记用法

Question

我是HTML新手。已经学习了 2 个月 + ，我仍然对最">实用"的编码方式感到困惑，尽管我知道我不应该过度思考它。

问题 - 对于下面的示例，我仍然需要一个div id="header"，因为有一个标头 class="header">？是不是因为div在样式方面的灵活性，如果我下次碰巧添加/样式化了它？我确实看到 Freecodecamp 项目网站示例有一个语义标签，如嵌套在非语义div 中的标头标签。所以我也跟着走。

至于CSS，我从不为div id="header">设置任何样式。我问这个问题是因为它觉得div 有点多余，我认为，更少的标签和代码使编码更清晰、更清晰？

.logo {
margin: 20px 0 0 20px;
}
.logo img {
max-width: 230px;
}
header {
display: flex;
font-weight: 700;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
justify-content: space-around;
align-items: baseline;
}

<!-- Header Wrap-->
<div id="header">
<!-- Logo-->
<header class="header">
<div class="logo"><a href="#"><img src="../t/img/b.png" alt="logo" /></a></div>
<!--Navigation-->
<nav class="header-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>

Answer 1

使用div 时，您可以使用类设置其样式。对于结构中的单个标头标记，不需要类。