移动 Web 应用程序：<header> 与 <div data-role="header">。有什么不同？答案

【问题标题】：Mobile Web App: <header> vs <div data-role="header">. What is the difference?移动 Web 应用程序：<header> 与 <div data-role="header">。有什么不同？
【发布时间】：2012-07-12 16:07:09
【问题描述】：

我正在使用 HTML5 和 jQuery mobile 开发移动 Web 应用程序。 HTML5 Mobile Boilerplate 建议：

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

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

    </div>

    <footer>

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

建议在jQuery mobile (Section "Putting it together: Basic single page template") 上

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

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

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

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

    </div>
</body>

哪种方式更可取？ <header> 和 data-role="header" 有什么区别？

我确实尝试过用谷歌搜索，但到目前为止没有答案。

【问题讨论】：

标签： html jquery-mobile mobile-application

【解决方案1】：

data-* attributes 用于为您网站上的脚本提供信息。除了向您的脚本提供数据之外，它们没有更广泛的语义目的，它只意味着您网站页面中的某些内容。

<header> 元素是一个 HTML5 元素，在the HTML5 specification 中被定义为“一组介绍性或导航帮助”。它在所有 HTML 文档中都意味着同样的事情。

您应该使用header，前提是您的目标受众拥有支持 HTML5 的浏览器，并且您标记的是标题。您还可以像这样使用data-* 属性：

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

它不应该对 jQuery mobile 使用什么元素产生任何影响。

【讨论】：

信不信由你，<header> 仅适用于截面元素。页面标题不应标记为<header>（根据规范）。
@VinnyBurgh 你能指出它在规范中的什么地方吗？规范中的一个示例（我链接到）使用header 作为body 的子级。
@VinnyBurgh w3.org/TR/html5/sections.html#sections - 部分的第一个元素：body 元素。

【解决方案2】：

data-* 属性不包含语义值；它只允许脚本访问标记中的数据。因此，data-role 属性（不要与role 属性混淆）仅与 jQuery Mobile 相关。

header 元素具有语义含义，但如果要在 jQuery Mobile 应用程序中使用它，则还需要使用 data-role="header"。

【讨论】：

谢谢。在阅读了几篇文章后，我掌握了 data-* 属性。