Какой семантический HTML-тег для отображения примечаний и замечаний?

Question

Я пишу онлайн-учебник с какими-то дополнительными заметками или, как их называют, «предостережениями», похожими на те, что описаны в учебнике по Django: https://docs.djangoproject.com/en/dev/intro/tutorial01/ (я имею в виду поля с зеленой рамкой и значком заметки).

Какой HTML-тег я должен использовать для включения таких заметок, чтобы добавить семантическое значение заметки, которая может быть полезна для чтения в данной точке учебного пособия, но не является частью основного учебного потока?

Примечательно, что тег должен позволять заключать в себе блочные элементы.

Answer 1

Я считаю, что принятый ответ не совсем правильный.В соответствии с рабочим проектом HTML5 элемент <aside> может использоваться для разметки дополнительных примечаний в некоторых, но не во всех случаях:

1. <aside> подходит, еслипримечание « можно рассматривать отдельно от содержания », например, справочные материалы о Швейцарии в гораздо более длинном новостном материале или цитату из более длинной статьи.(примеры из документа W3C)
2. <aside> не подходит, если примечание « в скобках ».W3C не дает примеров того, что это значит.Узкая интерпретация - это все, что заключено в скобки, между запятыми или между тире.

Если вы хотите строго интерпретировать спецификацию W3C, не все sidenotes в Django tutorial можно пометить с помощью <aside>.Например, заметка под названием « Не соответствует тому, что вы видите? », на самом деле не может считаться отдельной от контента, поскольку она не имеет смысла без контента рядом с ним.Можно утверждать, что « Где должен находиться этот код? » также не является <aside>, поскольку в нем упоминается «этот код», который связывает его с контентом.

На мой взгляд,Определение W3C излишне запутанно и ограничительно.Словарное определение в стороне является «временным отходом от основной темы или темы», и спецификация должна просто придерживаться этого, а не вводить тонкие различия.Конечно, нет причины, по которой вы не можете использовать <aside> для всех sidenotes, если это делает ваш код проще.Думайте об этом как о гражданском неповиновении.:)

---

Соответствующая цитата:

Элемент aside представляет собой раздел страницы, состоящий из контента, который тангенциально связан с контентом вокруг элемента aside, и которыйможно рассматривать отдельно от этого содержания.Такие разделы часто представлены как боковые панели в печатной типографии.

Элемент может использоваться для типографских эффектов, таких как цитаты или боковые панели, для рекламы, для групп элементов навигации и для другого содержимого, которое считается отдельным отосновное содержимое страницы.

Примечание. Нельзя использовать элемент aside только для скобок, поскольку они являются частью основного потока документа.

Answer 2

В HTML5 (поддерживается всеми современными браузерами) тег имеет значение aside.

From http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element:

Элемент aside представляет раздел страницы, состоящий изконтента, который косвенно связан с контентом вокруг стороннего элемента и который можно рассматривать отдельно от этого контента.Такие разделы часто представлены в виде боковых панелей в печатной типографии.

Элемент может использоваться для типографских эффектов, таких как цитаты или боковые панели, для рекламы, для групп элементов навигации и для другого контента, который считается отдельным отОсновное содержимое страницы.

Нельзя использовать элемент aside только для скобок, поскольку они являются частью основного потока документа.

Это блок-элемент уровня и заключить в него все, что может обычно использовать элемент уровня блока (то есть почти все).По сути, это «семантический div».