如何正确使用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>

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

Answer 1

您需要了解HTML5语义元素。以下是HTML5 doctor为您提供的快速易懂的解释

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

Answer 2

语法：不要用

关闭标签

</div>

应该是：

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

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

Answer 3

原因部分是屏幕阅读器的支持。如果您有视力障碍（例如失明）并且不得不依赖屏幕阅读器来大声朗读内容，这有助于屏幕阅读器识别实际内容和广告或页脚。

Answer 4

这很简单：打开标签时必须关闭它。

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

有些void elements不允许包含内容且不需要结束标记：

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元素的完整列表及其含义here。