Application Web Mobile: <header> vs <div data-role=“header”>. Quelle est la différence?

Je suis en train de faire application web mobile HTML5 et jQuery mobile.
HTML5 Mobile Standard suggère ceci:

<body>
  <div id="container">
    <header>

    </header>
    <div id="main" role="main">

    </div>

    <footer>

    </footer>
  </div> <!--! end of #container -->
</body>

Sur jQuery mobile (Section "montage de Base: unique modèle de page") il est suggéré

<body> 
    <div data-role="page">

        <div data-role="header"></div>

        <div data-role="content"></div>

        <div data-role="footer"></div>

    </div>
</body>

Qui est plus préférable?
Quelle est la différence entre <header> et data-role="header"?

J'ai essayer de googler, mais pas de réponse jusqu'à présent.

OriginalL'auteur trailmax | 2012-07-12

  1. 5

    La -* attributs sont de fournir des informations pour les scripts sur votre site web. Ils n'ont pas de sémantique plus large usage étranger à condition que les données de vos scripts, il signifie seulement que quelque chose dans votre page sur votre site.

    La <header> élément est un élément HTML5 qui est défini comme "un groupe d'une introduction ou d'aides à la navigation" dans la spécification HTML5. Il signifie la même chose dans tous les documents HTML partout.

    Vous devez utiliser header, fournir à votre public cible a HTML5 navigateurs et ce que vous êtes le balisage est un en-tête. Vous pouvez en plus utiliser data-* attributs comme ceci:

    <header data-role="header"></header>

    Il ne devrait pas vraiment faire une différence pour jQuery mobile quels sont les éléments qui sont utilisés.

    Croyez le ou non, <header> s'applique uniquement aux sectionnelles éléments. L'en-tête d'une page n'est pas censé être marqué comme <header> (selon les spécifications).
    Pouvez-vous où dans la spec, il est dit que? L'un des exemples dans la spec (qui je me suis lié d') utilise header comme un enfant de body.
    href="http://www.w3.org/TR/html5/sections.html#sections" >w3.org/TR/html5/sections.html#sections - premier élément qui est une section: la body élément.
    Si vous voulez vraiment être convaincu, allez à la WHATWG édition de la spécification, est-ce une source de vue et avoir un regard sur ce que le premier élément dans la body est.
    Merci. Figuré les mêmes résultats en trail et erreur.

    OriginalL'auteur robertc

  2. 2

    Un -* attribut contient aucune valeur sémantique; elle seule permet à des scripts d'accéder aux données à partir de l'annotation. Par conséquent, la data-role attribut (à ne pas confondre avec le rôle attribut) n'est pertinente que pour jQuery Mobile.

    La header élément a de sens sémantique, mais si vous êtes à l'utiliser jQuery Mobile de l'application, vous devrez également utiliser data-role="header".

    Merci. Après la lecture de quelques articles, je me suis accrocher des données* les attributs.

    OriginalL'auteur Inkbug