CODEWITHSUNDEEP
html
Fizzix
Fizzix

Reputation: 24375

HTML aside tag vs div tag

What is the difference between the div tag and the new HTML5 aside tag?

W3Schools has a very similar description for the two -

I have also seen many sites use the aside tag where a div tag would be perfectly fine.

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?

Upvotes: 50

Views: 36247

Answers (6)

MMKarami
MMKarami

Reputation: 1204

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

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.

Upvotes: 8

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

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.

Difference

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

Upvotes: 28

srikanth_k
srikanth_k

Reputation: 2917

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

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

Upvotes: 0

Jorge H
Jorge H

Reputation: 352

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.

Upvotes: 1

Nillervision
Nillervision

Reputation: 441

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

Upvotes: 2

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The only practical difference (for now at least) is that old browsers do not recognize aside at 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 aside element, though there are JavaScript-based ways to fix this.

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.

Upvotes: 4

Related Questions