UI元素的语义HTML5

Question

在HTML5中，添加了许多额外的元素来构造文档，比如博客文章或长文本。但是，我遇到的问题是构造UI组件的语义方法。

在一个典型的webapp中，您有许多不同的组件，比如modals、按钮元素、interacitve表单、容器等等。通常，我看到这些东西只使用div和span构建，或者误用header、footer和nav元素，我觉得自己遗漏了一些东西。

仅仅使用div元素来创建所有的结构元素，而不是与内容相关的元素，这真的是语义吗？将来会否有更多元化的元素选择？

编辑：，这里是我的意思的一个简短的例子：

<div class="modal foo">
    <div class="inner wrapper">
        <div class="upper bar">
            <div class="inner">
                <div class="window-name">
                    <span class="upper heading">
                        <h1>Foo</h1>
                    </span>
                    <span class="lower heading">
                        <h3>Extra Baz</h3>
                    </span>
                </div>
                <div class="buttons">
                    <div class="button close"><span class="icon"><i>×<i></span></div>
                    <div class="button maximize"><span class="icon"><i class="fa fa-maximize"><i></span></div>
                </div>
            </div>
        </div>
        <div class="content well">
            <!-- 
                Whatever happens inside the modal window named foo.
                Pretty sure it needs many divs as well, though.
            -->
        </div>
        <div class="lower bar">
                <div class="buttons">
                    <div class="button help"><span class="icon"><i>?<i></span></div>
                </div>
                <span class="info">
                <p>Enter your barbaz.</p>
            </span>
        </div>
    </div>
</div>

Answer 1

上一份W3C HTML5.1工作草案是两天前，也就是4月13日发布的，它是“以语义为中心的”：

http://www.w3.org/TR/html51/Overview.html

这是一个有趣的阅读，同时等待所有这些花哨的东西由最常见的浏览器实现。

仅仅使用div元素来创建所有的结构元素，而不是与内容相关的元素，这是真正的语义吗？

在我看来不是。即使没有引用“媒体就是信息”，一切都与内容有关，甚至“打开”和“关闭”按钮都允许用户查看内容。

将来会否有更多元化的元素选择？

当然了!还有很多专利前缀，和往常一样，只是为了让我们的生活更忙碌。

Answer 2

忽略div和span元素(除了指定一些有意义的属性外，这些元素是没有意义的)，您的代码片段由以下内容组成：

<h1>Foo</h1>
<h3>Extra Baz</h3>

<i>×</i>
<i></i>

<!-- content -->

<i>?</i>

<p>Enter your barbaz.</p>

从语义的角度来看，这就是内容的样子。不太清楚这里代表的是什么。

• 对字幕使用标题元素(在本例中为h3) is not appropriate。(或者，如果它不是子标题，而是真正的新/自己的部分，请不要跳过标题级别；但我假设是前者。)使用一个标题元素，并使用p作为子标题，并将它们分组到header中。
• 使用i元素通过CSS is not appropriate添加图标。要么只使用CSS (在现有元素的帮助下)，要么，如果必须添加空元素，则使用span。
• 对按钮使用span/div元素是不合适的。使用button代替。
• 由于您已经在使用标题元素，it’s recommended将显式指定分段内容元素。根据这些内容的上下文，it may be article或aside (或者nav，如果是用于导航的话)，但在所有其他情况下都是section。

跟着这个，你会得到：

<section>
  <header>
    <h1>Foo</h1>
    <p>Extra Baz</p>
  </header>

  <button>Close</button>
  <button>Maximize</button>

  <!-- content -->

  <button>Help</button>

  <p>Enter your barbaz.</p>
</section>

现在，您可以为那些不属于本节的部分添加header/footer元素(不是本文档的，而是关于本节的！)主要内容。

例如，您可以将最大化/关闭按钮括在一个header中(但是，如果这样做的话，您的意见会有所不同)。

HTML5.1可能有一个 element和一个 element，在本例中可能很有用。