Question

我正在使用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"之间有什么区别？

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

Answer 1

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

<header>元素是HTML5元素，其定义为the HTML5 specification中的“一组介绍性或导航辅助工具”。它在所有HTML文档中都是一样的。

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

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

对于jQuery mobile，使用哪些元素应该没有任何区别。

Answer 2

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

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

移动Web应用程序：<header> vs <div data-role =“header”>。有什么区别？</div> </header>

2 个答案: