サイドノートと警告を表示するセマンティックHTMLタグはどれですか？

Question

サイドノートの並べ替えや、Djangoのチュートリアル： https://docs.djangoproject.com/en/dev/intro/tutorial01/のような「アドモンメーション」と呼ばれるオンラインチュートリアルを書いています（緑色の枠とノートアイコンを意味します）。

チュートリアルの特定の箇所で読むのに役立つかもしれないが、主なチュートリアルの流れの一部ではないノートの意味を追加するために、そのようなノートを囲むために使用すべきHTMLタグはどれですか？

注目すべきことに、タグはブロック要素を囲むことを許可する必要があります。

Answer 1

HTML5（すべての最新のブラウザでサポート）では、タグはasideです。 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-elementから

：

脇要素はさておき 要素の周囲コンテンツに対して接線方向に関連している コンテンツで構成され、ページのセクションを示し、そしてそのコンテンツとは別に考えることができました。 このセクションは、しばしば印刷されたタイポグラフィのサイドバーとして表されます。

要素は広告のため、NAV要素のグループのために、ページの主な内容は別に考えられている他の コンテンツのため、プル引用符や サイドバーのような印刷上の効果のために使用することができます。

括弧の代わりに灰色の要素を使用するのは適切ではありません。 これらはドキュメントのメインフローの一部です。

これはブロックレベルの要素であり、通常はブロックレベルの要素（通常はほとんどすべて）を囲みます。それは本質的に「セマンティックdiv」です。

Answer 2

私は受け入れられた答えはかなり正しいとは思わない。 HTML5 working draftによると、<aside>要素は、すべての場合、特定にサイドノートをマークアップするために使用さではなく、することができます：サイドノートでは、「は、コンテンツは別に考えることができる」場合

1. <aside>が適当ですはるかに長いニュース記事ではスイスの背景資料、長い記事では引用文を引用しています。 （W3Cドキュメントの例）
2. <aside>は、副注釈が "カッコ内の"の場合は適切ではありません。 W3Cには、それが意味するものの例はありません。狭い解釈は、かっこ内、カンマ間またはダッシュ間に置かれたものです。

あなたは厳密にW3C仕様を解釈したい場合は、すべてではないDjango tutorialでsidenotesのは<aside>でマークアップすることができます。たとえば、「」というタイトルのノートは、表示されているものと一致しません。は、コンテンツの横にコンテンツがないと意味をなさないため、実際にコンテンツとは別のものと見なすことはできません。おそらく、「このコードはどこに生きていますか？」も<aside>ではありません。コンテンツに関連付ける「このコード」が記述されています。

私の意見では、W3Cの定義は不必要に混乱し、制限的です。の辞書の定義は、以外は「メインのテーマやトピックからの一時的な離脱」であり、微妙な区別を導入するのではなく、そのスペックだけを固執する必要があります。もちろん、コードを簡単にするならば、すべてのサイドノートに<aside>を使用できない理由はありません。それを市民の不服従と考えてください。 :)

---

関連引用：

脇要素はさておき 要素の周囲コンテンツに対して接線方向に関連している コンテンツで構成され、ページのセクションを表し、かつ考えられますその内容とは別に このセクションは、しばしば印刷されたタイポグラフィのサイドバーとして表されます。

要素は広告のため、NAV要素のグループのために、ページの主な内容は別に考えられている他の コンテンツのため、プル引用符や サイドバーのような印刷上の効果のために使用することができます。

注：括弧の代わりにaside要素を使用することは、ドキュメントのメインフローの一部であるため、適切ではありません。