HTML旁边标记与div标记

Question

div标签和新HTML5 aside标签之间有什么区别？

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

• 在旁边
• DIV

我也看到很多网站使用aside标签,div标签完全没问题.

虽然,当我把它们都付诸实践时,它们的行为方式相同,如下:

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

工作实例

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

Answer 1

简短回答:

<div> tag定义HTML中的一般部门或部分.

<aside> tag具有与div相同的表示形式,但包含仅与主页面内容相关的内容.

区别

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

Answer 2

相似之处:

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

• <aside>和<div>元素没有默认渲染(和演示质量).因此,您需要将它们作为block元素并使用样式表规则调整其外观和布局.默认情况下,浏览器始终在它们之前和之后放置换行符.但是,这可以通过CSS更改.大多数浏览器将使用以下默认值显示这些元素:

  div {
    display: block;
  }
  

差异

• 该<aside>元素标识的相关内容,但切向周围的内容.在印刷品中,它的等价物是侧边栏,但它们无法调用元素侧边栏,因为在"侧面"放置一些东西是一种表现形式的描述,而不是语义.
• 根据HTML5,<aside>元素是一个分段内容,因此其内容定义了标题和页脚的范围.每个Sectioning Content元素都可能包含标题和大纲.当浏览器在文档中的分区元素上运行时,它会自动在文档的大纲中创建一个新项目.
• 该<div>元素用于在页面上创建内容或元素的逻辑分组.它表明它们在某种概念单元中属于一起,或者应该被CSS或JavaScript视为一个单元.

• 它是HTML 4.01和HTML5之间的区别,<aside>标记是HTML5中的新标记.

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