HTML aside 标签与 div 标签的区别

Question

HTML aside 标签与 div 标签的区别

html

47

div标签和HTML5中的新aside标签有什么区别？

W3Schools对这两个标签有非常相似的描述-

我也看到许多网站在div标签可以使用的情况下，使用了aside标签。

虽然，当我将它们都实践时，它们的表现方式是相同的，就像这样：

<aside>
    <h4>This is a heading</h4>
    <p>This is a very short paragraph.</p>
</aside>

<div>
    <h4>This is a heading</h4>
    <p>This is a very short paragraph.</p>
</div>

示例演示

我的问题是，它们之间的主要区别是什么？什么情况下应该使用其中之一？

- Fizzix

6个回答

8

相似之处:

Both of them also supports the Event & Global Attributes in HTML.
<aside> and <div> elements have no default rendering (and presentation qualities). So you will need to make them a block element and adjust their appearance and layout with style sheet rules. By default, browsers always place a line break before and after them. However, this can be changed with CSS. Most browsers will display these elements with the following default values:
```
div {
  display: block;
}
```

区别

<aside>元素标识与周围内容相关但离题的内容。在打印中，它的等价物是侧边栏，但他们不能称之为侧边栏，因为将某些内容放在“侧边”上是一种呈现描述，而不是语义。
根据HTML5规范，<aside>元素是分区内容，因此其内容定义了标题和页脚的范围。每个分区内容元素可能具有标题和大纲。当浏览器在文档中遇到分区元素时，它会自动创建一个新的条目在文档的大纲中。
<div>元素用于在页面上创建内容或元素的逻辑分组。它表示它们在某种概念单元中属于一起或应该由CSS或JavaScript视为单元。
HTML 4.01和HTML5之间的区别是，<aside>tag是HTML5中的新元素。
所有版本的所有浏览器都支持<div>元素。

- MMKarami

4

目前唯一实际的区别是，旧版浏览器完全不识别aside。它们将其视为未定义，而不是像div那样的块元素。旧版IE甚至不允许您为aside元素设置样式，但有基于JavaScript的方法可以解决这个问题。

理论上的区别在HTML5草案中有所解释，例如当前的HTML5 LC。请注意，w3schools.com不是任何权威机构，请参阅http://w3fools.com。

- Jukka K. Korpela

2

标签没有任何语义权重，可以包含任何类型的内容。在HTML5中，使用

标签来增加语义权重会更好。而

- Nillervision

我只是想指出aside元素适用于与主内容无直接关系的内容。从规范来看，“该元素可用于排版效果，如拉引语或侧边栏、广告、导航元素组以及其他被视为与页面主内容不同的内容。” https://www.w3.org/TR/html5/sections.html#the-aside-element - Nillervision

1

我认为主要用途是

<aside>

这样做可以使HTML代码更加清晰明了。您可能会注意到主要文本和下级文本之间的联系。

- Jorge H

0

所有HTML5新元素的目的是使数据更易于索引。

使用

- srikanth_k

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jaykumar Patel · Accepted Answer

简短回答：

<div> 标签在HTML中定义了一个常规的部分或区块。

<aside> 标签与 div 具有相同的表示方式，但仅包含与主页面内容相关的内容。

区别

两者行为相同，但在逻辑上具有不同的含义。