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日發布，它是“以語義為中心的”：見

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 ） 是不合適的 。 （或者，如果它不是副標題但實際上是新的/自己的部分，請不要跳過標題級別;但我假設前者。）使用一個標題元素，並使用p作為子標題，並將它們分組在header 。

• 使用i元素通過CSS添加圖標是不合適的 。 要么只使用CSS（在現有元素的幫助下），要么如果必須添加空元素，請使用span 。

• 對按鈕使用span / div元素是不合適的。 請改用button 。

• 由於您已經在使用標題元素， 因此建議明確指定分區內容元素。 根據此內容的上下文， 它可能是 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元素和一個dialog元素 ，在這種情況下可能很有用。