正确使用 HTML 语义元素答案

【问题标题】：Correct usage of HTML Semantic Elements正确使用 HTML 语义元素
【发布时间】：2022-11-18 03:15:57
【问题描述】：

我想知道在 HTML 中使用语义元素的“最佳”或最常见方式是什么。我知道它们是什么以及它们做什么，但我应该那样使用它们吗：

<section>
      <div class="info">
        ...

或者像那样：

<section class="info">
        ...

使用一个或另一个是错误的吗？两者实际上都是“有效的”吗？

另一个例子是标题元素：

<body>
    <header>
      <div class="logo">
        ...

或者我应该直接开始

<body>
    <header class="logo">
        ...

也许这个问题对于高级开发人员来说听起来很奇怪，但对于初学者来说可能并不明显，我也没有真正找到明确的答案。

我个人使用的是“长”版本，当我开始查看其他人的代码时开始质疑自己。

【问题讨论】：

任何一种方式都是有效的，但如果你想要语义 HTML，尽量避免使用 <div> 和 <span>，因为它们没有任何明确的含义。当您必须使用 <div> 或 <span> 时，描述性类就足够了。 IMO 少即是多，减少混乱使您的代码更易于阅读。

标签： html semantics

【解决方案1】：

两者都很好。这涉及到个人喜好。

技术方面是它会在两个嵌套元素之间添加一些填充。

【讨论】：

【解决方案2】：

我更喜欢第一个，因为它看起来更有条理，但老实说，它只是偏好。

<section>
  <div class="info">
    <h1>Information</h1>
  </div>
</section>

【讨论】：

【解决方案3】：

两者都有效。当使用语义 HTML 时，标签应该能够为您提供正在发生的事情的一些上下文。我更喜欢像这样构建我的页面：

<section class=blogPost>
<!-- section acts as a container for content -->
<h1>Introduction to HTML</h1>
<p> blah blah blah blah </p>
<!-- h1 and p are the actual content -->
</section>

您可以使用微格式为 HTML 文件中的每个标签使用类以增加语义，尽管语义标签通常只意味着您尝试使用特定标签而不是未指定的标签，例如 div 或 span。我会说你应该尽可能限制使用的标签数量，因为添加一个 div 标签只是为了给它一个类最终会让你更加困惑，特别是如果你可以直接将你的内容放在你的标题或部分标签中.

【讨论】：