UI元素的语义HTML5

Question

使用HTML5，添加了许多其他元素来构建博客文章或长文本等文档。但是我遇到的问题是构建UI组件的语义方式 在典型的Web应用程序中，您有许多不同的组件，例如模态，按钮元素，交互表单，容器等。通常情况下，我看到这些内容仅使用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

HTML 5.1 的最后一个W3C工作草案于两天前，即4月13日发布，它是以语义为中心的＆＃34;：请参阅

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

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

  

仅使用div元素创建所有结构元素而非内容相关元素真的是语义吗？

不在我看来。即使没有引用＆＃34;媒体就是信息，所有内容都与内容有关，甚至＆＃34;开放＆＃34;并且＆＃34;关闭＆＃34;允许用户查看内容的按钮。

  

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

当然！像往常一样，有很多专有的前缀，只是为了让我们的生活更加繁忙。

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中（但是，如果这样做是合适的，则会有意见不同）。

HTML 5.1可能会有menu element和dialog element，在这种情况下可能会有用。