HTML的aside标签：在表单错误信息中使用它是否OK？

Question

我有一个表单，每个输入/元素都有错误消息。 我想到了以下使用<aside>标签的方法，并想知道大家的想法：

    <section class="fieldrow" id="rowJobTitle">

        <label for="txtJobTitle" id="lblJobTitle">
            <span>Job title:</span>
        </label>

        <input type="text" id="txtJobTitle" name="txtJobTitle">

        <aside id="errJobTitle" class="errormessage">
            <span role="alert">Please tell us your job title.</span>
        </aside>

    </section>

然后我将使用CSS来显示或隐藏<aside>中的错误，并使用一些JS来更改它。 我知道我可以使用标签并完成它，但是标签没有语义价值，并且我读到了所有有关<aside>的（短而模糊的）信息似乎都没有问题，但我希望能够得到确认或者有人尝试过并找到好的理由不这样做。谢谢，Si。

- simey.me

---

为什么不在输入标签中使用title属性？或者使用data属性？ - Spudley

Answer 1

所有主要浏览器都支持<aside>标签。

然而，可能有更加优雅的方法来实现此功能，<aside>对于您的意图并不特别语义化。根据HTML5规范：

aside元素表示页面中包含与周围内容有关系但可以被视为独立于该内容的内容部分。这些部分在印刷排版中通常表示为侧边栏。

您的错误并不真正独立于内容，因此选择它是相当不合适的。

您应该查看Twitter Bootstrap如何处理行内表单错误。

所有这些都是关于语义，因此本质上是主观的。如果对您有意义并且有效，则为什么不使用它呢？

编辑

阅读Rob提供的链接后，<aside> 看起来比我想象中更不合适。由于 <aside> 不是 <input> 的子元素，因此解析器不会认为它与该 <input> 相关。在这种情况下，我建议避免使用它。

MDN提供了一些用例，但你的情况并不适用：

它们通常包含诸如词汇表定义、广告、作者传记或在Web应用程序中的个人资料信息或相关博客链接等更松散相关的说明。

- Josh Smith

---

规格可能已经改变，所以我需要查看日期。请查看我的答案和链接。 - Rob

对于 Twitter Bootstrap 标记语言我也不是很确定，但你的回答其他部分都很好。+1 - Alohci

是的，我不确定<label>是否完全合适，但在我看来比<aside>更合适。 - Josh Smith

有些文章似乎说<aside>元素要么与文章相关，要么与整个页面相关... 其他文章则没有明确说明，是否有任何地方指出<aside>元素不能与其父级<section>元素相关？W3C HTML5规范表示它应该与文档的主要文本流相关链接，因此我想这可能是一个不好的用法... 你有什么其他建议吗？Twitter Bootstrap很不错... 但我想要更语义化的东西... 使用HTML来布局页面与我想要实现的相反。 :) - simey.me

我认为MDN的用例很有说服力（而你的似乎不太合适）：“它们经常包含侧面解释，如词汇定义、更松散相关的内容，如广告、作者传记，或在Web应用程序中，个人资料信息或相关博客链接。” https://developer.mozilla.org/en/HTML/Element/aside - Josh Smith

Answer 2

<aside>元素不受IE 8及更早版本支持。这意味着在这些浏览器中，您设置的任何样式都会丢失。您可以部分解决此问题，通过使用JavaScript代码“教”它们该元素，但这是否值得收益？到底预期获得什么？

从逻辑上讲，所描述的用法与HTML5语义不符。那里的描述很模糊，但我认为当显示并相关时，错误消息不能被描述为“次要的”；它真正是关键内容。它不是与其他内容“分离”的；相反，它表达了关于它的重要信息。

广告是<aside>的候选对象，以及轶事、历史注释或一般而言不一定与主要内容有关但具有某种联系的内容。

我没有看到任何软件（如搜索引擎、浏览器或浏览器插件）实际上利用了<aside>标记的证据。只是对可能发生的事情的猜测。

我认为整体设计存在根本性缺陷，使元素语义的问题变得更加理论化。当CSS或JavaScript被禁用时会发生什么？没错，即使用户根本没有输入或输入全部正确，用户始终会看到错误消息。

更好的方法，假设这是关于在客户端代码中检测到的错误，是将错误消息文本保留在JavaScript字符串中。当检测到错误时，将添加一个新元素或修改现有元素内容，以使错误消息可用；当错误已被纠正时，它将被清除。（这里不需要依赖CSS。）

这样，错误消息可以放置在字段之前、右侧或下方。使用哪些元素并不重要（搜索引擎不会看到它，浏览器也不太可能自行执行任何特殊操作），但<div><strong>...</strong></div>可能是一个不错的选择。

- Jukka K. Korpela

---

好帖子，我现在同意了，<aside>不是正确的标签，我认为一个普通的<span>就可以了。//回答问题：这不是麻烦，因为我已经使用了shiv，并且应用程序将针对启用了JS的IE7+进行定位。唯一的收益就是以聪明、直观和正确的方式处理事情。//回答后续问题：我将使用服务器端生成并通过ajax提供错误信息，以减轻页面加载负担，并为非JS提供备选方案。但这都与主要问题无关。:)再次感谢。 - simey.me

Answer 3

由于这与文章相关，因此上下文（最重要的部分）应该是可以接受的。我甚至认为这是aside的一个非常好的用法。请参见此处。

编辑：经过所有讨论，我认为没有适当的语义元素来完成此操作，最好使用通用的div元素。我们试图过度强制使用HTML5元素。

- Rob