HTML aside tag vs div tag

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


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.


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.


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.

Tags:

Html

Recent Posts