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

<

article> а также

<

section>,

Некоторые наиболее часто задаваемые вопросы, которые я нашел на форумах: При каких обстоятельствах мы должны использовать эти элементы? И так же, как мы правильно используем эти элементы?

<

section> Элемент
Это, наверное, один из самых неоднозначных элементов. Все эти годы мы использовали

<

div> элемент для секционирования в нашей веб-структуре. Возникает вопрос: чем он отличается от

<

div> элемент и когда мы должны использовать этот элемент, кроме

<

div> элемент.

Чтобы демистифицировать его, нам нужно обратиться к официальной документации. Согласно документации WHATWG,

<

section> описывается следующим образом:

«

<

section> Элемент представляет общий раздел документа или приложения. ~ WHATWG ”

Из этого описания можно сделать вывод, что

<

section> Элемент определенно предназначен для секционирования, более или менее как

<

div> элемент. Но есть исключение. В документацию добавлено несколько дополнительных примечаний:

«Когда элемент нужен только для стилизации или для удобства написания сценариев, авторам рекомендуется вместо этого использовать элемент div … Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет указано явно … ~ WHATWG»

На этом этапе все стало легче, и мы можем обобщить это описание в двух пунктах:

1. Хотя элемент section технически стилизован, рекомендуется использовать
   вместо этого, когда мы более склонны применять тяжелые стили или сценарий к элементу.
2. Похожий на
3. Элемент, общая идея элемента section — перечислить содержимое.

Так что в реальных случаях одна из разумных причин использовать

<

section> Элемент должен структурировать список содержимого сообщений блога, как показано в следующем фрагменте кода:

Это всего лишь пример; мы можем использовать этот элемент для других целей.

<

article> Элемент
Само название довольно очевидно, но давайте посмотрим, как его описывает официальная документация:

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

Из приведенного выше объяснения можно сделать вывод, что

<

article> Элемент исключительно рекомендуется использовать для структурирования статей, особенно статьи, которую мы, вероятно, будем объединять, например, пост в блоге, контент страницы или посты на форуме.

В следующем примере показано, как мы структурируем содержимое сообщения блога

<

article>,

Кроме того,

<

article> элемент может использоваться вместе с элементом section, поэтому статью можно разделить на несколько разделов с помощью

<

section> элемент, когда это целесообразно, например, в приведенном ниже примере.

Вывод
Все новые элементы в HTML5 придуманы для того, чтобы сделать веб-структуру более семантической, как в свое время основатель World Wide Web и директор W3C. Веб-разработчики и дизайнеры до сих пор спорят о том, как правильно применять эти элементы, некоторые говорят, что другие могут сказать иначе.

Тем не менее, не путайте с идеей. Как я уже упоминал выше, до тех пор, пока разумно использовать их, и вы видите, что структура имеет смысл, когда вы изучаете ее, а затем переходите к ней. В конце концов, это не имеет значения, в конце концов.