Сайт на HTML 5 — примеры кода

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

Если вы не идете зa тем, чего хотите, у вaс никогдa это не появится.
Если вы не спрaшивaете, ответ всегдa будет «нет».
Если вы не делaете шaг вперед, то остaетесь нa том же месте.
Норa Робертс

Будет ли новая версия HTML 5 помощником вебмастерам, улучшающим показатели в поисковой выдаче? Да, несомненно, так как новый стандарт, который до сих пор находится на стадии тестирования, уже наделал много шума и стал прорывом за последнее десятилетие в развитии HTML в целом. Поэтому его возможности необходимо использовать при создании сайтов, к тому же поисковые системы достаточно благосклонны к нововведениям стандарта.

С развитием HTML 5 разрабатывается стандарт семантической разметки, который уже поддерживается Яндексом и, кстати, рекомендуется им к применению.

Содержание:

• Возможности HTML 5
• HTML5 сегодня
• Новые теги HTML 5
  • Структурные элементы
  • Блочные элементы
  • Форматирование текста
  • Вставка мультимедиа
  • Интерактивные элементы

Возможности HTML 5

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

Применение HTML 5 достаточно актуально и для мобильных устройств, потому что новинки Apple и Mac, вместе с последней версией Apple Safari web browser, поддерживают новую версию языка гипертекстовой разметки, а также CSS 3 и JavaScript.

• Упрощенная вставка на web-страницу аудио- и видеоматериалов, без дополнительных плагинов.
• Многоколоночная верстка текста.
• Возможность рисования на web-страницах.
• Дополнительная поддержка мобильных устройств.
• Поддержка работы в оффлайновом режиме (при отключении от Интернета).

HTML 5 сегодня

Многие web-дизайнеры боятся, использовать технологии нового стандарта, из-за отсутствия поддержки некоторых браузеров ссылаясь на то, что это связывает им руки и не даёт применить все свои профессиональные возможности. А вот когда новая версия HTML 5 будет полностью протестирована и официально принята и одобрена общественностью, тогда они и выйдут из тени и поднимут Интернет на совершенно иной уровень, полный захватывающих возможностей.

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

Раз так, тогда необходимо осознать тот факт, что даже с поддержкой новых технологий HTML 5 всё равно не получится добиться одинакового отображения в браузерах пользователей глобальной паутины. Спросишь почему? Да потому, что далеко не все пользователи сети будут использовать новые версии этих самых браузеров. Многие как отключали показ изображений и JavaScript, так и будут их отключать. Кто-то будет использовать мониторы с небольшим разрешением экрана или наоборот, а кто-то не установит необходимые плагины. И что самое интересное, все это абсолютно нормально.

Интернет по своей сути достаточно гибкая среда и web-мастеру необходимо учитывать этот факт, а не устанавливать четкие границы между доступными технологиями и своими проектами. Чем раньше начать применение новых технологий, тем быстрее они будут внедряться. В этом процессе развития, более продвинутые версии браузеров будут вытеснять своих предшественников, так как web-разработчики будут подталкивать пользователей Интернета к их обновлению. Запустив колесо прогресса, именно web-мастер будет решать, что будет отображаться в браузере, а что нет.

На смену сегодняшним технологиям придут более совершенные. Дизайн будущего необходимо создавать уже сегодня, причём большой ошибкой будет цепляться за прошлое, пытаясь использовать старые хаки и выдумывать обходные пути, подстраиваясь под старые браузеры, которые устареют очень быстро. Так стоит ли сдерживаться от применения новых методов кодирования в HTML 5? Думаю необходимо двигаться вперёд и начинать реальное применение нового стандарта HTML 5 уже сегодня, для того, чтобы ускорить динамику развития Интернета в более интересную и инновационную среду.

Новые теги HTML 5

Структурные элементы

Если ты, дорогой друг, знаком с вёрсткой html-документа, то наверное использовал тег div, которым приходилось определять контейнеры в различных частях страницы. В новой версии HTML 5 для каждой части страницы имеется свой элемент.

