HTML语义元素的正确用法

js81xvg6 于 2022-11-20 发布在其他

关注(0)|答案(4)|浏览(137)

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

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

或类似的：

<section class="info">
        ...

用一个或另一个是错的吗？两者都是“有效的”吗？
另一个例子是header元素：

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

还是直接从

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

也许这个问题对高级开发人员来说听起来很奇怪，但对初学者来说可能并不明显，我也没有真正找到一个明确的答案。
我个人使用的是“长”版本，当我开始查看其他人的代码时，我开始质疑自己。

Html

来源：https://stackoverflow.com/questions/74479435/correct-usage-of-html-semantic-elements

4条答案

按热度按时间

pinkon5k1#

两个都好。这是个人喜好。
技术方面是，它将在两个嵌套元素之间添加一些填充。

赞(0）回复(0）举报 2022-11-20

mftmpeh82#

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

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

赞(0）回复(0）举报 2022-11-20

nr7wwzry3#

两者都是有效的。当使用语义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标记只是为了给予它一个类最终会使您更加困惑。特别是如果您可以直接将内容放在header或section标记中。

赞(0）回复(0）举报 2022-11-20

smdncfj34#

两个都很好。但是如果我应该读其他人的代码，我更喜欢像这样的代码。

<body>
<header class="logo">

读取第二个代码：

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

您需要仔细地扫描类名，从样板文件中挑选出它们。<div...>

赞(0）回复(0）举报 2022-11-20

我来回答

HTML语义元素的正确用法

4条答案

相关问题

热门标签

最新问答