html - 如何正确使用 HTML5 标签？

Question

作为网页设计的新手，我一直在徘徊，我应该如何正确使用 HTML5 标签。举一个具体的例子。我想在页面中间放一些内容。所以我在 HTML4 中编写。

<div class="content-container">
      <div class="left-content"></div>
      <div class="right-content"></div>
</div>

但是要正确使用 HTML5，我应该编写与 .

<div class="content-container">
          <article class="left-content"></article>
          <aside class="right-content"></aside>
</div>

我对正确使用标签感到非常困惑。如果这是一个愚蠢的问题，请原谅我。干杯！

score 8 · Accepted Answer

您需要了解 HTML5 语义元素。这是HTML5医生为您提供的快速易懂的解释 HTML5 元素流程图

但是，您可以使用关键字“ HTML5 语义”搜索更多详细信息。

score 0 · Accepted Answer

对于语法：不要关闭标签

</div>

它应该是：

<article class="left-content"></article>
<aside class="right-content"></aside>

这些标签用于告诉它们里面有什么类型的内容，例如，如果屏幕阅读器读取您的 html，它可以通过这些标签告诉它应该读取什么以及不应该读取什么。

score -1 · Accepted Answer

这真的很简单：当你打开一个标签时，你必须关闭它。

<div class="content-container">
      <article class="left-content"></article>
      <aside class="right-content"></aside>
</div>

有一些void 元素不允许有内容并且不需要结束标记：

area, base, br, col, command, embed, hr, img, input, keygen,
link, meta, param, source, track, wbr

例子：

<br>
<meta name="description" content="This is a meta tag">

您可以在此处找到所有 HTML5 元素及其含义的完整列表。

score -1 · Accepted Answer

部分原因是屏幕阅读器的支持。如果您有视力障碍（例如盲人）并且必须依靠屏幕阅读器来大声朗读内容，这有助于屏幕阅读器辨别实际内容，例如广告或页脚。

4 回答 4