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

HTML5.1 的最后一个 W3C 工作草案于两天前发布，即 4 月 13 日，现在是 "semantic-centered"：请参阅

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

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

Is it really semantic to create all structural, not content-related elements using the div element only?

我认为不是。即使不引用 "the media is the message"，一切都与内容有关，甚至 "open" 和 "close" 按钮允许用户查看内容。

Will there be a more diverse element choice in the future?

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

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。（或者，如果它不是副标题而是真正的 new/own 部分，则不要跳过标题级别；但我假设是前者。）使用一个标题元素，并使用 p 作为副标题, 并将它们分组到 header.
使用 i 元素通过 CSS is not appropriate 添加图标。要么仅使用 CSS（在现有元素的帮助下），要么，如果您必须添加空元素，请使用 span.
对按钮使用 span/div 元素是不合适的。请改用 button。
由于您已经在使用标题元素，因此 it’s recommended to explicitly specify a sectioning content element. Depending on the context of this content, 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 元素。
例如，您可以将 maximize/close 按钮包含在 header 中（但是，如果这样做合适，意见会有所不同）。

HTML 5.1 可能会有一个 menu element and a dialog element，这在这种情况下可能很有用。

UI 元素的语义 HTML5

Semantic HTML5 for UI elements

html

semantic-markup

仅使用 `div` 元素创建所有结构元素而不是与内容相关的元素真的是语义化的吗？以后会不会有更多样化的元素选择？

UI 元素的语义 HTML5

Semantic HTML5 for UI elements

html

semantic-markup

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

仅使用 `div` 元素创建所有结构元素而不是与内容相关的元素真的是语义化的吗？以后会不会有更多样化的元素选择？