• header — определяет верхнюю область сайта (шапка) или раздела в которой расположен заголовок. Закрывающий тег обязателен.
• nav — объединяет ссылки навигации по сайту, допускается использовать несколько тегов < nav > в документе. Закрывающий тег обязателен.
• section — задает раздел документа, который может включать в себя заголовки, шапку, подвал и текст. Закрывающий тег обязателен.
• article — задает описание сайта или web-страницы. Закрывающий тег обязателен.
• footer — задаёт нижнюю область сайта (подвал) или раздела, в нём обычно располагается имя автора, дата, контактная и правовая информация. Закрывающий тег обязателен.

Блочные элементы

• aside — создает блок сбоку от контента для расположения рубрик, меток и другой информации. Закрывающий тег обязателен.
• figure — применяется для группирования любых элементов, например, изображений и подписей к ним. Закрывающий тег обязателен.

Форматирование текста

• mark — помечает текст как выделенный, который ничем не отличается от обычного, но его вид может быть изменен посредством css. Закрывающий тег обязателен.
• time — текст находящийся внутри тега обозначается как дата или время. Закрывающий тег обязателен. Атрибуты:
  • datetime — задает дату и время.
  • pubdate — указывает дату публикации.
• progress — используется для отображения прогресса завершенности задачи, изменение значения происходит через JavaScript. Закрывающий тег обязателен. Атрибуты:
  • value — текущее значение.
  • max — максимальное значение.
• meter — используется для вывода значения в определенном диапазоне, в основном для отображения числовых значений. Закрывающий тег обязателен. Атрибуты:
  • value — обязательный атрибут, задаёт значение.
  • min — задает максимальное значение.
  • max — задает минимальное значение.
  • low — определяет предел для низкого значения.
  • high — определяет предел для высокого значения.
  • optimum — оптимальное значение.

  Вставка мультимедиа

  • audio — добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице, путь к файлу задается через атрибут src или вложенный тег < source >. Закрывающий тег обязателен. Атрибуты:
    • • autoplay — звук начинает играть сразу после загрузки страницы.
      • controls — добавляет панель управления к аудиофайлу.
      • loop

    — повторяет воспроизведение звука с начала, после его завершения.

    • • preload

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

    • • src

    — указывает путь к воспроизводимому файлу.

  • video — Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице, путь к файлу задается через атрибут src или вложенный тег < source >.
    Закрывающий тег обязателен. Атрибуты:
    • autoplay — видео начинает воспроизводиться автоматически после загрузки страницы.
    • controls — добавляет панель управления к видеоролику.
    • height — задает высоту области для воспроизведения видеоролика.
    • loop — повторяет воспроизведение видео с начала, после его завершения.
    • poster — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
    • preload — используется для загрузки видео вместе с загрузкой веб-страницы.
    • src — указывает путь к видеофайлу.
    • width — задает ширину области для воспроизведения видеоролика.

    Интерактивные элементы

    • menu — предназначен для отображения списка пунктов меню, аналогично тегам < ol > и < ul > внутри контейнера < menu > список создается с помощью тегов < li >.Закрывающий тег обязателен. Атрибуты:
      • label — устанавливает видимую метку для меню.
      • type — определяет тип меню.
    • command — создает команду в виде переключателя, флажка или обычной кнопки, < command > располагается внутри < menu >. Закрывающий тег не нужен. Атрибуты:
      • checked — активирует команду, доступен только если type установлен как radio или checkbox.
      • disabled — задает, доступна команда или нет.
      • icon — адрес изображения, которое показывается как команда.
      • label — наименование команды.
      • radiogroup — задает имя группы переключателей, доступно только если type установлен как radio.
      • type — определяет тип команды (checkbox, command, radio), по умолчанию command.
    • datagrid — создает список вариантов, которые можно выбирать при наборе в текстовом поле.
    • details — используется для хранения информации, которую можно скрыть или показать по требованию пользователя, по умолчанию содержимое тега не отображается, для изменения статуса применяется атрибут open.