我应该如何将html5元素与我的网页的模态部分一起使用?

时间:2013-09-10 09:43:37

标签: html html5

就html来说,我是非常缺乏经验的,而对于html5来说则更少。

我有一个关于模态弹出窗口的问题 - 与使用javascript / ajax交互的页面部分,但不一定会一直显示在页面上。这些通常不在主html流程中 - 例如,我可能会将所有模态代码放在页面的末尾以保持可维护性。问题是 - 我是否应该使用html section标签或其他内容声明页面的这些块?

为了更清楚地了解我所描述的情况,我有一个应用程序页面。这包含许多部分(我这里不是指html5)。第一部分是进入页面的模态 - 如果您同意,则为“点击继续”部分。接下来的5个块属于阶梯式应用程序表单 - 使用多视图控件一次显示每个步骤。然后是另一个模态 - 一个UI块,然后是最终决策部分。

5 个答案:

答案 0 :(得分:2)

由于它们是模态的,并且出现在流程之外,因此最适合使用div。如果您确实想使用语义块,那么您使用的语句块将取决于内容是什么,以及它与页面其余部分的关系。以下文章可以帮助您做出决定:

编辑:添加了第3个链接,因为我现在有足够的代表这样做:-) yay!

答案 1 :(得分:1)

  

问题是 - 我应该将页面的这些块声明为部分或其他内容

HTML5的一大优势是它的可读性。如果您认为您的模态弹出窗口更好地用article标记来描述,那么请使用article。使用您认为最准确描述您的功能的标签。

例如,假设我有一个样本页面如下:

<html>
  <head></head>
  <body>
      <article>
         <!-- Some stuff here -->
      </article>
  </body>
</html>

我希望期望article标记的内容符合此定义:

  

article元素表示页面的一个组件,该组件由文档,页面,应用程序或站点中的自包含组合构成,并且旨在可独立分发或可重用,例如,在联合。这可以是论坛帖子,杂志或报纸文章,博客条目,用户提交的评论,交互式小部件或小工具,或任何其他独立的内容项目。

W3C Specification. The Article Element.

注意:在此上下文中,article旨在表示流内容。鉴于您的目标不是编写流内容(正如您所说),这不是一个好例子。从我提供的定义中可以清楚地看出这一点。

同样,如果我将article替换为section,我希望它符合此定义:

  

部分的示例可以是章节,选项卡式对话框中的各种选项卡式页面,或论文的编号部分。网站的主页可以分为几个部分,用于介绍,新闻和联系信息。

W3C Specification. The Section Element

如果我是你,我会查看规范并思考以下问题:

  • 我的内容对用户意味着什么?
  • 我的内容将如何呈现给其他程序员?
  • 使用这些内容是否能给我一个正确的语义提示?

答案 2 :(得分:1)

这取决于你的模态中的内容。

您可以拥有登录表单,订阅内容,广告,文章,另一个页面的框架,因此只有当它们实际上是页面的一个有趣部分时才使用<section>才有意义,例如,你有一篇文章,然后你想在一个模态框中显示 autor info ,然后我会说使用<section>是可以接受的。

总的来说,如果它是内容的一部分,那么听起来没问题,如果不是,你应该使用<div>

我也会说,没有人能够得到答案,因为它纯属自以为是,而且坦率地说并不重要。

答案 3 :(得分:1)

还有另一种合并模态的方法。由于它们依赖于JavaScript,您还可以通过AJAX加载弹出内容,而无需将它们放在文档流中。我最近开展的一个项目,首先为弹出内容(例如联系表单)呈现正常和完整HTML页面的链接。如果启用了JS,则会在链接中添加一个参数,以便仅通过AJAX加载没有标题,菜单和侧边栏的主要内容。

由于模态内容并不真正属于您的网站内容(如果它不应该是弹出窗口,而是在文档主要内容中),它不应该标记为某些section,{{ 1}}或main标记。而是使用article呈现弹出窗口,或使用div(如果您的项目可以接受)。

答案 4 :(得分:1)

对于模态使用什么标记并不重要,只要它适合目的(例如,不要使用<fieldset>)。通常我们会看到代表模态的<div>

您可以使用role属性来获取有关元素用途的语义信息。在这种情况下,role="dialog"是合适的。您可以在HTML5 here中找到有关role属性的更多信息。

另请注意ARIA属性:它们增强了可访问性。例如,aria-hidden="true"指定元素不可见。屏幕阅读器使用它来跳过内容。