Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.
В новом стандарте многое упростилось и теперь базовая часть выглядит так:
...
Новые теги HTML5В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Сделано это для поисковых роботов, чтобы они лучше распознавали код страниц и отделяли основной контент от вспомогательных элементов.
С использованием новых тегов пустой шаблон HTML5 может выглядеть так:
Заголовок страницы Меню навигации Боковая колонка SideBar Контент - основное содержимое страницы. Подвал сайта
Упрощение написания DOCTYPEВспомним как было раньше, в HTML4 тег DOCTYPE выглядел так:
Теперь же запись минимальна, проще, наверное некуда:
Похожие упрощения произошли и с остальными тегами, так что переход на стандарт HTML5 существенно облегчает написание.
Необязательные теги в HTML5Новый стандарт принес много послаблений верстальщикам. В частности, использование элементов HTML, HEAD и BODY уже не является обязательным для разметки HTML5. Если их нет, то браузер все равно считает, что они существуют. По сути из обязательных в HTML5 остался только .
Трактовка русского языка как основного языка HTML документаТег определяет язык документа. В сети регулярно возникают дискуссии о правильном его написании, в частности правильность написания «ru-RU». Я склоняюсь к варианту, что «-RU» является избыточным, так как у русского языка нет диалектов и вариантов написания как у Английского языка (Британский и Американский). Суффикс RU уточняет, где говорят на русском языке. То есть если en-US означает «английский язык на котором говорят в США», то ru-RU означает «русский язык на котором говорят в России», что является излишним.
В прочем, ничего страшного не случится, если вы и дальше будете использовать вариант «ru-RU».
Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.
В этой статье мы будем постепенно создавать html страницу, и оформлять ее семантическими HTML5 тегами.
Рисунок - Семантическая структура для HTML5 страницы.
DOCTYPE и meta теги в заголовке страницыНачнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:
Заголовок страницы
Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.
Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные теги, то есть это блочные элементы. Но если не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.
Заголовок страницыШапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.
Site title
Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.
Site title
site slogan
Замечание по поводу тега H1
Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)
До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.
Навигация на страницеОформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.
Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!
...основной контент страницы...
Оформление статьиТег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.
На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.
... Article title 30 Сентября Article sub-title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.
Сайдбар или колонка с виджетамиДля каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:
Widget title ... Последние записи ... Популярные комментарии ...
Тег sectionТег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги ( – ) для обозначения темы секции.
В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»
Пример использования тега section в списке с перечислением городов:
An Event Apart Cities
Join us in these cities in 2010.
SeattleFollow the yellow brick road.
BostonThat"s Beantown to its friends.
MinneapolisIt"s so nice.
Accommodation not provided. Подвал сайта — FooterПодвал сайта оформляется тегом
© 2015 сайт Copyright
ЗаключениеДля проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.
Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более высоком рейтинге сайта в поисковой выдаче.
В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org
Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.
Статьи и материалы
Лишнее свидетельство того, что, нравится нам это или нет, но HTML5 обосновался здесь всерьёз и надолго, УЖЕ превратившись в стандарт. Мы делали интересные обзоры по данной теме в нашем журнале и прежде, приводя примеры роскошных новых сайтов, сконструированных средствами HTML5. Чтобы не повторяться, я решил предложить вам новую подборку образцов, не вошедших в предыдущие публикации, наглядно демонстрирующих передовые достижения, ставшие возможными, благодаря HTML5. Некоторые из них, правда, не такие уж новые, но есть и совсем свежие примеры. А также несколько сайтов, в оригинальном оформлении которых прослеживаются, пусть пока и не слишком явно, новые, но уже прижившиеся приёмы.
Надеюсь, подборка вдохновит и порадует вас. Всемирная паутина ждёт своих новаторов!
Хотелось вам когда-нибудь увидеть эпизоды из собственной жизни в качестве видео-ряда клипа на песню одной из ваших любимых групп? Благодаря HTML5, это стало не только возможным, но и легко осуществимым в вашем браузере. Заходите на страницу The Wilderness Downtown и указывайте там адрес дома, в котором прошло ваше детство. А дальше смотрите и наслаждайтесь удивительным путешествием в ваше прошлое, куда вас под музыку The Arcade Fire отправят Google Maps и Крис Милк (Chris Milk, режиссёр фильма).
Компактная и гибкая ОС на основе Linux, обеспечивающая вам беспрепятственный доступ к нужным приложениям – как сетевым, так и встроенным.
Хотите посмотреть на слово или фразу, набранные всеми шрифтами, заложенными в ваш компьютер, и представленные немного удобнее, чем в развёртывающемся меню? Что ж, пожалуйста. Попробуйте сами!
Почему эта игра не попалась мне в начальной школе, когда я учился печатать? Серьёзно, если сумеете оторваться от неё, не дойдя до "10 атаки", то вы - более волевой человек, чем я. Z-type стимулирует развитие навыков быстрого и грамотного набора текста, используя элемент HTML5 Canvas, звуковые эффекты и javascript в космическом антураже, где вам угрожают пришельцы и астероиды. Давайте, попробуйте!
Кто сказал, что прямолинейность и броскость (присущая, например, Flash-элементам) рррраздражают? Уж точно, не Nike, ведь сайт этой фирмы, прекрасно оформленный и отнюдь не режущий глаз, наглядно демонстрирует нам возможности HTML5 в плане отображения природной красоты совершенно по-новому. Зайдите и посмотрите.
Новейший и лучший (однако, это спорное утверждение) способ представить доказательства того, что увиденное вами в небе не было иллюзией, - запечатлеть его на этом HTML5-холсте, разработанном ребятами из команды Klowdz. Можно даже купить оттиски ваших художеств! А ещё они обещают в скором будущем открыть "состязательный" раздел, где вы сможете до бесконечности спорить с друзьями о том, правое полушарие чьего мозга развито лучше.
Ещё один из любопытных пробных проектов серии "Chrome Experiments", Canvas Cycle похож на окно редактирования, встроенное в вашу игровую приставку Super Nintendo. С его помощью можно выбирать 8-битные эпизоды из целого их ряда, настраивать параметры воспроизведения звука, масштабировать изображение, задавать скорость цикличного проигрывания (движения воды/звукового сопровождения), применять различные модификации циклов и, естественно, варьировать цвета.
Трёхмерный калькулятор, сконструированный средствами HTML5, и позволяющий вам рассматривать объёмные диаграммы путём их вращения с помощью кнопок мыши. Что тут можно добавить? Вращайте!
Эта гремучая смесь "зацепила" меня сильнее всех остальных примеров в нашей подборке. Почему? Да потому, что API-интерфейс от Google Maps позволяет вам снимать с изображения его модифицированные кальки, используя холст HTML5 Canvas. Замечательнее всего то, что возможности применения этой функции, очевидно, безграничны, при всей её практичности. В нашем конкретном случае мы видим, сколько велосипедов сейчас можно взять на прокат в пунктах вело-сети London Cycle, по данным, полученным через API-интерфейс Boris Bikes.
Веб-приложение, дающее вам возможность извлекать картинки с различных сетевых ресурсов, подобных Flickr, и редактировать/сохранять их, используя для обработки основной набор весьма действенных инструментов.
От автора: привет друзья! В данной статье я хочу немного рассказать вам про html5. Рассказать, что такое html5, что в нем нового. Какие новые возможности он предоставляет разработчикам. HTML5 очень широкое понятие. И некоторые технологии, которые называют в HTML5, вообще говоря, не являются html5, но обо всем по порядку…
Первое - это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.
Второе - это «большой», маркетинговый, трендовый HTML5, зонтик для целого поколения новых технологий, включающий как непосредственно спецификацию HTML5, так и множество модулей CSS3, различные API для JavaScript, да и сам новый стандарт для JavaScript - ECMAScript5.
Рассмотрим некоторые ключевые особенности html5:
Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.
Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.
В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.
Что дает HTML5?Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.
Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.
Цели HTML5Кратко цели html5 можно назвать так:
Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.
Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.
Обеспечение согласованности между браузерами и устройствами.
Сделать все это настолько прозрачным, насколько это возможно.
Новые возможности HTML5
Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.
Новые элементы html5Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:
и
для любых видов меню
для сайдбаров или связного контента
для статей
практически то же, что и div
и теги позволяют проигрывать видео без плагинов
для рисование на странице использую javascript
для вставки внешнего контента на страницу
Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.
Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).
Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.
Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:
Audio and video позволяет проигрывать видео в браузере без плагинов.
Geolocation: определяет положение посетителя.
Drag and drop: например, для загрузки файла перетаскиванием его в браузер.
Application cache: обеспечивает поддержку открытия сайтов offline.
Web workers: запускает JavaScript в фоновом режиме
Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.
Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies
Примеры использования html5Давайте посмотрим на html5 в действии! HTML5 позволяет создавать новую, более простую и чистую разметку для страниц. Код становится более контентоориентированным и его проще читать и понимать. Вот пример простой веб-страницы на html5:
Page Title
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.
Article SubheadVestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.
Sidebar ContentCopyright Your Name Here 2014. All Rights Reserved.
< ! doctype html > < html lang = "en" > < head > < meta charset = "utf-8" > < title > < / title > < meta name = "author" content = "" / > < meta name = "description" content = "" / > < link rel = "stylesheet" href = "assets/css/style.css" / > < ! -- [ if lt IE 9 ] >
< ! [ endif ] -- > < / head > < body > < header > < h1 > < a href = "/" > Page Title < / a > < / h1 > < nav > < ol > < li > < a href = "" > Nav Link 1 < / a > < / li > < li > < a href = "" > Nav Link 2 < / a > < / li > < li > < a href = "" > Nav Link 3 < / a > < / li > < / ol > < / nav > < / header > < article > < h1 > Article Header < / h1 > < p > Etiam pretium odio eu mi convallis vitae varius neque pharetra . Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas . < / p > < h2 > Article Subhead < / h2 > < p > Vestibulum lacus erat , volutpat vel dignissim at , fringilla ut felis . < / p > |
HTML5 опять спасает от поиска JS реализации. Если нужно чтобы фокус по умолчанию устанавливался на определенный input, то ему достаточно задать атрибут autofocus .
Здесь так же возможны оба стиля написания, но я предпочитаю XHTML и пишу "autofocus=autofocus" . Хотя можно было написать только имя атрибута.
13. Поддержка аудиоНам больше не нужны сторонние плагины для вывода аудио на страницах. HTML5 предоставляет нам элемент . Теперь нам не нужно заботиться о всяких плагинах для этого. К сожалению с поддержкой браузерами у HTML5 audio все тоже не очень гладко. Сегодня хорошим стилем считается заботиться от обратной совместимости.
Download this file.
Mozilla и Webkit не полностью поддерживают такое решение. Firefox хочет видеть.ogg или.wav файлы. Поэтому, сегодня следует создавать и указывать оба формата.
Safari не поддерживает ogg, но понимает mp3 и wav. IE9+ принимает AAC. MP3, более старые версии не поддерживают тэг. Опера работает с ogg и wav.
14. Поддержка видеоКак и в случае с , HTML5 video работает только в более или менее современных браузерах. К слову, не так давно YouTube анонсировал HTML5 плеер для своих видео . К сожалею, спецификации HTML5 не определяют кодек для видео, поэтому браузеры в этом плане различаются. IE9 и Safari поддерживают видео формата H.264, в то время как Opera и Firefox поддерживают theora и WebM форматы. Поэтому для гарантированной работы следует использовать 2 формата.
