{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"eroet"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":56,"offset":66}],"inlineStyleRanges":[{"length":50,"offset":0,"style":"ITALIC"},{"length":14,"offset":51,"style":"ITALIC"},{"length":87,"offset":66,"style":"ITALIC"}],"text":"Данный материал является вольным переводом статьи:\nIre Aderinokun SECTIONING CONTENT IN HTML5 - DIV OR SECTION OR ARTICLE? + добавлен материал от автора.","type":"unstyled","key":"6ltb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML5 принес нам семантику в код. Идея в том, что документ должен быть структурирован и теги должны передавать смысл.","type":"unstyled","key":"6dpm6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теги

были введены чтобы сделать блок с контентом более значимым, чем просто

. Но в каком случае мы должны использовать эти новые элементы и когда обычный

предпочтительнее?","type":"unstyled","key":"1dlvv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обзор элементов","type":"header-two","key":"b641s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DIV","type":"header-three","key":"es96c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент

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

совершенно бессмысленно для скрин ридеров, поэтому пользоваться данным методом нужно с осторожностью.","type":"unstyled","key":"6fuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы настоятельно рекомендуем обращаться к элементу div только в крайнем случае, когда больше никакие другие элементы не подходят.","type":"blockquote","key":"5mhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"Рекомендация W3C","type":"unstyled","key":"el8sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент

чаще всего используется как контейнер для других элементов.","type":"unstyled","key":"2a6ml"},{"data":{"image":{"id":"5df63b339515ee00b1ad2b44"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1av11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b2gi2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SECTION","type":"header-three","key":"a1h0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент

применяется к общему разделу контента, который может быть сгруппирован семантически.","type":"unstyled","key":"ahtpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Главное правило заключается в том, что элемент section уместно использовать только тогда, когда его содержимое может быть явно сгруппировано.","type":"blockquote","key":"fbhhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"Рекомендация W3C","type":"unstyled","key":"8f19j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cодержимое тега

имеет смысл контент внутри него сгруппирован и имеет «тему». «Тему» необходимо указать с помощью заголовка.","type":"unstyled","key":"a9u8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fj1b7"},{"data":{"image":{"id":"5df63b0898fe7900af175993"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5jfeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"unstyled","key":"74qnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ARTICLE","type":"header-two","key":"7nsbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег

еще более независимый, чем тег

. Он так же применяется к семантически связанному блоку контента и должен иметь заголовок. Его содержимое должно быть независимым и самодостаточным. Если тег

изолировать от остальной части страницы, по прежнему должен иметь смысл.","type":"unstyled","key":"9bls1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще всего тег

применяется к статье сайта, новости, сообщений блога, форума или комментариев.","type":"unstyled","key":"38rel"},{"data":{"image":{"id":"5df63b6ec31e4900ba3d4da8"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3tp54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6s1g2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Aside? ","type":"header-two","key":"7ofno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3di86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег

, тоже применяется к блоку для семантического указания раздела. Но в отличии от

, тег

представляет блок, контент которого не имеет или имеет косвенное отношение к содержимому документа. Он так же независим от остального контента и может быть буквально вырван из одной странице и вставлен в другую, не потеряв актуальность. ","type":"unstyled","key":"948r1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще всего применяться для боковых панелей, блоков с рекламными баннерами, сносок и другой информации, которая отделена от основного содержимого страницы. ","type":"unstyled","key":"614oc"},{"data":{"image":{"id":"5df63b91bb892c00affe1928"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"21bsu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b2jni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DIV или SECTION или ARTICLE?","type":"header-two","key":"bo5op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какой же тег использовать","type":"header-three","key":"9t4fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если с тегом

я думаю все и так понятно, но давайте разберемся с остальными.","type":"unstyled","key":"frl8c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если контент не является семантически связанным, используем

. Если контент семантически связан и независим от остального, то используйте тег

, а если контент связан с содержимым всей страницы используем

.","type":"unstyled","key":"1jcn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7pi2j"},{"data":{"image":{"id":"5df565b7028d6800ad9ca12e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"59ohs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7903d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комбинирование элементов","type":"header-two","key":"ci29k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Попытаемся объединить различные элементы вместе.","type":"unstyled","key":"9sl1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Article в article","type":"header-three","key":"1ucms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элементы article можно вкладывать друг в друга. Они по прежнему являются самодостаточными, но предполагается, что содержимое внутреннего

связано с внешним.","type":"unstyled","key":"ece94"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, если в сообщении в блоге, содержится цитата из другого сообщения, она может обернута в свой

. ","type":"unstyled","key":"3k7go"},{"data":{"image":{"id":"5df63c79fe289100b094dcab"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"e5qc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9pi71"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Article в Section","type":"header-three","key":"392v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы можем так же несколько тегов

обернуть в

. ","type":"unstyled","key":"7hiv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например страница блога, на которой отображаются последние сообщения. Контейнером для всех постов будет тег

, а каждый пост обернут тегом

.","type":"unstyled","key":"8lho3"},{"data":{"image":{"id":"5df63c3ba3f6e400ae115c43"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"apedh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"66jbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Section в article","type":"header-three","key":"anguk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каждый тег

может иметь один или несколько

.","type":"unstyled","key":"8eap2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, этот пост мог бы быть размечен следующим образом","type":"unstyled","key":"7p9j7"},{"data":{"image":{"id":"5df63cff0ce57b00aedc4751"},"contents":{"5df63cff0ce57b00aedc4751":""}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dttf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8sc7o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ZToYsfbZMxxsxu8NRo70"}],"entityMap":{"0":{"data":{"url":"http://bitsofco.de/2015/sectioning-content-in-html5/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}