Взгляд внутрь: элементы HTML5 и

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

Рекомендуем также посмотреть:

<section> Элемент

Это, наверное, один из самых неоднозначных элементов. Все эти годы мы использовали элемент <div> для разделения нашей веб-структуры. Таким образом, возникает вопрос, чем он отличается от <div>element и когда мы должны использовать этот элемент отдельно от <div>element.

Чтобы прояснить это, нам нужно обратиться к официальной документации. Согласно документации WHATWG, <section>это описывается следующим образом:

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

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

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

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

Хотя элемент section технически стилизован, его рекомендуется использовать <div>вместо него, когда мы с большей вероятностью применим к элементу тяжелые стили или скрипт.
Как и в случае с <li>element, основная идея элемента section состоит в перечислении содержимого .

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

<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>element рекомендуется использовать исключительно для структурирования статей , особенно статей , которые мы, вероятно, будем объединять в синдикаты, таких как сообщение в блоге, содержимое страницы или сообщения на форуме.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>element, когда это целесообразно, например, как в примере ниже.

21 год

<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>
    <h4>This is another Sub-Heading</h4>
    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ée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
    </section>
  </div>
</article>

Вывод

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

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