HTML5 привнес в нашу жизнь множество новых элементов, и в будущем их будет еще больше. Тем не менее, существуют элементы, которые могут поначалу показаться непонятными, и среди них можно выделить: «article» и «section».

На форумах мы чаще всего натыкались на следующие вопросы: в каких случаях нужно использовать эти элементы? А также: как правильно использовать эти элементы?

Элемент section

Это наверное самый сомнительный элемент. Чем он отличается от элемента «div»? Все эти годы мы использовали div для создания разделов в веб-структуре, а теперь, по-видимому, ему появилась замена? Дабы развеять этот миф, нам нужно сослаться на официальную документацию. Судя по документации WHATWG, «section» описывается следующим образом:

«Элемент «section» представляет собой отдельный раздел документа или приложения».

Из этого описания мы можем предположить, что элемент «section» предназначен для разделения структуры, что более или менее схоже с div-элементом. Но здесь есть небольшое исключение. В документации приводится небольшая сноска, в которой говорится: «когда элемент необходим лишь в целях стилизации, или для повышения удобства разработки скрипта, разработчикам лучше использовать элемент div… Суть заключается в том, что элемент section подходит только тогда, когда содержимое элемента нужно вывести отдельно…».

На данном этапе кое-что прояснилось, и теперь мы можем выделить для себя 2 пункта:

* Прежде всего, хотя элемент section и поддается стилизации, когда мы хотим применить к элементу скрипты или тяжелые стили, лучше все-таки воспользоваться элементом div.

* Во-вторых, как и в случае с li-элементом, главная суть элемента section заключается в выводе контента.

Так что, в реальных случаях, достаточной причиной к тому, чтобы использовать элемент section, является необходимость вывести список в записи блога, как показано во фрагменте кода, приведенном ниже:

<div class="blog"> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> <section class="post"> <h2 class="post-title">Blog Post Title</h2> <p class="post-excerpt">Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p> </section> </div>
Это просто пример, и мы можем использовать этот элемент в других целях.

Элемент article

Само название элемента уже дает понять многое, но давайте взглянем на официальную документацию:

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

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

Следующие пример показываем нам, как мы структурируем контент записи в блоге при помощи «article»:

<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. </div> </article>
Более того, элемент «article» может быть использован в группе с элементом section, и таким образом статья может быть разделена на несколько единиц при помощи тега «section». Пример можно посмотреть ниже.

<article class="post"> <header> <h1>This is Blog Post Title</h1> <div class="post-meta"> <ul> <li class="author">Author Name</li> <li class="categories">Save in Categories</li> </ul> </div> </header> <div class="post-content"> <section> <h2>This is the Sub-Heading</h2> Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. </section> <section> <h3>This is another Sub-Heading</h3> Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. Cheesecake gummi bears drag&#233;e jujubes drag&#233;e drag&#233;e brownie jelly biscuit. Powder croissant jelly beans pastry. </section> </div> </article>
Завершение

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

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

No related posts.