HTML в сторону тега vs div tag

В чем разница между тегом div и новым тегом HTML5 aside?

W3Schools имеет очень похожее описание для двух -

Я также видел, что многие сайты используют тег aside, где тег div будет отлично.

Хотя, когда я применяю их к практике, они ведут себя одинаково, например:

<aside>
    <h4>This is a heading</h4>
    <p>This is a very short paragraph.</p>
</aside>

<div>
    <h4>This is a heading</h4>
    <p>This is a very short paragraph.</p>
</div>

РАБОЧИЙ ПРИМЕР

Итак, мой вопрос в том, в чем основное отличие между ними? Когда нужно использовать друг друга?

Ответ 1

Краткий ответ:

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

Разница

Оба имеют одно и то же поведение, но имеют логический смысл.

Ответ 2

Единственное практическое отличие (по крайней мере сейчас) состоит в том, что старые браузеры вообще не распознают aside. Они будут рассматривать его как undefined, а не как элемент блока, например div. Старые версии IE даже не позволяют вам стиль элемента aside, хотя есть способы исправить это на основе JavaScript.

Теоретическая разница объясняется в черновиках HTML5, таких как текущий HTML5 LC. Обратите внимание, что w3schools.com не является авторитетом любого рода; см. http://w3fools.com.

Ответ 3

Тег div не имеет семантического веса и может содержать любой тип содержимого. В HTML5 вы можете использовать теги секций вместо этого, чтобы добавить семантический вес. Тег в стороне должен использоваться для контента, не связанного с основным содержимым страницы

Ответ 4

Основное использование, которое я вижу для

<aside>

заключается в том, что это дает большую ясность HTML-коду. Вы можете распознать связь между основным текстом и подчиненным текстом.

Ответ 5

Все новые элементы HTML5 намерены упростить индексирование ваших данных.

С тегом <aside> для программы очень просто определить, что это вспомогательные данные страницы.

Ответ 6

Сходства:

Оба они также поддерживают Event и Global Attributes в HTML. Элементы
<aside> и <div> не имеют рендеринга по умолчанию (и качества представления). Поэтому вам нужно будет сделать их элементом block и настроить их внешний вид и макет с правилами таблицы стилей. По умолчанию браузеры всегда размещают разрыв строки до и после них. Однако это можно изменить с помощью CSS. Большинство браузеров будут отображать эти элементы со следующими значениями по умолчанию:
```
div {
  display: block;
}
```

Различия

Элемент <aside> идентифицирует контент, связанный, но касательный к окружающему контенту. В принтере его эквивалент - это боковая панель, но они не могли вызвать боковую панель элемента, потому что помещение чего-то на "стороне" является презентационным описанием, а не семантическим.
В соответствии с HTML5 элемент <aside> является разделяющим контентом, поэтому его содержимое определяет область заголовков и нижних колонтитулов. Каждый элемент Разделение содержимого может иметь заголовок и контур. Когда браузер проходит через элемент секционирования в документе, он автоматически создает новый элемент в контуре документов.
Элемент <div> используется для создания логической группировки содержимого или элементов на странице. Это указывает на то, что они принадлежат друг другу в какой-то концептуальной единице или должны рассматриваться как единица с помощью CSS или JavaScript.
Это различие между HTML 4.01 и HTML5, тег <aside> является новым в HTML5.
Все версии браузеров поддерживают элемент <div>.