Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17358 / 1606 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 15:

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 теги могут быть разделены на семантические и теги представления.

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

Таблица 14.1.
Тег Описание
a предназначен для создания cсылки или якоря
abbr указывает, что содержимое тега является аббревиатурой
acronym указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово)
address содержит информацию об авторе
area применяется внутри контейнера <map> для создания карты-изображения. Определяет параметры активных зон-ссылок на карте
base указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы
bdo устанавливает направление вывода текста (справа налево, слева направо)
blockquote выделяет цитату (как правило длинную). Отображается с увеличенным отступом
body определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы
button создает на форме кнопку
caption создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы
cite используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом
code обозначает текст, как код программы или формулу
col позволяет задать общие свойства сразу для всего столбца таблицы
colgroup позволяет задать общие свойства сразу для нескольких столбцов таблицы
dd используется при создании списка определений вместе с <dl> и <dt>. Задает определение термина
del обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста
dfn выделяет в тексте термин
div выделяет логический блок. Один из основных элементов блочной верстки
dl используется при создании списка определений вместе с <dt> и <dd>
dt используется при создании списка определений вместе с <dl> и <dd>
em используется для акцентирования внимания
fieldset предназначен для группировки элементов формы
form создает форму на странице. Форма применяется для обмена данными между пользователями и сервером
h1, h2, h3, h4, h5, h6 используются для создания заголовков
head заголовок документа, содержит информацию о текущем документе
html тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype, который должен быть расположен перед тегом <html>
img добавляет на страницу изображение
input позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге
ins обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста
kbd обозначает текст набираемый на клавиатуре или сочетания клавиш
label позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши
legend определяет заголовок для элементов форм, сгруппированных в контейнере тега <fieldset>
li создает элемент списка
link устанавливает связь с внешними документами, чаще всего с таблицами стилей
map тег-контейнер для создания карты-изображений
meta содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств
noscript содержит текст, который выводится браузером
object используется для внедрения на страницу различных объектов (как правило медиафайлов)
ol создает нумерованный список
optgroup тег-контейнер для тегов <option>. Объединяет их в группу
option задает отдельную строку списка в теге <select>
p предназначен для создания абзацев
pre определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки
q выделяет в тексте цитату
samp обозначает текст, как код программы или формулу
script добавляет на страницу скрипт
select создает элемент выбора значений
span используется в основном для оформления и/или назначения уникального идентификатора (id) определенному фрагменту текста
strong логически выделяет, усиливает текст.
style задает таблицу стилей
table определяет таблицу
tbody применяется для группировки строк, с целью задать общее форматирование
td задает ячейку таблицы
textarea определяет многострочное поле для ввода.
tfoot применяется для определения строки, которая будет отображаться внизу таблицы
th определяет ячейку-заголовок таблицы
thead применяется для определения строки/строк, которые будут отображаться вверху таблицы
title определяет заголовок документа
tr определяет строку таблицы
ul создает маркированный список
var обозначает имя переменной

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

Важно запомнить одно, если вы логически верно используете 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
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

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

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Оксана Горбань
Оксана Горбань
Казахстан, Казахстан Павлодарская область город Павлодар
Илья Черёмкин
Илья Черёмкин
Россия