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

Термин "семантическая сеть" в настоящее время используется практически вспышками. Многим людям вообще не ясно, что такое эта так легкомысленно оцененная семантика. На самом деле все просто: благодаря семантике из огромных объемов данных действительно могут быть извлечены необходимые / желаемые информации.

Конкретный пример должен продемонстрировать важность семантики. Цифровые фотографии - замечательная вещь. Сразу после съемки их можно представить через Интернет всему миру. Что действительно является личным, давно уже утвердилось и в профессиональной среде. Фотоагентства, музеи, библиотеки и фотографы предлагают фотографии, картины или цифровые версии ценных текстов через профессиональные библиотеки изображений. На соответствующих веб-сайтах есть тогда маски поиска, через которые платформу можно просматривать. Самым популярным примером поисковика изображений в вебе 2.0 является, безусловно, Flickr.



Те, кто уже использовал такие поисковые системы изображени�... Kohl (капуста), вы увидите фотографии из различных областей. Так, поиск изображений Yahoo! покажет фотографии капустной синицы, теннисиста по имени Коль и бывшего канцлера Гельмута Коля.

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

Машины могут читать информацию только тогда, когда она действительно присутствует. И именно это является решающим моментом, в котором начинает работать семантика.

Структурирование документов

В более ранних версиях HTML не было просто способа структурировать документы семантически. Если хотели структурировать веб-страницу, у вас были только заголовки и текстовые абзацы. Вот типичный пример структуры классической веб-страницы:

<h1>
    Капитул
</h1>
<p>
    Параграф
</p>
<h2>
    Подкапитул
</h2>
<p>
    Параграф в подкапитуле
</p>
<h3>

Для структурирования документа HTML предоставляет элементы h1 до h6. Однако с помощью них нельзя построить действительно глубокую вложенность структуры. Поскольку элементы h7 или h8 в HTML не предусмотрены. Именно здесь HTML5 вводит дополнительные элементы структурирования.

• article

• aside

• dialog

• figure

• footer

• header

• nav

• section

Эти элементы представлены в этом учебнике. Однако прежде всего следует отметить: эти элементы не должны быть удивительными с точки зрения визуализации. Чтобы веб-страницы, основанные на семантических элементах, выглядели привлекательно, необходимо использовать CSS. И к этому мы, как известно, вернемся позже.

Некоторые семантические элементы уже были вам представлены, даже если они на первый взгляд не имеют ничего общего с семантикой. Вот пример такого элемента:

<progress min="0" max="100" value="40"></progress>

Это создает индикатор загрузки. (Стильный элемент progress уже был подробно рассмотрен в этой серии).

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

Семантические структуры элементов

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

Пример:

<div class="nav"></div>

Многие разработчики, например, используют nav, чтобы разместить навигацию внутри этого элемента div. В HTML5 это выглядит иначе:

<nav>Содержание</nav>

С элементом nav становится ясно, что это не просто список гиперссылок. Фактически этот элемент описывает блок содержимого, в котором содержится информация о навигации веб-сайта в определенном контексте.

Современное структурирование

Как, на самом деле, выглядит структура HTML-документа? В общем, она похожа вне зависимости от того, какое содержание у страницы в конечном итоге будет. Обычно включаются следующие разделы:

• Шапка

• Основное меню

• Содержательная область

• Нижняя часть страницы

Веб-страница, которая использует элементы div для структурирования, могла бы выглядеть так:

<body>
   <div id="header">
     <div id="logo">Logo</div>
     <div id="search">Поиск</div>
     <div id="nav">Основное меню</div>
   </div>
   <div id="content">
     <h1>Это содержимое</h1>
     <div class="section">
       <h2>Подзаголовок</h2>
       <h3>Раздел</h3>
       <!-- Здесь находится содержание -->
     </div>
     <div class="section">
       <h2>Подзаголовок</h2>
       <!-- Здесь находится содержание -->
     </div>
   </div>
   <div id="sidebar">
     <div id="subnav">Подменю</div>
   </div>
   <div id="footer">Нижний колонтитул</div>
 </body>

Возможно, вы уже знакомы с такими конструкциями div. Чтобы структура была понятна разработчикам, соответствующим областям div присваивают соответствующие классы или идентификаторы, обладающие "говорящими" именами. Таким образом, разработчику, например, сразу становится понятно, что в области div с идентификатором footer содержится содержание, относящееся к нижнему колонтитулу страницы. Проблема заключается в том, что имена могут намекать на структуру веб-сайта, но сам веб-сайт этим еще далеко не семантически структурирован. Именно здесь появляются новые элементы HTML. Потому что они впервые позволяют действительно структурировать документы или веб-сайты.

Для лучшего понимания посмотрите следующий документ HTML5:

<body>
   <header>
     <div id="logo">Лого</div>
     <div id="search">Поиск</div>
     <nav>Основное меню</nav>
   </header>
   <article>
     <h1>Это содержимое</h1>
     <section>
       <h2>Подзаголовок</h2>
       <h3>Раздел</h3>
       <!-- Здесь находится содержание -->
     </section>
     <section>
       <h2> Подзаголовок</h2>
       <!-- Здесь находится содержание -->
     </section>
   </article>
   <aside>
     <nav>Подменю</nav>
   </aside>
   <footer>Нижний колонтитул</footer>
 </body>

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

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