是否应该将 HTML 5 语义标记用于样式？

Posted 2023-02-24

【中文标题】是否应该将 HTML 5 语义标记用于样式？

【英文标题】：Should HTML 5 semantic markup be used for styling at all?

【发布时间】：2012-04-08 01:05:38

【问题描述】：

我必须承认 html5 语义标记让我感到困惑。我特别在谈论这些标签：

<header>
<nav>
<section>
<article>
<aside>
<footer>

使用语义元素为 UA 提供了通常无法从 <div> 获得的信息，但它们应该与 与 <div> 标签一起使用，还是可以/应该为语义标记设置样式直接地？

换句话说，正确的方法是什么？

这个：

<div id="content">
    <section>
        <h1>Lorem ipsum></h1>
        <p>Text</p>
    </section>
</div>

或者这个：

<section id="content">
    <h1>Lorem ipsum></h1>
    <p>Text</p>
</section>

【问题讨论】：

标签本身的样式。请记住，某些浏览器存在 HTML5 标签问题，因此您需要一个脚本并重置样式来注入新元素，ala modernizr.com

【参考方案1】：

我相信您的第一个示例在语义上是正确的，假设您在该 div 标记中会有更多的 section 标记。

div 标记将暗示页面的一部分用于内容，然后section 标记类似于帖子。

【参考方案2】：

如果你使用语义标记标签，你不应该同时使用分割标签来做同样的事情。语义标签是一些 div 标签的替代品。

div 标签当然还是有用的，因为当没有合适的语义标签时。

【参考方案3】：

由于新标签并未被浏览器普遍识别，即使作为样式候选者，使用div 和class 更安全。您还可以像以前一样选择仅使用div 和class，并且您现在或在可预见的将来都不会丢失任何东西。没有软件关心新标签的“语义”。

【讨论】：

截至 2019 年已过时

【参考方案4】：

第一个例子使用起来更安全。

<section>
  <h1>Lorem ipsum></h1>
  <p>Text</p>
</section>

是内容。

为了设置此内容的样式，您可以将其包装在容器中，例如。 div 带有样式钩子（类）并对其应用样式。