用於確認，錯誤和警告消息的語義HTML

對於用於確認，錯誤和警告消息的語義HTML，人們有何看法？用於確認，錯誤和警告消息的語義HTML

目前，我有喜歡簡單的東西：

<div class="message message-warning"> 
    <h3>Message Title</h3> 
    <p>Message text</p> 
</div>

藉此消息警告類獲取的消息確認或消息的錯誤取代如果消息是不同的類型。

只是有興趣，如果有更多的語義標記方式呢？

預先感謝

來源

2012-11-22 Sniffer

號有一個在HTML中沒有元素，它表示一個確認，錯誤或警告消息。

從技術上講，samp元素已被定義爲HTML 4.01和HTML 3.2中的「從程序，腳本等輸出樣本」，儘管最初在HTML 2.0中被定義爲「文字字符序列，間隔字體「，並在HTML5中被重新定義爲」從程序或計算系統輸出的樣本「。所以它的含義比較模糊，而且用處不大，所以使用它沒有實際意義。但有人可能會爭辯說，使用samp標記來接收來自程序的任何消息是可以接受的。它是一個文本級別的元素，所以您需要在h3和內部（任何）p內單獨使用它，或多或少地破壞結構。

也可以說這些消息是來自外部源的引用，所以它們可以被包裝在之內。

h3與其他一些標記的使用不是一個真正的語義問題，而是結構性的：這是在第三層嵌套中的某些內容的標題嗎？

來源

2012-11-22 18:21:54

如果您想要語義化，可以使用語義Web方法，通過爲消息和警告創建本體，並使用RDFa將其嵌入到HTML中。

來源

2012-11-22 19:28:00 Eric

我認爲strong element是這樣的消息適當的元素。

你可以使用幾個strong元素指明消息的重要性：

<strong>Login successfully.</strong> <!-- confirmation --> 
<strong><strong>Wrong login data.</strong></strong> <!-- warning/error -->

我會使用一個section element代替div，所以你可以使用一個h1作爲標題。現在，您可以將此塊放在文檔所需的任何位置，而無需調整標題級別。如果整個頁面出現嚴重錯誤，它應該是頁面上的第一個元素。

各種變化是可能的：

<section class="message message-error"> 
    <h1><strong><strong>Error:</strong> Wrong login data.</strong></h1> 
    <p>The username and/or password is wrong. Try …</p> 
</section> 

<section class="message message-error"> 
    <h1>Error</h1> 
    <p><strong><strong>Wrong login data.</strong></strong></p> 
    <p>The username and/or password is wrong. Try …</p> 
</section> 

<section class="message message-error"> 
    <strong><strong>Wrong login data.</strong></strong> 
</section> 

<section class="message message-error"> 
    <p><strong><strong>Wrong login data.</strong></strong> Try …</p> 
</section>

使用哪一個取決於消息的種類，如果確切的錯誤是知道的，如果提供額外的幫助文本，如果如果還是不行多個消息能來在同一時間。

請注意，您可能不希望爲適用於單個input元素的郵件使用標題（例如，當用戶未填寫必填字段或輸入錯誤內容等時），因爲這些錯誤消息應該在相應的label和resp。直接在input元素旁邊。

對於輔助功能，您應該看看WAI-ARIA。我認爲aria-live="assertive"可能是標記錯誤信息的適當方式，但我不太瞭解ARIA，因此在使用之前，您一定要詳細閱讀它。

來源

2012-11-23 01:43:30 unor

我可以建議<figure>？

摘自HTML5 Doctor（和它們，從W3C）：

該圖元素表示內容的單元，任選地與一個標題，即是自包含的，即典型地從單一的單元引用這是文檔的主要流程，可以從文檔的主流中移出，而不會影響文檔的含義。

讓我們先回答以下問題：

就是這樣一個對話框一個單位？是
這樣的對話是否獨立？是
可以將這樣的對話框從文檔移開而不影響文檔含義嗎？是

是的，它符合<figure>完美。

而且，<figcaption>特別適合標題欄/標題。

所以，我會用<figure>去，甚至沒有嘗試看得更遠：

<figure id="dialog-box" class="warning"> 
    <figcaption>Message Title</figcaption> 
    <p>Message text</p> 
</figure>

來源

2012-11-23 01:54:15 jolt

的<figure>想法很有趣，但我不認爲它適合在這裏。它缺少的是實際使用標籤的內容。根據規範，<figure>代表「內容單元」 - 表示可以選擇性地爲此內容提供標題的圖像，圖表，代碼塊等（<figcaption>）。如果說<figcaption>以外的郵件表示適當的內容單元，那將是一段時間。

在這種情況下，我們還應該謹慎使用<h#>標籤，因爲該消息是次要內容，並且可能不應該是文檔大綱的一部分。

根據revised spec，可以認爲<aside>是合適的。現在在<article>之外使用時，它被認爲是「切線內容」。

<strong>將適用於消息的「標題」，因爲它是消息的語義上更重要的部分，但不是文檔標題。因此，代碼可能看起來如此：

<aside class="warning-or-whatever"> 
    <strong>Message Title</strong> 
    <p>Message Text</p> 
</aside>

人們也可以說，因爲有專門爲這樣的功能創建什麼，一個老式的，語義上無意義的<div>可能是最好的元素。我想這歸結於你覺得你的信息是多麼「切合實際」。

感謝，傑夫

來源

2013-12-15 20:34:31

Alerts are one of the semantics that ARIA added to HTML，因爲有在「純」 HTML做的沒有直接的方法。因此：

<aside role="alert"> 
    <strong>Message Title<strong> 
    <p>Message Text</p> 
</aside>

我個人喜歡用<aside>作爲元素拍擊role上 - 它在技術上不是網頁內容的一部分，由Jeff Lindblom's answer描述。

具有這樣的「語義」 CSS選擇器是很容易的：

[role="alert"] { 
    font-size: 2em; /* or what have you */ 
}

來源

2016-03-03 16:06:35 Tigt

用於確認，錯誤和警告消息的語義HTML

回答

相關問題