web-dev-qa-db-fra.com

Balise HTML de côté vs balise div

Quelle est la différence entre la balise div et la nouvelle balise HTML5 aside?

W3Schools a une description très similaire pour les deux -

J'ai également vu de nombreux sites utiliser la balise aside où une balise div conviendrait parfaitement.

Bien que, lorsque je mette les deux en pratique, ils se comportent de la même manière, ainsi:

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

EXEMPLE DE TRAVAIL

Ma question est donc la suivante: quelle est la principale différence entre les deux? Quand faut-il utiliser l'un sur l'autre?

htmlhtml5
39
Fizzix

Réponse courte:

<div>tag définit une division générale ou une section en HTML. 

<aside>tag a les mêmes représentations qu'un div, mais contient un contenu qui est uniquement lié au contenu de la page principale.

Différence

Les deux ont le même comportement mais ont une signification différente logiquement. 

21
Jay Patel

Similitudes :

  • Les deux prennent également en charge les attributs d'événement et globaux en HTML.

  • Les éléments <aside> et <div> n'ont pas de rendu par défaut (ni de qualités de présentation). Vous devrez donc en faire un élément block et ajuster leur apparence et leur disposition avec les règles de la feuille de style. Par défaut, les navigateurs placent toujours un saut de ligne avant et après eux. Cependant, cela peut être changé avec CSS. La plupart des navigateurs affichent ces éléments avec les valeurs par défaut suivantes:

    div {
  display: block;
}

Différences

  • L'élément <aside> identifie le contenu qui est lié mais tangent au contenu environnant. En version imprimée, son équivalent est une barre latérale, mais ils ne peuvent pas appeler la barre latérale de l’élément, car placer quelque chose sur le «côté» est une description de présentation, pas de sémantique.
  • Selon HTML5, l'élément <aside> est un contenu de sectionnement; son contenu définit donc la portée des en-têtes et des pieds de page. Chaque élément Contenu de la section a potentiellement un en-tête et un contour. Lorsqu'un navigateur traverse un élément de section du document, il crée automatiquement un nouvel élément dans le plan du document.
  • L'élément <div> permet de créer un regroupement logique de contenu ou d'éléments sur la page. Cela indique qu'ils appartiennent à une sorte d'unité conceptuelle ou doivent être traités comme une unité par CSS ou JavaScript.

  • Il existe une différence entre HTML 4.01 et HTML5. La balise <aside> est nouvelle dans HTML5.

  • Toutes les versions de chaque navigateur prennent en charge l'élément <div>.

5
MMKarami

La seule différence pratique (du moins pour le moment) est que les anciens navigateurs ne reconnaissent pas aside du tout. Ils le traiteront comme indéfini et non comme un élément de bloc comme div. Les anciennes versions de IE ne vous permettent même pas de donner un style à un élément aside, bien qu'il existe des méthodes basées sur JavaScript pour résoudre ce problème.

La différence théorique est expliquée dans les brouillons HTML5 tels que l'actuel HTML5 LC . Notez que w3schools.com n'est une autorité d'aucune sorte. voir http://w3fools.com .

4
Jukka K. Korpela

Une balise div n'a pas de poids sémantique et peut contenir n'importe quel type de contenu. En HTML5, vous pouvez utiliser avantageusement les balises de section pour ajouter un poids sémantique. La balise de côté doit être utilisée pour du contenu qui n'est pas lié au contenu principal d'une page.

2
Nillervision

L'usage principal que je vois pour 

<aside>

est-ce que cela donne plus de clarté au code HTML. Vous pouvez reconnaître le lien entre un texte principal et un texte subordonné.

1
Jorge H

Tous les nouveaux éléments HTML5 ont pour but de faciliter l’indexation de vos données.

Avec la balise <aside>, il est très facile pour le programme d’identifier qu’il s’agit d’une donnée secondaire de la page.

0
srikanth_k