5

I'm doing mobile web application with HTML5 and jQuery mobile. HTML5 Mobile Boilerplate suggests this:

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

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

    </div>

    <footer>

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

On jQuery mobile (Section "Putting it together: Basic single page template") it is suggested

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

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

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

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

    </div>
</body>

Which way is more preferable? What is the difference between <header> and data-role="header"?

I did try googling for that, but no answer so far.

4

2 回答 2

5

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

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

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

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

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

于 2012-07-12T17:47:18.323 回答
2

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

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

于 2012-07-12T17:55:44.953 回答