在網(wǎng)站開發(fā)過程中我們經(jīng)常遇到這樣的問題“是用一個(gè)<section>還是一個(gè)<article>元素？” 每當(dāng)我必須在容器元素中對(duì)內(nèi)容進(jìn)行分組時(shí)，我不得不多次問自己這個(gè)問題。在本文中尼高和大家一起探索一種心智模型，可幫助您在編寫文檔時(shí)在和元素之間做出決定。您將探索對(duì)內(nèi)容進(jìn)行分組如何影響可訪問性，以及如何讓所有內(nèi)容都對(duì)用戶有用。


我在 Twitter 上的一次對(duì)話讓我研究了這個(gè)問題，并最終寫了下來。在與Grace Snow的對(duì)話中，我分享了一種編寫我喜歡使用的 HTML 的方法。我喜歡先寫出我的 HTML 結(jié)構(gòu)（框）并且沒有內(nèi)容，以確保我在編寫 HTML 時(shí)不會(huì)考慮樣式。然后她發(fā)現(xiàn)在我真誠(chéng)地嘗試語(yǔ)義化時(shí)，我可能對(duì)sectionand元素的使用有問題。事實(shí)證明，要在 和 之間進(jìn)行選擇section，article我們需要我們的內(nèi)容。事實(shí)上，要確定我們的內(nèi)容是否足夠縮小到這兩個(gè)，我們需要我們的內(nèi)容。我們可以建立一個(gè)心智模型，通過考慮我們的內(nèi)容，確保我們每次都做出最好的決定。


HTML 將兩個(gè)相關(guān)但不同的信息傳遞給用戶設(shè)備。首先是視覺呈現(xiàn)信息，它告訴設(shè)備默認(rèn)如何顯示文檔。第二個(gè)被稱為語(yǔ)義信息，或者簡(jiǎn)單地說，語(yǔ)義。它傳達(dá)了文檔中的“意義”，即每個(gè)元素的用途以及它們之間的關(guān)系。從這個(gè)意義上說，規(guī)范會(huì)說一個(gè)元素“代表”了一些東西。因此，當(dāng)您在規(guī)范中看到“表示”時(shí)，接下來是嵌入在元素中的語(yǔ)義信息。該h1元素揭示了這兩組信息的存在。元素的視覺呈現(xiàn)信息h1，當(dāng)瀏覽器遇到時(shí)，就是為什么它顯示為粗體并且比文檔的其余部分具有更大的字體大小。表示的語(yǔ)義信息h1是它是其部分的最高等級(jí)標(biāo)題。

有視力的用戶可以通過觀察視覺效果從瀏覽器等設(shè)備上看到語(yǔ)義。對(duì)于標(biāo)題，我們可以根據(jù)字體大小和粗細(xì)的差異，或者在列表的情況下，根據(jù)項(xiàng)目符號(hào)點(diǎn)標(biāo)記或編號(hào)標(biāo)記的存在進(jìn)行區(qū)分。對(duì)于不依賴視覺的用戶，語(yǔ)義只能通過允許他們請(qǐng)求以可能不是視覺的其他方式宣布語(yǔ)義信息的選項(xiàng)或設(shè)備來訪問。這些選項(xiàng)和設(shè)備通常稱為輔助技術(shù)。

HTML 規(guī)定了一些向?yàn)g覽器傳達(dá)隱含含義的元素，瀏覽器可以將這些元素提取到可訪問性 API中，從而使其可用于輔助技術(shù)，而輔助技術(shù)反過來將這種含義解釋給用戶。這個(gè)含義讓用戶對(duì)他們正在訪問的網(wǎng)頁(yè)有一種健康的感覺，例如文檔結(jié)構(gòu)和導(dǎo)航輔助，或者在本例中，文檔結(jié)構(gòu)和導(dǎo)航輔助。然而攜帶語(yǔ)義信息的不僅僅是直接包裝文本內(nèi)容的元素。用于對(duì)其他元素進(jìn)行分組的元素也具有一定的意義；在某些情況下，這可能意味著我們想要交流。