—»     —»   Знакомство с HTML5: элементы «article» и «section»
  Раздел: Образование и Изучение   Нет комментариев  

Знакомство с HTML5: элементы «article» и «section»

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

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

Знакомство с 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. Правда, между дизайнерами и веб-разработчиками до сих пор не стихают дебаты по поводу того, как все-таки следует использовать эти элементы.

Тем не менее, просто не стоит путать сути. Как мы уже говорили выше, сначала проанализируйте ситуацию, и попробуйте доказать, что эти элементы уместны в том или ином случае, и если да, то не стесняйтесь применять новые элементы! В конце концов, вряд ли ими можно что-то испортить.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 11596   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031