Новые структурные теги HTML5. Размещение контактных данных на всех страницах
Новые структурные теги HTML5. Размещение контактных данных на всех страницах
19.04.2019Интересное
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
, которым присваивали классы class или идентификаторы id для наглядности разметки (например,
). С их помощью в HTML-документе размещали верхние и нижние колонтитулы, боковые панели, навигацию и многое другое.
Стандарт HTML5 предоставил новые элементы для структурирования, группировки контента и разметки текстового содержимого. Новые семантические элементы позволили улучшить структуру веб-страницы, добавив смысловое значение заключенному в них содержимому (было
, стало ). Для отображения внешнего вида элементов не задано никаких правил, поэтому элементы можно стилизовать по своему усмотрению. Для всех элементов доступны .
Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:
Мета содержимое
Потоковое содержимое
Секционное содержимое
Заголовочное содержимое
Текстовое содержимое
Встроенное содержимое
Интерактивное содержимое
Описание HTML5-элементов
1. Элемент
Категории контента:
потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.
Site description
Элемент нельзя помещать внутрь элементов
2. Элемент
Категории контента:
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри . На странице может быть несколько элементов
В качестве элементов панели навигации можно использовать не только элементы списков:
Также можно добавлять заголовки внутрь элемента:
3. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы , которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом . Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
...
4. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент
. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.
...
...
...
внутри
Можно создавать родительские элементы с вложенными элементами , в которых есть один или несколько элементов . Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента
Заметки о природе
...
...
Исторические заметки
...
...
5. Элемент
Категории контента:
потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого)
. Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов:
6. Элемент
Категории контента:
потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.
В одном веб-документе может быть несколько элементов
7. Элемент
Категории контента:
потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента
, для отображения автора статьи — внутри тега . В браузере обычно отображается курсивом.
8. Элемент
Категории контента:
потоковое содержимое.
Элемент представляет основное содержимое документа (содержимое элемента ). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).
Элемент не может быть потомком таких элементов как ,
Пудель
О породе
9. Элемент
Категории контента:
потоковое содержимое, корневое секционное содержимое.
Элемент представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..
Осенний лес
Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:
10. Элемент
Элемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .
11. Элемент
Категории контента:
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:
Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):
12. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.
13. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.
14. Элемент
Категории контента:
потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.
15. Элементы для описания Восточно-Азиатских символов
Категории контента:
потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов ;
— один и более элементов
Элементы ,
Элемент определяет вложенный в него текст как базовый компонент аннотации.
Элемент
Кэп подсказывает, что более заметен тот номер, который написан посередине страницы и крупно. Делайте так, если хотите, чтобы как можно больше клиентов смогли дозвониться и поговорить с сотрудниками компании.
Дайте контакты разных подразделений
Крупной компании, которая получает огромный поток клиентских обращений каждый день, имеет смысл сразу выложить координаты отдела продаж, техподдержки, кадровой службы и других отделов. Так люди быстрее смогут получить ответ на интересующий вопрос.
На сайте международного ресторанного холдинга «Ginza Project» выложены телефоны call-центра, PR-службы, HR-департамента и других отделов.
Контакты региональных подразделений не обязательно выкладывать сразу большим списком. Можно выводить их только по клику на название нужного представительства. Например, как в разделе контактной информации на сайте «Рефиниш Автолака».
У «Центра Международного Обмена» довольно много подразделений во всём мире. Представители компании объединены в рубрики по странам для удобного поиска их телефонов и адресов.
Фотографии вывесок офлайновых магазинов на сайте уличного бренда одежды «BatNorton» помогут клиентам сориентироваться в торговом центре и найти нужный отдел.
Контакты региональных представительств «Сайнер» появляются во всплывающих окошках. Такой приём позволит освободить страницу контактов от избытка информации. Пользователь сможет подробно ознакомиться с телефоном и адресом только нужного ему дилера.
У «Оконного континента» сорок семь представительств в Москве. Для удобства клиентов контакты выложены на сайте в трёх видах: одним списком, на карте города и на схеме метро. В последних двух вариантах контактная информация появляется во всплывающем окошке по клику на нужное представительство.
Напишите контакты сотрудников
Человек больше доверяет другому человеку, чем обезличенному названию некой фирмы. Поэтому рассказывайте о ваших специалистах. Покажите, что за каждое направление в работе компании несут ответственность конкретные люди.
Постарайтесь выложить фото сотрудников. Подумайте, какие снимки вызовут наибольшее доверие клиентов? Возможно, это будут фотографии на рабочем месте или фото в деловых костюмах в профессиональной студии.
Покажите схему проезда
Понятная карта проезда экономит время на объяснении каждому клиенту, как добраться в компанию. И гарантирует, что большинство гостей не заблудится.
Хороши рисованные схемы проезда. На них получаются реалистичные изображения зданий, парков и других близлежащих объектов, на которые люди будут ориентироваться при поиске вашего офиса.
Однако учтите, что отрисовка карты проезда - дело трудозатратное. И скорее всего подойдёт фирмам, у которых немного офисов или точек продаж, одна-две.
Если у компании много офисов или представительств, то проще использовать не рисованную, а стандартную схему проезда. Её легко создать в любом конструкторе карт. А для того, чтобы не загромождать страницу с контактами на сайте многочисленными схемами проезда, их можно спрятать во всплывающие окошки.
На сайте «Мэри Трюфель» размещены рисованные схемы проезда к двум свадебным салонам.
На отрисованной схеме проезда к магазину подарков «Presentstar» видны мельчайшие детали: от кошки под деревом до инопланетян, крадущих жигули.
Контакты представительств «Центр международного обмена» выложены на сайте в виде списка. Если кликнуть на название представительства, то откроется карта проезда во всплывающем окошке.
В разделе с контактной информацией на сайте «ПСКБ Банка» схемы проезда к каждому офису изначально спрятаны. И появляются по нажатию на название офиса в раскрывающихся блоках.
На странице контактов фирменного интернет-магазина «Sony» во всплывающем окошке пользователь выбирает нужный город. И сразу после этого на странице выводятся соответствующие контактные данные, схема проезда и текстовое описание того, как добраться.
На сайте автомобильного фестиваля «Unlim 500+» переключаются три разные схемы - проезд к месту проведения мероприятия, карта автополигона и расположение кафе и сцены на смотровой площадке. Выбираешь нужную схему - меняется описание в левой части страницы и карта в правой части.
На сайте «Розовоза» контактная информация выложена в одном всплывающем окошке. И уже внутри окошка можно переключать два информационных блока: адреса цветочных складов и телефон службы доставки.
На сайте жилого комплекса «Панорама Сколково» есть возможность проложить маршрут из произвольной точки на карте до офиса продаж.
Задействуйте пространство во всплывающем окошке внутри карты
Иногда на карте нужно показать адреса и телефоны сразу нескольких торговых точек. Но если выложить всю контактную информацию сразу, то страница окажется перегруженной, будет сложно найти что-то определённое.
Удобно прятать контакты во всплывающие окошки, которые появляются по нажатию на ту или иную точку на карте. Отсутствие большого количества контактных данных разных магазинов, представительств и офисов визуально облегчает страницу, в ней легче ориентироваться.
На сайте ресторанного холдинга «Ginza Project» можно переключать четыре информационных блока внутри всплывающего окошка: адрес ресторана, телефон, время работы, ближайшая станция метро.
На сайте «Лето Банка» во всплывающем окошке на карте можно оценить работу отделения по 5-балльной шкале.
На сайте цветочной базы «Всё пучком» во всплывающем окошке помимо адреса, телефона и режима работы есть ещё и фотографии каждого склада.
Во всплывающих окошках на карте проезда к центрам изучения иностранных языков «Джей энд эс» расположены кнопка онлайн-звонка, ссылка на группу Вконтакте и несколько фотографий. А ещё такой «стандартный набор» как адрес, телефон и режим работы.
Выложите фотографию входа в офис компании
Покажите, как выглядит вход в офис фирмы. Особенно, если у вас нет собственной вывески с логотипом на фасаде здания. Проще один раз показать это на фотографии, чем каждый раз объяснять клиентам на словах.
Напишите, как добраться в офис
Приведите несколько вариантов описания того, как люди могут попасть к вам: пешком, на автомобиле, на общественном транспорте. Представьте себя на месте человека, который вышел из последнего вагона метро на станции Калужская и впервые оказался на улице Профсоюзной. Куда ему дальше идти? По какой стороне улицы? Где и куда нужно свернуть? Расскажите об этом как можно подробнее.
Инструкции по ориентированию на местности можно выложить все сразу или спрятать в информационные блоки, раскрывающиеся по клику мыши.
На сайте магазина подарков «Presentstar» есть инструкции для любителей пеших прогулок и для автомобилистов.
В «Газпром» можно не только прийти пешком, но и приехать на троллейбусе или автомобиле. Описание прогулок и поездок до офиса выложено на странице с контактами.
На сайте «Рефиниш Автолака» описания того, как доехать в компанию на автомобиле или общественном транспорте, появляются по клику на соответствующий заголовок.
На странице с контактами клиники репродукции «МАМА» есть не только инструкция для пользователей троллейбусов и автомобилей, но и для иногородних гостей, едущих от вокзала или аэропорта. Блоки с разными текстами переключаются по нажатию на иконки с автомобилем, автобусом, поездом.
Уделите внимание текстам
Не будьте скучными, поработайте над текстами и заголовками на странице с контактами. Яркий заголовок остановит блуждающий по сайту взгляд в нужном месте.
«Рамблер» говорит, что есть много причин написать ему. А ведь на этом месте могла бы оказаться какая-нибудь серенькая фраза типа «Список электронных адресов».
Бренд вязаных шапок «Handy Hat» хочет быть ближе к своим клиентам. Заходите, говорит, к нам во Вконтактик.
На странице с контактами производителя декоративных пропиток «Veres» есть одна незатейливая фраза о том, что продукция представлена более, чем в 300 городах России. На этом месте мог быть стандартный заголовок «Наши представители». Но тогда никто не узнал бы, насколько широка география деятельности компании.
Разместите ссылку на контакты в других разделах сайта
«В чёрном-чёрном футере, в самом дальнем углу, среди десятка других ссылок спряталась единственная на сайте ссылка на страницу контактов. Чтобы точно никто не нашёл», - страшная сказка об одной компании, которая не желала слышать звонки и читать письма людей.
Если вы хотите, чтобы как можно больше клиентов вышли на связь, то делайте ссылку на раздел контактов максимально заметной. Например, используйте картинки для оформления ссылки.
Давайте ссылку на контактную информацию везде, где это уместно. Например, вы пишете новость о предстоящей лекции именитого бизнес-тренера в вашей компании. Логично дополнить статью ссылкой на контактную информацию, чтобы все желающие могли записаться на лекцию.
На каждой странице сайта цветочной базы «Всё пучком» хорошо заметна ссылка на адреса складов.
Страница контактов – одна из ключевых на сайте коммерческого направления. Она должна быть ориентированной не столько на поисковое продвижение (хотя это тоже важно), сколько на полное информирование посетителей. Контактные данные компании – это коммерческие факторы ранжирования – поисковые системы по ним оценивают ресурс с точки зрения его конкурентных преимуществ перед аналогичными сайтами.
Естественно, идеальная страница контактов не откроет прямую дорогу в ТОП-3, но ее вклад будет немаловажным во всей стратегии продвижения. В данной статье рассмотрим, как правильно оформить страницу «Контакты» на сайте, чтобы получить дополнительный плюсик в карму сайта в глазах ПС.
Доступность в 1 клик
Страница контактов должна открываться в 1 клик с любой страницы ресурса. Ссылку на неё желательно разместить в первой видимой части экрана: обычно это горизонтальное меню в шапке сайта. Также можно продублировать ссылку в футере, чтобы пользователь мог найти способы связи, дочитав информацию до конца и оказавшись в нижней части сайта. Ссылку на страницу контактов рекомендуется размещать по возможности выше в коде - таким образом поисковый робот придаст ей более высокий приоритет.
Микроразметка в верстке
В HTML-код в процессе верстки страницы контактов лучше включать атрибуты Schema.org. Использование стандартизированной микроразметки даст возможность поисковикам лучше изучить ресурс, получить от него важную информацию и сделать на нем акцент в результатах поисковой выдачи. Проще говоря, в сниппете при правильной настройке будут отображаться адрес, регион и другие данные, что улучшит кликабельность. Подробную информацию об использовании синтаксиса Schema.org поисковики дают в своих справках. Также укажите в теге
название компании и <a href="/podobrat-domen-po-klyuchevym-slovam-podbiraem-domen-s-klyuchevym-slovom.html">ключевое слово</a> (например, «Контакты», «Схема проезда» или «Адрес офиса»). Например, <title>Компания Веник - Контакты»
Использование обязательных элементов
Страница контактов должна содержать полный список способов для связи с компанией (включая физический адрес), информацию о режиме работы. Предоставьте клиентам максимум информации – и вам меньше придется отвечать на «глупые» вопросы о том, как позвонить в отдел продаж или на какой адрес отправить коммерческий запрос. Обязательные элементы страницы «Контакты»:
телефонный номер с кодом города (городской номер всегда предпочтительнее мобильного). Еще лучше – если компания использует бесплатный номер с кодом 8(800). Мобильные номера должны быть дополнительными, а не основными. Не помешает указать номера ключевых специалистов компании;
адрес – следует обязательно указать фактический почтовый адрес с индексом. Это здорово повышает уровень доверия к компании (если на странице с контактами – только мобильный номер и поле обратной связи, резонно возникает вопрос - от кого она скрывается?);
электронная почта. В этом случае лучше также опубликовать главный адрес и адреса ключевых специалистов/подразделений;
рабочий график – нужно предоставить информацию о режиме работы, часах приема ключевых специалистов, времени обеденного перерыва, работе в выходные. Полезным элементом будет указанием времени, до закрытия, например: «До закрытия магазина остался 1 час 14 минут.»;
схема проезда – ее можно организовать, используя встроенные Яндекс.Карты или карты Google. Лучше сопроводить маршрут текстовым комментарием для водителей и пешеходов, дать информацию о наличии парковки, системе пропуска. Для полной картины – добавьте GPS координаты, особенно – если ваша компания находится не малоизвестном месте;
вход в здание - лучшим решением будет наличие фото, позволяющего точно увидеть необходимую дверь. Так же можно дополнить управляемым видео с помощью технологий виртуальной реальности на google картах.
Наличие дополнительных элементов
Если указать описанную выше информацию на странице – этого в большинстве случаев будет достаточно для того, чтобы потенциальные клиенты или партнеры нашли способ связаться с вами и подъехать в ваш офис. Но эти возможности можно расширить, если предоставить дополнительную информацию. К ней относят:
средства онлайн-связи – лаконичные формы обратной связи (буквально – имя, поле для электронного адреса или телефона, поле для сообщения), Skype;
персонализация сотрудников – публикация фото и имен руководителей и ключевых специалистов;
видео или графика – фото офиса, ролик со схемой пешего маршрута;
юридические реквизиты – ОГРН, ИНН, кпп, юридический адресс, ФИО директора и другие нужные партнерам данные;
добавляйте QR-код с основной информацией о проезде;
кнопка «распечатать текстовую версию».
Если у вас много посетителей и активных клиентов, для формы обратной связи нужно предусмотреть капчу, которая поможет отсечь большое количество спама. Но при этом не забывайте, что капча – «отпугивающий» фактор для ряда посетителей, которые могут передумать отправлять сообщение.
Что такое хорошо, что такое плохо
Перед вами – две страницы контактов. Первая из них – в ТОП-10 Яндекса, вторая – находится за пределами ТОП-50. Используя полученные знания, оцените сами, из-за чего возникла такая разница.
Правильное оформление страницы "Контакты"
Неправильное оформление страницы "Контакты"
Как быть с контактами филиалов?
Если у компании есть несколько филиалов в рамках одного города или представительства в регионах, нужно позаботиться о создании отдельных страниц контактов для каждого из подразделений. Если это 2-3 филиала в одном городе, их контакты целесообразно указать на одной странице, но при этом нельзя допускать превращения страницы в «простыню». Если адресов много – создавайте отдельную страницу на каждый, а на общей странице сделайте карту с маркерами и ссылками на все отделения или краткий список со ссылками. Это понравится и пользователям, и поисковым роботам.
Немного сложнее организовать страницы контактов региональных подразделений. Вполне возможно, что придется разбивать адреса регионов по релевантным страницам. Однако в таком случае нужно учитывать геотаргетинг. В поисковых системах – геозависимая выдача. Проще говоря, жители Москвы или Санкт-Петербурга по любому коммерческому запросу будут видеть в выдаче разные сайты. Регион присваивается поисковиками при изучении указанных на странице «Контакты» данных. Поэтому для представительств будет логичнее сделать отдельные сайты на поддоменах и заниматься их продвижением в региональной выдаче.
Контакты и продвижение сайта
Инструменты Яндекс.Вебмастер и Google для вебмастеров позволяют сообщить поисковикам о регионе вашего сайта, услугах компании, графике ее работы, адресе и прочих важных данных, которые будут отображаться в выдаче. В Яндекс.Вебмастере для этого нужно воспользоваться инструментами «Регион сайта» и «Адреса и организации». В Google для этого предназначены «Google адреса». Кроме качественного сниппета это подарит возможность разместить данные компании в картографических сервисах – а это привлечет дополнительный трафик.
Размещение контактных данных на всех страницах
Телефон и другие контактные данные (или ссылку на них) необходимо указывать на каждой странице сайта. При этом они должны быть хорошо заметны, иначе посетитель, готовый позвонить и сделать заказ, может не найти ваших контактов и уйти к конкурентам.
Чтобы посетитель мог выбрать удобный для него способ заказа товара, укажите все свои контактные данные: телефон, электронная почта, Skype, ICQ и т. д. В большинстве случаев городской номер телефона вызывает больше доверия, чем мобильный.
Наличие удобной и информативной страницы контактов даст возможность создать эффективный канал коммуникации с посетителями, повысить уровень доверия к компании. Грамотная оптимизация этой страницы повысит привлекательность сайта для поисковых систем и сделает свой вклад в общую стратегию успешного продвижения по коммерческим запросам. Не стесняйтесь обращаться к профессионалам, чтобы добиться таких преимуществ.
Которые позволяют четко описывать блоки контента
Что такое HTML5?
HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.
Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
Тег Canvas для рисования контента непосредственно в браузере
«Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике
Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. .
Новый набор структурных элементов (тегов) в HTML5 видоизменяет способы структурирования HTML-документов. Новые структурные теги ориентированы на разделение HTML-документа на логические части. Название каждого структурного тега описывает тип контента, для хранения которого предназначен этот тег. Данная статья посвящена подробному описанию этих новых тегов.
История вопроса
В 1989 году Тим Бернерс-Ли (Tim Berners-Lee) создал первый вариант языка HTML с целью преодоления определенных ограничений, которые имелись у существовавших на тот момент методов доступа к информации в Интернете. На начальном этапе существования Интернета ориентирование в нем было сложной задачей. Контент в Интернете представлял собой совокупность отдельных документов, при этом не существовало простого метода навигации по этим документам. И действительно, пользователь должен был знать точный адрес искомого документа и ввести этот адрес вручную. Для решения этой проблемы Бернерс-Ли создал две технологии: протокол HTTP (Hypertext Transfer Protocol) и язык HTML (Hypertext Markup Language).
HTTP — это служебный протокол, с помощью которого Web-серверы доставляют контент. Посмотрите на адресную строку своего Web-браузера. Если ваш браузер показывает полный URL-адрес, то, скорее всего, этот адрес начинается с символов «http://». Эта часть URL-адреса говорит браузеру, протокол какого типа следует использовать при осуществлении запроса к Web-серверу. Когда Web-сервер получает запрос на какой-либо документ, то в большинстве случаев этот документ представлен в формате HTML или преобразуется в этот формат. Именно HTML-документ присылается в браузер, пославший этот запрос.
HTML — это язык сценариев, который говорит Web-браузеру, каким образом следует представлять контент. Внутри контента могут присутствовать ссылки на другие документы, что обеспечивает удобный для пользователя метод навигации между документами в Интернете.
Такое сочетание технологий HTTP и HTML обеспечивает быстрое и простое ориентирование в Интернет-контенте — для осуществления переходов между документами достаточно нажимать мышью на ссылки в тексте. После создания двух вышеупомянутых технологий Бернерс-Ли основал организацию под названием W3C (World Wide Web Consortium). Организация W3C возглавляла разработку первых четырех версий HTML.
Первоначально назначение Интернета состояло в обслуживании простых текстовых документов. Первые браузеры были ориентированы исключительно на текст (другими словами, они не имели никаких затейливых окон — на экране присутствовал только текст). Даже добавление изображений стало весьма значительным достижением — в момент их первого появления. Сегодня люди выполняют в Интернете множество дел — от отправки посланий по электронной почте до просмотра телевизионных программ. Интернет уже превратился в нечто гораздо большее, чем механизм для транспортировки простых текстовых документов. Новые функции и новые способы использования породили новые трудности и новые задачи, для решения которых язык HTML никогда не предназначался.
Организация W3C попыталась решить проблемы сегодняшнего Интернета с помощью стандарта XHTML 2.0 (Extensible Hypertext Markup Language). Однако этот стандарт не получил широкого распространения и к настоящему времени он фактически заброшен. В 2004 году, когда организация W3C концентрировала свои усилия на стандарте XHMTL 2.0, другая организация под названием WHATWG (Web Hypertext Application Technology Working Group) начала разработку стандарта HTML5, который был принят сообществом гораздо благосклоннее, чем стандарт XHTML 2.0. Организация W3C прекратила работы в области XHTML 2.0 и в настоящее время вместе с WHATWG занимается развитием спецификации HTML5.
Поддерживаемые браузеры
На момент написания данной статьи стандарт HTML5 еще не был выпущен официально. Большая часть контента в Web по-прежнему создается в соответствии со спецификацией HTML 4. Тем не менее, некоторые браузеры поддерживают спецификацию HTML5. Ситуация может оказаться непростой, поскольку каждый из этих браузеров способен поддерживать лишь некоторое подмножество функций HTML5. Перед созданием Web-сайта на базе HTML5 проверьте каждый из целевых браузеров на предмет поддержки функций, которые вы собираетесь использовать на своем сайте.
Обновленная декларация doctype
Вне зависимости от возможностей ваших целевых браузеров вы должны сообщать каждому браузеру, что хотите отображать своей контент с использованием спецификации HTML5. Это можно сделать с помощью декларации doctype .
Декларация doctype сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.
Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.
Таблица 1. Doctype-декларации и их возможности
Doctype-декларация
Возможности
Пример
HTML 4.01 strict
Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.
HTML 4.01 transitional
Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.
HTML 4.01 frameset
Аналогична декларации HTML transitional, но разрешает использование элементов frameset.
XHTML 1.0 strict
Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.
XHTML 1.0 transitional
Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.
XHTML 1.0 frameset
Аналогична декларации XHTML transitional, однако разрешает элементы frameset.
XHTML 1.1
Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.
К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .
Листинг 1. HTML5-декларация doctype
Декларация должна находиться в самом начале HTML-документа, перед тегом .
Новые структурные теги
Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат. С концептуальной точки зрения Web-страницу можно рассматривать как документ. Документы содержат заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.
В данном разделе на примере рассматриваются нынешние методы разделения HTML-документа. В последующих разделах статьи мы будем модифицировать первоначальный код с помощью структурных тегов HTML5 и в пошаговом режиме рассмотрим создание логической структуры документа.
Подход HTML 4
Даже если до этого вы создавали лишь простейшие HTML-документы, вы все равно знакомы с тегом div . В эпоху, предшествовавшую появлению HTML5, тег div являлся основным механизмом для создания блоков контента в HTML-документе. В качестве примера, в демонстрируется использование тегов div для создания простой страницы с заголовком, областью контента и нижним колонтитулом.
Листинг 2. Простая HTML-страница, использующая теги div
A Simple HTML Page Using Divs
Header
Content
Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.
Подход HTML5
HTML5 решает эту проблему посредством предоставления набора теглв, которые точнее определяют основные блоки контента, образующего HTML-документ. Вне зависимости от итогового контента, отображаемого Web-страницей, большинство Web-страниц состоит из различных сочетаний типовых разделов и элементов страниц.
Листинг 4. Добавление тега section
A Simple HTML Page
Header
This is an important section of the page.
Тег article
Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в .
Листинг 5. Добавление тегов article
A Simple HTML Page
Header
This is an important section of content on the page.
Perhaps a blog post.
Тег aside
Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в.
Листинг 6. Добавление тега aside
A Simple HTML Page
Header
This is an important section of content on the page.
Perhaps a blog post.
This is an important section of content on the page.
Perhaps a blog post.
Тег footer
Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в .
Листинг 7. Добавление тега footer
A Simple HTML Page
Header
This is an important section of content on the page.
Perhaps a blog post.
This is an important section of content on the page.
Perhaps a blog post.
К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.
Тег nav
Листинг 8. Добавление тега nav
A Simple HTML Page
Header
This is an important section of content on the page.
Perhaps a blog post.
This is an important section of content on the page.
Perhaps a blog post.
Итоговый вариант примера
В показан результат замены исходных тегов div новыми структурными тегами HTML5.
Листинг 9. Итоговый вариант примера
A Simple HTML Page
Header
This is an important section of content on the page.
Perhaps a blog post.
This is an important section of content on the page.
Perhaps a blog post.
Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div () с результирующим вариантом () наглядно демонстрирует назначение новых структурных тегов.
Заключение
Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div .
