Я расскажу вам основное отличие, если, исходя из его семантического значения , он служит для помощи SEO (позиционирование в поисковых системах).
Что касается свойств, то они работают почти на 100% одинаково, оба являются блочными элементами и не имеют никакой разницы. Но он служит для того, чтобы сделать разделение разделов на вашем сайте более оптимальным.
В прошлом раздел статьи кодировался бы следующим образом:
<div class="productos">
<div class="producto">
<!-- Aqui iria el codigo de cada uno de tus productos -->
</div>
</div>
Как видите, все разделено div'ами. Если мы изменим их на новые семантические теги, которые предоставляет нам HTML5, это будет выглядеть примерно так:
<section class="productos">
<article class="producto">
<!-- Aqui el codigo de tu producto -->
</article>
</section>
На самом деле он имеет гораздо больше семантического смысла и имеет точно такие же свойства, как и старый <div>.
Существуют и другие семантические метки, такие как <aside>, <em>, <strong>, <main>и т. д.
Согласно спецификации элемент sectionпредназначен для:
Элемент section представляет общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.
Что мы можем перевести как:
Элемент sectionпредставляет общий раздел документа или приложения.section
Он показывает вам в качестве примеров:
главы
пронумерованные разделы диссертации
Содержание веб-страницы может быть разделено на несколько разделов.
ДЕЛ
В то время как если из того же ресурса мы видим, что div:
Элемент div вообще не имеет особого значения. Он представляет своих детей. Его можно использовать с атрибутами class, lang и title для разметки семантики, общей для группы последовательных элементов. Его также можно использовать в элементе dl, оборачивая группы элементов dt и dd.
Что можно перевести как:
Элемент divвообще не имеет специального значения, вы можете применить такие атрибуты, как: классы, язык и название, чтобы придать семантическое значение сгруппированным в нем элементам.
Я рекомендую вам прочитать этот ресурс , чтобы дополнить аспект использования семантических тегов ( и больше, чем ответ там, ссылка, которая существует в нем, чтобы углубить )
В конце концов, вы должны использовать sectionв соответствии с их определением существования на divs.
Как это работает?
Я расскажу вам основное отличие, если, исходя из его семантического значения , он служит для помощи SEO (позиционирование в поисковых системах).
Что касается свойств, то они работают почти на 100% одинаково, оба являются блочными элементами и не имеют никакой разницы. Но он служит для того, чтобы сделать разделение разделов на вашем сайте более оптимальным.
В прошлом раздел статьи кодировался бы следующим образом:
Как видите, все разделено div'ами. Если мы изменим их на новые семантические теги, которые предоставляет нам HTML5, это будет выглядеть примерно так:
На самом деле он имеет гораздо больше семантического смысла и имеет точно такие же свойства, как и старый
<div>
.Существуют и другие семантические метки, такие как
<aside>
,<em>
,<strong>
,<main>
и т. д.Надеюсь, я помог.
Я дополню это:
РАЗДЕЛ
Согласно спецификации элемент
section
предназначен для:Что мы можем перевести как:
Он показывает вам в качестве примеров:
ДЕЛ
В то время как если из того же ресурса мы видим, что
div
:Что можно перевести как:
Итак, как вы видите:
divs
контейнерыРазница ценится при использовании их на мобильном телефоне.
Вы увидите, как
div
он размещается в любом месте HTML.Он
section
стоит по бокам.