HTML и CSS для начинающих (часть 19): Семантика для веба (2)

В настоящее время HTML-документы в основном структурируются с помощью элементов div. Форматирование и позиционирование этих контейнеров обычно выполняется с помощью CSS. Для программного обеспечения, такого как скринридеры, такой подход, конечно, бесполезен, поскольку они не могут определить, какое значение имеют определенные содержимое. Это должно измениться с помощью новых элементов структурирования.

Два из самых важных новых элементов - это section и article, на которые сосредотачивается это учебное пособие.

Пометка статьи

С помощью элемента article можно пометить тексты (форумные сообщения, газетные статьи и т. д.) как статьи. В следующем примере показано определение типичной статьи.

<article>
   <h1>Создание веб-приложений (Часть 09): jQuery mobile (1)</h1>
   <p>jQuery, безусловно, один из самых известных JavaScript-фреймворков. На "классических" веб-сайтах jQuery уже используется тысячами раз ...</p>
   ...
</article>

Благодаря элементу article вы можете семантически структурировать свои контенты.

Как это может выглядеть, отлично можно увидеть на примере блога.

<article>
  <header>
    <h1>Создание веб-приложений (Часть 09): jQuery mobile (1)</h1>
    <p>Опубликовано: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
  <p>jQuery, безусловно, один из самых известных JavaScript-фреймворков. На "классических" веб-сайтах jQuery уже используется тысячами раз ...</p>
  ...
  <footer>
    <p><small>Авторские права PSD-Tutorials.de</small></p>
  </footer>
</article>

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

Создание секций

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

section служит для разделения контента по реально смысловым критериям. Кстати, я еще раз вернусь к различию между section и div в конце этого учебного пособия.

Следующий пример показывает типичную структуру блога. Однако эта структура содержит еще что-то, что действительно нужно во многих блогах, а именно область комментариев. Эта область комментариев определяется внутри элемента section. Отдельные комментарии внутри области section в свою очередь оборачиваются в отдельные элементы article.

<article>
  <header>
    <h1>Создание веб-приложений (Часть 09): jQuery mobile (1)</h1>
    <p>Опубликовано: <time pubdate="pubdate">24.05.2014</time></p>
  </header>
    <p>jQuery, безусловно, один из самых известных JavaScript-фреймворков. На "классических" веб-сайтах jQuery уже используется тысячами раз...</p>
  ...

  <section>
    <h2>Комментарии</h2>
    <article>
      <header>
      <h3>Комментировал: Newsfriend</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Час назад</time></p>
    </header>
    <p>Спасибо за урок!</p>
    </article>
    <article>
      <header>
      <h3>Комментировал: Becker</h3>
      <p><time pubdate datetime="2024-10-05T20:10-07:00">Два часа назад</time></p>
    </header>
    <p>Превосходно! Это помогло мне.</p>
    </article>
  </section>
</article>

Здесь еще раз отмечу, что я, конечно же, еще раз подробнее расскажу об используемых элементах, таких как header, footer и т. д. В этом месте лишь столько: Эти элементы позволяют разделять контент на верхнюю и нижнюю части, тем самым обеспечивают дальнейшую логическую структурированность документов.

Еще один пример показывает сочетание элементов article и section. Фактически, элемент section можно использовать для разделения статьи на логические блоки содержимого, каждый из которых имеет свои собственные заголовки.

<article> 
  <h1>Разработка приложений</h1> 
  <p>Здесь вы узнаете, как создавать веб-приложения.</p>
  <section> 
     <h2>Создание веб-приложений (Часть 09): jQuery mobile (1)</h2> 
     <p>jQuery, безусловно, один из самых известных JavaScript-фреймворков.</p> 
   </section> 
  <section> 
     <h2>Создание веб-приложений (Часть 08): Быстрый старт в jQuery</h2> 
     <p>JavaScript для веб-сайтов - замечательная вещь, ведь с его помощью можно сделать много интересного.</p> 
   </section> 
 </article>

Кстати, также возможно внутри элемента section определить элементы article. Типичным примером этого может быть область комментариев, как уже было показано. Однако можно также разделить секцию на области тем, которые обсуждаются в блоге.

Снова приведем соответствующий пример:

<section> 
  <h1>Разработка приложения</h1>
  <article> 
     <h2>Создание веб-приложений (Часть 09): jQuery mobile (1)</h2> 
     <p>jQuery, безусловно, один из самых известных фреймворков JavaScript.</p> 
   </article> 
  <article> 
     <h2>Создание веб-приложений (Часть 08): Быстрый старт в jQuery</h2> 
     <p>JavaScript - это замечательный инструмент для веб-сайтов, ведь с его помощью можно делать множество интересных вещей.</p> 
   </article>    
 </section>

Кроме того, в элементе section могут содержаться другие элементы section. Иерархическое вложение допустимо. Приведем здесь еще один пример:

<section>
    <h1>PSD-Tutorials.de</h1>
    <section>     
      <h2>Добро пожаловать</h2>     
      <p>Мы рады...</p>
    </section>   
    <section>     
      <h2>Уроки</h2>
      <p>Здесь вы найдете наши самые новые уроки...</p> 
    </section>
    <aside>
      <p>Контакт</p>
    </aside>
  </section>
  <footer>
    <p>(c) 2014 PSD-Tutorials.de</p>
  </footer>

Такое вложение section приводит к следующей структуре:

1. PSD-Tutorials.de

1.1 Добро пожаловать

1.2 Уроки

1.3 Контакт

2. (c) 2014 PSD-Tutorials.de
   
   Такие структуры также возможны.
   
   

Разница между div, article и section

Признаться, не совсем просто понять различие между div, article и section. Фактически элемент article был определен в первую очередь для структурирования блог-постов. Элемент section по сути находится на уровне ниже, чем article. Кроме того, внутри элемента section также всегда должен быть определен заголовок. Даже если заголовок фактически не указан, в пределах соответствующего элемента должно быть теоретически возможно указать заголовок.

Естественно, что элементы div в HTML5 все еще не являются неудачными и их следует использовать. Эти элементы остаются интересными, например, при суммировании элементов.

Наконец, еще раз хочу отметить влияние внешнего вида уже представленных элементов. Фактически для соответствующего форматирования вам понадобится CSS. Обычное применение показанных элементов фактически не оказывает влияния в браузере. Вы просто структурируете контент семантически. Все, что касается внешнего вида, определяется таблицами стилей.