HTML5 и элементы
HTML5 поставляется с кучей новых элементов, которые могут быть рекомендованы в будущем. Однако есть некоторые элементы, которые могут немного запутать их реализацию, включая следующие два новых элемента:
<
article> а также
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
<
section>,
Некоторые наиболее часто задаваемые вопросы, которые я нашел на форумах: При каких обстоятельствах мы должны использовать эти элементы? И так же, как мы правильно используем эти элементы?
<
section> Элемент
Это, наверное, один из самых неоднозначных элементов. Все эти годы мы использовали
<
div> элемент для секционирования в нашей веб-структуре. Возникает вопрос: чем он отличается от
<
div> элемент и когда мы должны использовать этот элемент, кроме
<
div> элемент.
Чтобы демистифицировать его, нам нужно обратиться к официальной документации. Согласно документации WHATWG,
<
section> описывается следующим образом:
«
<
section> Элемент представляет общий раздел документа или приложения. ~ WHATWG ”
Из этого описания можно сделать вывод, что
<
section> Элемент определенно предназначен для секционирования, более или менее как
<
div> элемент. Но есть исключение. В документацию добавлено несколько дополнительных примечаний:
«Когда элемент нужен только для стилизации или для удобства написания сценариев, авторам рекомендуется вместо этого использовать элемент div … Общее правило заключается в том, что элемент section уместен только в том случае, если содержимое элемента будет указано явно … ~ WHATWG»
На этом этапе все стало легче, и мы можем обобщить это описание в двух пунктах:
- Хотя элемент section технически стилизован, рекомендуется использоватьвместо этого, когда мы более склонны применять тяжелые стили или сценарий к элементу.
- Похожий на
- Элемент, общая идея элемента section — перечислить содержимое.
Так что в реальных случаях одна из разумных причин использовать
<
section> Элемент должен структурировать список содержимого сообщений блога, как показано в следующем фрагменте кода:
Заголовок сообщения блога
Мороженое терпкий порошок желе-о.
Gummies шоколадный торт мороженое печенье халва тирамису желеЗаголовок сообщения блога
Мороженое терпкий порошок желе-о.
Gummies шоколадный торт мороженое печенье халва тирамису желеЗаголовок сообщения блога
Мороженое терпкий порошок желе-о.
Gummies шоколадный торт мороженое печенье халва тирамису желеЭто всего лишь пример; мы можем использовать этот элемент для других целей.
<
article> Элемент
Само название довольно очевидно, но давайте посмотрим, как его описывает официальная документация:«Самодостаточная композиция в документе, странице, приложении или сайте, которая, в принципе, может независимо распространяться или использоваться повторно, например, в виде синдикации. Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента.«
Из приведенного выше объяснения можно сделать вывод, что
<
article> Элемент исключительно рекомендуется использовать для структурирования статей, особенно статьи, которую мы, вероятно, будем объединять, например, пост в блоге, контент страницы или посты на форуме.
В следующем примере показано, как мы структурируем содержимое сообщения блога
<
article>,
Это название блога
Сладкий рулет, бисквит, ириска, лакрица, пирог, кунжутные пудинги.
Бисквитный порошок желейно-фруктовый кекс faworki шоколадный батончик. Пудинг овсяный
торт ролл ролл кунжутные батончики леденец пряник. Gummies
Халва Жевательные конфеты Датский бисквитный апельсиновый пряникКроме того,
<
article> элемент может использоваться вместе с элементом section, поэтому статью можно разделить на несколько разделов с помощью
<
section> элемент, когда это целесообразно, например, в приведенном ниже примере.
Это название блога
Это подзаголовок
Сладкий рулет, бисквит, ириска, лакрица, пирог, кунжутные пудинги.
Бисквитный порошок желейно-фруктовый кекс faworki шоколадный батончик. Пудинг овсяный
ролл туцес кунжут защелки леденец пряник бонбон. Жевательные халвы
жевательные кондитерские изделия.Это еще один подзаголовок
Посыпать сырным пирогом сладкий пирог морковный пирог сладкий рулет. Gummi несет лимонные капли
ириски кунжут защелкивает пирог Чупа чипсы яблочный пирог жевательные конфеты. Вафельный шоколад
торт. Сахарная слива шоколадный батончик сверху мороженое морковный торт датский бонбон.
Чизкейк с жевательными конфетами и шоколадным мармеладом. Порошок круассана из желейных бобов тесто.Вывод
Все новые элементы в HTML5 придуманы для того, чтобы сделать веб-структуру более семантической, как в свое время основатель World Wide Web и директор W3C. Веб-разработчики и дизайнеры до сих пор спорят о том, как правильно применять эти элементы, некоторые говорят, что другие могут сказать иначе.Тем не менее, не путайте с идеей. Как я уже упоминал выше, до тех пор, пока разумно использовать их, и вы видите, что структура имеет смысл, когда вы изучаете ее, а затем переходите к ней. В конце концов, это не имеет значения, в конце концов.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)