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 -

• Aside
• Div

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?

Solution 1:

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.

Solution 2:

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.