HTML 旁白标签与 div 标签

HTML aside tag vs div tag

提问by Fizzix

What is the difference between the divtag and the new HTML5 asidetag?

div标签和新的 HTML5aside标签有什么区别？

W3Schools has a very similar description for the two -

W3Schools 对两者的描述非常相似 -

• Aside
• Div

• 在旁边
• 分区

I have also seen many sites use the asidetag where a divtag would be perfectly fine.

我还看到许多网站使用aside标签，而div标签完全没问题。

Although, when I put them both into practise, they behave the same way, like so:

虽然，当我将它们都付诸实践时，它们的行为方式相同，如下所示：

<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>

WORKING EXAMPLE

工作实例

So my question is, what is the main difference between the two? When should one be used over the other?

所以我的问题是，两者之间的主要区别是什么？什么时候应该使用一个？

采纳答案by Jay Patel

Short answer:

简短的回答：

<div>tag defines a general division or section in HTML.

<aside>tag has the same representations as a div, but contains content that is only related to the main page content.

<div>标签定义了 HTML 中的一般分区或部分。

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

Difference

区别

Both have the same behavior but have a different meaning logically.

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

回答by MMKarami

Similarities:

相似之处：

• 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 blockelement 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;
  }
  

• 它们都支持 HTML 中的事件和全局属性。

• <aside>和<div>元素没有默认渲染（和演示质量）。因此，您需要将它们设为block元素并使用样式表规则调整它们的外观和布局。默认情况下，浏览器总是在它们前后放置一个换行符。但是，这可以通过 CSS 进行更改。大多数浏览器将使用以下默认值显示这些元素：

  div {
    display: block;
  }
  

Differences

差异

• The <aside>element identifies content that is related but tangential to the surrounding content. In print, its equivalent is a sidebar, but they couldn't call the element sidebar, because putting something on the “side” is a presentational description, not semantic.
• According HTML5, <aside>element is a Sectioning Content, so its content defines the scope of headings and footers. Each Sectioning Content element potentially has a heading and an outline. When a browser runs across a sectioning element in the document, it creates a new item in the document's outline automatically.
• The <div>element is used to create a logical grouping of content or elements on the page. It indicates that they belong together in some sort of conceptual unit or should be treated as a unit by CSS or JavaScript.

• It is a difference between HTML 4.01 and HTML5, The <aside>tag is new in HTML5.

• All versions of every browser support <div>element.

• 该<aside>元素标识与周围内容相关但相切的内容。在印刷品中，它的等价物是一个侧边栏，但他们不能称之为元素侧边栏，因为把一些东西放在“侧边”是一种表现性的描述，而不是语义。
• 根据 HTML5，<aside>元素是一个分段内容，因此它的内容定义了标题和页脚的范围。每个分节内容元素可能都有一个标题和一个大纲。当浏览器在文档中的分节元素上运行时，它会自动在文档的大纲中创建一个新项目。
• 该<div>元素用于在页面上创建内容或元素的逻辑分组。它表明它们属于某种概念单元，或者应该被 CSS 或 JavaScript 视为一个单元。

• 它是 HTML 4.01 和 HTML5 之间的区别，该<aside>标签是 HTML5 中的新标签。

• 每个浏览器支持<div>元素的所有版本。

回答by Jukka K. Korpela

The only practical difference (for now at least) is that old browsers do not recognize asideat all. They will treat it as undefined, not as a block element like div. Old versions of IE do not even let you style an asideelement, though there are JavaScript-based ways to fix this.

唯一的实际区别（至少现在是）是旧浏览器根本无法识别aside。他们会将其视为未定义，而不是像div. 旧版本的 IE 甚至不允许您为aside元素设置样式，尽管有基于 JavaScript 的方法可以解决此问题。

The theoretical difference is explained in HTML5 drafts such as the current HTML5 LC. Note that w3schools.com is not an authority of any kind; see http://w3fools.com.

理论上的差异在 HTML5 草案（例如当前的HTML5 LC ）中进行了解释。请注意，w3schools.com 不是任何类型的权威；见http://w3fools.com。

回答by Nillervision

A div tag has no semantic weight and can contain any type of content. In HTML5 you can advantageously use section tags instead to add semantic weight. The aside tag should be used for content that is not related to the main content of a page

div 标签没有语义权重，可以包含任何类型的内容。在 HTML5 中，您可以有利地使用部分标签来添加语义权重。side 标签应该用于与页面主要内容无关的内容

回答by Jorge H

The main use that I see for

我看到的主要用途

<aside>

is that this is giving more clarity to the HTML code. You might recognize the link between a main text and a subordinate text.

是因为这使 HTML 代码更加清晰。您可能会认出主要文本和从属文本之间的链接。

回答by srikanth_k

All HTML5 new elements intention is to make it easier to index your data.

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

With <aside>tag, it's very easy for program to identify that it is a aside data of the page.

有了<aside>标签，程序很容易识别出它是页面的备用数据。