用于UI元素的语义HTML5

在HTML5中，添加了许多额外的元素来构建文档，如博客文章或长文本。但我遇到的问题是，如何用语义方式构造UI组件。
在一个典型的webapp上，您有许多不同的组件，例如modals、按钮元素、交互表单、容器等等。通常，我会看到那些东西仅仅使用

div

和

span

构建，或者错误地使用

页眉

、

页脚

和

导航

元素，我感觉自己遗漏了一些东西

仅使用

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>

福
额外的巴兹
×
?
输入您的barbaz

上一个W3C HTML 5.1工作草案于两天前，即4月13日发布，它是“以语义为中心的”：请参见

这是一篇有趣的阅读，同时等待着用最常见的浏览器实现所有这些新奇的东西

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

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

未来是否会有更多元化的元素选择

---

当然！像往常一样，为了让我们的生活更忙碌，我们使用了很多专有前缀。

忽略

div

和

span

元素（除了指定一些有意义的属性外，这些元素没有意义），您的代码片段包括：

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

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

<!-- content -->

<i>?</i>

<p>Enter your barbaz.</p>

现在，您可以为那些不属于本节主要内容的部分（不是本文档的，它只是关于本节！）添加

页眉
/
页脚
元素。

例如，您可以将最大化/关闭按钮括在
标题
中（但是，如果合适，意见会有所不同）

HTML5.1可能会有a和a，这在本例中可能很有用。
首先，我要感谢您提供了出色的答案。对于与内容无关的东西——我想说的完全是语义上的，只是有些组件你无法使用HTML5带给我们的以文本为中心的元素来准确描述；）您可以创建自己的元素：请参见-
标记如何？：-）我将把我的博客帖子放在这里：-）你能举个实际的例子吗？问题中的代码段只包含空的
div
元素，没有任何内容。@unor，请查看google搜索输入的标记，例如：。这可能是丑陋代码的极端情况，但有时事情会像这样发展。否则，请随意查看主要网站（Facebook、Gmail、Twitter等）并浏览其来源。不过，我会更新我的问题。主要网站的代码之所以丑陋还有另一个原因：它是为了打破阻止广告的模式（否则，没有它们，它们会变得很差）。@MarcoBernardini，我同意。尽管如此，我希望你能理解我的观点——HTML很快就会变得复杂，尤其是在大型项目中。据我所知，
部分
/
页眉
/
页脚
等只应在文本文档的上下文中使用，例如，对文章进行分段。至少，文档明确表示不将它们用作通用容器元素。我也不同意在字幕中使用
p
，毕竟这是一个段落。最后，我故意使用了很多
div
元素——有时候你需要它们来进行造型（例如定位）。这个例子并不完美，是的，但这并不是对实际问题的真实、一般的回答。（请不要误解我，谢谢你的广泛回答。我的评论听起来有点粗鲁，这是由于我的英语技能。我尊重你的观点！；-）@MoFriedrich:Sections:Section内容元素不仅仅用于“经典”文档；事实上，它们对于混合内容和应用程序的文档，甚至是典型的Web应用程序都特别有用。“通用容器”表示不使用它而不是
div
。一旦你有了一个标题，你就已经在使用一个部分了。通过使用分段内容元素，您可以将其显式化（HTML5鼓励！），而不是隐式化副标题：
p
在这里不是强制性的，您也可以使用
div
或
span
等，重要的是不要使用其他标题元素--@MoFriedrich：我知道添加
div
元素只是出于CSS/JS的原因，但这正是我的观点：为了确定标记是否具有语义，可以忽略这些。它们不会改变任何语义（除了前面提到的属性）。@MoFriedrich：哦，这并不意味着你不需要一个部分，仅仅因为你不使用标题。在HTML5.1中，可以对一些情态动词使用，它被定义为一个，即，一个剖切元素，其子元素在文档大纲中不起作用；它在本文中创建了自己的大纲，这对于那些模态是有意义的。
<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>