HTML5. Подгружаемое и генерируемое содержимое. Семантическая разметка

Генерируемое содержимое

Генерируемое содержимое Web-страницы — это содержимое, которое не описывается в HTML-коде, а создается программно, особым Web-сценарием. Содержимое может генерироваться как при открытии Web-страницы, так и в процессе ее просмотра, в ответ на действия посетителя.

У генерируемого содержимого есть два существенных преимущества:

1. сокращение размера HTML-кода Web-страниц.
2. унификация данных.

Рассмотрим небольшой пример организации генерируемого содержимого. Опишем JavaScript - функции для формирования списка и группы ссылок.

Список будет формироваться на основе следующего массива:

     var items = ["listItem1","listItem2","listItem3","listItem4","listItem5","listItem6","listItem7"];

Массив содержит строки - элементы списка. На самой HTML - странице размещен тег <ol id="list">, для того, чтобы добавить элементы в список, необходимо:

1. программно создать элемент <li>;
2. добавить созданному элементу HTML - код содержимого;
3. добавить элемент в список.

Программно это будет выглядеть следующим образом:

var list = document.getElementById("list");
for (var i = 0; i< items.length; i++)
  {
    var listItem = document.createElement("li");
    listItem.innerHTML = items[i];
    list.appendChild(listItem);
  }

Таким образом при вызове функции сформируется содержимое списка с id="list".

Сформировать группу ссылок немногим сложнее, поскольку помимо текста ссылки, элемент <a> должен содержать адрес перехода. Для этого нам понадобится массив следующего вида:

  var links = [];
  links[0] = {name: "first", href: "document1.html"};
  links[1] = {name: "second", href: "document2.html"};
  links[2] = {name: "third", href: "document3.html"};
  links[3] = {name: "fourth", href: "document4.html"};

На HTML - странице определен контейнер <div id="navigation">. Последовательность добавления ссылки в контейнер выглядит так:

1. программное создание элемента <a>;
2. задание текста ссылки;
3. задание значения атрибута href;
4. добавление ссылки в контейнер.

Следующий код иллюстрирует программную реализацию указанной последовательности действий:

var nav = document.getElementById("navigation");
    for(var j = 0; j<links.length; j++)
  {
    var linkItem = document.createElement("a");
    linkItem.innerText = links[j].name+"    ";
    linkItem.setAttribute('href', links[j].href);
    nav.appendChild(linkItem);
  }

Разумеется генерировать содержимое можно не только на основе массивов, в рамках последующих практических занятий мы рассмотрим пример формирования содержимого различных элементов на основе использования хранилищ данных.

Семантическая разметка

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

Семантика, как научная дисциплина, изучает значение единиц языка. В IT под семантикой понимается формализация конструкций языков программирования.

Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

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

В HTML5 предусмотрен ряд тегов, позволяющих явно указать что тот, или иной контент относится к определенной части веб - страницы, либо указывающих на то, чем контент является (цитата, время и дата и т.п.).

Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами.

Помимо уже сказанного можно выделить следующие преимущества семантической разметки:

• Повышается доступность, т.к. страницы сайта не потеряют своей структуры даже при отключенном или неподдерживаемом CSS.
• Контент страниц сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.
• Семантическая разметка оказывает положительное влияние на поисковые системы, т.к. их роботам не составляет труда индексировать страницы и определять истинное значение тех или иных фрагментов текста.
• Значительно упрощается дальнейшая поддержка подобным образом сверстанного сайта, снижаются затраты на редизайн.
• Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.

Таким образом, HTML теги могут быть разделены на семантические и теги представления.

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

Нами приведен не полный список семантических тегов, более того этот список вряд ли когда - нибудь будет полным, к примеру можно вспомнить о микроформатах (см. список материалов для самостоятельного изучения).

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

Ключевые термины и определения

Подгружаемое содержимое – содержимое, загружаемое в определенный раздел веб - страницы, при возникновении необходимости в его отображении.

Генерируемое содержимое – содержимое веб - страниц, явно не прописанное в HTML - коде, как правило, формируется с помощью веб-сценариев.

Семантическая разметка – разметка HTML - документа с правильным использованием тегов, образом определенным в стандартах языка.

Краткие итоги

Данная лекция направлена на ознакомление с рядом понятий, без которых современная веб - разработка не обходится. Мы лишь частично затронули объемные темы, чтобы внести ясность.

Итак, подведем краткий итог и повторим то, что необходимо вынести из лекции.

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

Далеко не всегда все содержимое веб - страницы определено и известно заранее. Более того, если вспомнить вступительную лекцию, то понятно что только веб - решение, предоставляющее пользователям возможность формировать контент можно отнести к Web 2.0. Т.е. содержимое веб - страницы может быть сгенерировано посредством веб - сценариев, использования различных способов хранения данных и т.п.

Семантическая верстка – это не требование, а только рекомендация. С распространением инструментов анализа веб - ресурсов (а это тоже уже давно отдельное научное направление) будет возрастать и значимость семантической разметки.

Список материалов для самостоятельного изучения

1. http://habrahabr.ru/search/?q=[iframe]&target_type=posts
2. http://www.w3schools.com/tags/tag_iframe.asp
3. http://promo.ingate.ru/seo-wikipedia/microformats/
4. http://vremenno.net/html-css/microformats-and-simantics/
5. http://www.w3school.ru/blog/xhtml/explaining-semantic-mark-up.html
6. http://www.xiper.net/learn/tegofenshuj/about-semantic.html
7. http://www.promsoft.ru/cemantikahtml