HTML 5 теги и возможности, которые они дают разработчикам


Содержание материала:

Семантическая структура для HTML5 страницы. Семантика в HTML5

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про новые семантические теги в HTML5. Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

Семантическая структура для HTML5 страницы

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

Рисунок — Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head :

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

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

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

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги (

) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

Подвал сайта — Footer

Подвал сайта оформляется тегом

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он показывает структуру страницы блокам и заголовкам.

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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

Новые структурные теги HTML5

Которые позволяют четко описывать блоки контента

Что такое HTML5?

HTML5 — это новейшая версия языка Hypertext Markup Language (HTML), представляющая собой наиболее радикальную ревизию этого языка за всю его историю. В этой версии появилось множество новых функций в различных областях. К наиболее значимым из них относятся следующие.

  • Встроенные мультимедийные теги для поддержки аудио- и видеоконтента
  • Тег Canvas для рисования контента непосредственно в браузере
  • «Разумные» формы, позволяющие осуществлять такие операции, как валидация посредством использования требуемого атрибута
Совершенствование квалификационных навыков по данной тематике

Данная статья является частью программы «Путь к знаниям» по совершенствованию квалификационных навыков (Knowledge Path). См. Основы HTML5.

Новый набор структурных элементов (тегов) в 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 специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Топ-пост этого месяца:  Основы JavaScript Строки

Концепция 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.

Листинг 1. HTML5-декларация doctype

Декларация должна находиться в самом начале HTML-документа, перед тегом .

Новые структурные теги

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

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

Подход HTML 4

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

Листинг 2. Простая HTML-страница, использующая теги div

Этот подход работает прекрасно; тег div — это превосходный элемент общего назначения. Тем не менее, без рассмотрения атрибута id у каждого тега div трудно сказать, какой раздел документа представляет каждый тег div . Можно приводить доводы в пользу того, что при надлежащем именовании атрибута id его возможностей как индикатора вполне достаточно, тем не менее, использование атрибутов id не является обязательным. Существует множество разновидностей атрибута id , которые могут рассматриваться как одинаково валидные. Сам тег div не содержит указаний на то, какой тип контента ему было поручено представлять.

Подход HTML5

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

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

Остальная часть статьи посвящена описанию каждого из вышеперечисленных тегов. Кроме того, мы рассмотрим целевое использование этих тегов, для чего будем постепенно видоизменять первоначальный пример кода, созданного на базе тега div (см. листинг 2) с целью поэтапного задействования новых структурных тегов HTML5.

Тег header

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

Листинг 3. Добавление тега header

Элемент doctype в листинге 3 также был изменен — чтобы показать браузеру, что при отображении страницы он должен использовать HTML5. Во всех последующих примерах предполагается, что мы тоже используем корректный элемент doctype.

Тег section

Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы. После добавления тега section к примеру кода мы получаем код, показанный в листинге 4.

Листинг 4. Добавление тега section

Тег article

Тег article обозначает важные разделы контента внутри Web-страницы. Например, в блоге каждый отдельный пост представляет собой значимый фрагмент контента. После добавления тега article к примеру кода мы получаем код, показанный в листинге 5.

Листинг 5. Добавление тегов article

Тег aside

Тег aside указывает, что контент, который содержится внутри этого элемента, связан с основным контентом данной страницы, но не является его частью. В определенном смысле его применение аналогично внедрению комментария в тело текста (подобно данному комментарию). Контент в круглых скобках предоставляет дополнительную информацию об элементе, содержащем этот контент. После добавления тега aside к примеру кода мы получаем код, показанный в листинге 6.

Листинг 6. Добавление тега aside

Тег footer

Тег footer помечает содержащийся в нем контент как нижний колонтитул текущего документа. После добавления тега footer к примеру кода мы получаем код, показанный в листинге 7.

Листинг 7. Добавление тега footer

К этому моменту все теги div из исходного примера были заменены структурными тегами HTML5.

Тег nav

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

Листинг 8. Добавление тега nav

Итоговый вариант примера

В листинге 9 показан результат замены исходных тегов div новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера

Несмотря на то, что в демонстрационных целях этот пример был максимально упрощен, сравнение исходного примера на базе элементов div (листинг 2) с результирующим вариантом (листинг 9) наглядно демонстрирует назначение новых структурных тегов.

Заключение

Новые структурные теги HTML5 описывают контент, который они содержат, и помогают разделить документ на логические разделы. Подобно автору, пишущему книгу, автор документа по-прежнему сможет сам решать, когда и где использовать эти новые элементы в своем документе. Хотя два автора, пишущих одну и ту же книгу, могут выбирать разные способы для разбиения этой книги на главы, использование глав по-прежнему является единообразным подходом к разбиению книг на разделы. Аналогично, хотя два автора некоторой Web-страницы вполне могут выбрать разные структуры, новые структурные элементы HTML5 предоставляют разработчикам Web-страниц новые единообразные возможности, которые не обеспечивались прежними тегами div .

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: New HTML5 structural tags
  • Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
  • WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
  • W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.

  • HTML5 (Wikipedia): Дополнительные сведения о HTML5.
  • Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
  • Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

HTML 5 теги и возможности, которые они дают разработчикам

Данная рубрика заменит Вам полноценный «HTML5 учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML5.

Расширяем возможности HTML за счёт создания собственных тегов

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

Определение доступности атрибута HTML5 с помощью JavaScript

Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

HTML5: API работы с вибрацией

HTML5 — глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Создание форм с помощью Webix Framework — 4 практических примера

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

Знакомство с фрэймворком Webix

В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

Отключение HTML5 валидации

Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.

5 устаревших фишек в HTML5

В этой статье мы рассмотрим пятёрку элементов HTML5, которые устарели и были удалены из спецификации.

10 полезных тегов и атрибутов HTML5, которые Вы должны знать!

Здравствуйте, уважаемые читатели XoZbloga! HTML5 в настоящее время уже достаточно активно используется при разработке веб интерфейсов и приложений. Мы все знаем, что HTML5 привнес много новых тегов, атрибутов и элементов. Некоторые из них действительно полезны для наших сайтов. Таким образом, в этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах, которые вы должны знать и использовать на практике!

Структурная разметка HTML5

В HTML5 появилось несколько новых тегов, которые призваны заменить уже прижившиеся блоки div (не все конечно �� ). Внешне, так сказать, ничего не изменилось, но в сущности новые теги несут в себе смысловую (семантическую) нагрузку, и строго определяют для каждого блока его место и роль:

  • — Определяет область «шапки» сайта с логотипом, первичной навигацией и тд.;
  • — Определяет «подвал», колонтитул веб страницы сайта или раздела, в котом обычно размещается дополнительная информация;
  • — Определяет блок, который служит для группировки однотипных объектов, или для разделения текста на разделы;
  • — Определяет автономную часть страницы, это может быть сообщение форума, журнала или газетную статью, запись в блоге и тд.;
  • — Определяет область навигации, как правило список ссылок;

Форма

Новые типы input полей

HTML5 введены новые типы input полей. Они позволяют писать более семантически правильный код, адаптированный для мобильных устройствах. Например при использовании типа email происходит автоматическая валидация введенного текста, на предмет идентичности адресу электронной почты и тд.

Регулярные выражения для валидации

До появления HTML5, при использовании формы на вашем сайте, вы должны были пропускать введенный текст через JavaScript для проверки. Теперь с HTML5 и атрибутом pattern , вы можете определить шаблон регулярного выражения для проверки данных.

input type = «text» title = «электронный адрес» required pattern = «[^@]+@[^@]+\.[a-zA-Z]<2,6>» / >

input type = «text» title = «по крайней мере восемь символов, содержащих хотя бы одну цифру, один символ нижнего и верхнего регистра» required pattern = «(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).<8,>» / >

input type = «text» required pattern = «(\+?\d[- .]*)<7,13>» title = «интернациональный, национальный или местный номер телефона» / >

Автозаполнение с HTML5 datalist

Использование dataList элемента HTML5, позволяет создавать список данных для автозаполнения полей ввода. Супер полезно!

input name = «frameworks» list = «frameworks» / >

id = «frameworks» >
option value = «MooTools» >
option value = «Moobile» >
option value = «Dojo Toolkit» >
option value = «jQuery» >
option value = «YUI» >
/ datalist>

Автофокус полей формы

Атрибут autofocus позволит вам установить фокус на любой элемент формы (в том числе кнопку).

Замещающий текст поля

Это тот самый (серенький) текст который находится к примеру в поле поиска и призывает ввести искомое слово и нажать Enter. В HTML5 замещающий текст реализуется вот-так:

Скрытые элементы с помощью HTML5

В HTML5 введен атрибут hidden , который позволяет скрыть определенный элемент, на подобии того как это применяется в CSS с использованием dispaly: none

HTML5 prefetching — предварительная загрузка

С помощью этого механизма можно заранее кэшировать указанный ресурс (картинку, страницу или файл), например сразу подгрузить стили которые будут использованы на сайте:

HTML5 и теги

C помощью этих тегов пользователь может манипулировать отображением (раскрывать и скрывать снова), какой либо дополнительной информации.

Атрибут download

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

Чтобы оставаться в курсе свежих статей и уроков следите за XoZblog в Facebook или добавляйте в круги на Google+. Не забывайте оставлять комментарии к статьям и урокам. Спасибо!

Семантическая разметка HTML5: использовать или нет?

Введение

Вышедшая в 2014 году пятая версия HTML имеет значительные отличия от HTML4 – это неудивительно, так как временной разрыв между версиями составляет — если брать в расчет версию 4.01 — почти 15 лет! Например, в HTML5 было введено понятие DOM (Document Object Model — «объектная модель документа»), которое существовало и до этого, но не являлось частью языка. Противоречивые мнения вызвало введение семантических тегов: одни считают, что они значительно облегчили жизнь как верстальщикам, так и интернет-пользователям, другие утверждают, что предыдущая версия разметки выглядит более логичной и понятной, а семантические теги являются избыточными. В данной статье мы попробуем ответить на вопрос, который периодически всплывает в различных интернет-сообществах, — зачем нужны семантические теги, и нужны ли они вообще?

Зачем нужны семантические теги

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

Это нововведение уже нашло свое применение в мире смартфонов и ридеров – например, используя браузер Safari на iPhone или iPad, вы можете перейти в режим чтения, когда на экране выводится только текстовая информация страницы – и воспринимать ее гораздо легче, ведь нет отвлекающих элементов в виде картинок, баннеров, рекламы. Однако этот режим будет доступен лишь в том случае, если страница имеет семантическую разметку, благодаря которой браузер может понять, где находится заголовок, где текст, а где навигация. Как раз ту разметку, о которой идет речь.

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

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

Структура документа в HTML4 и HTML5

Чтобы различие между версткой было более наглядным, рассмотрим реализацию структуры документа в HTML4 и HTML5 в схемах:

Несложно заметить, что обновленная разметка представляет собой более прозрачную и интуитивно понятную структуру, которая не только удобна при разработке, но и отвечает изначальной философии веб-разработчиков.

Новые семантические элементы разметки HTML5

При этом следует отметить, что в HTML5 не исчезли какие-то старые элементы – наоборот, теперь разработчики могут использовать новые, более удобные теги, каждый из которых выполняет свою особенную функцию. Ознакомимся с основными элементами:

— формирует верхнюю часть элемента или страницы (шапку, основной заголовок или группу заголовков), при этом может располагаться в любой части страницы или вообще отсутствовать;

Ранее группу заголовков (например, уточняющие подзаголовки) советовали объединять тегом , но позднее было принято решение удалить этот элемент из спецификации, поэтому использовать его не рекомендуется.

Название

— создает раздел с навигационными ссылками на странице или на сайте; в качестве элементов панели навигации могут выступать теги списков

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

С короткими списками ссылок (например, в подвале) тег использовать не рекомендуется. Используйте данный тег для главной навигации и поиску по сайту, а также внутренней навигации.

— разделяет страницы или записи на тематические блоки, но при этом, в отличие от тега

— формирует нижнюю часть элемента или страницы, которая обычно состоит из технической и юридической информации, контактных данных;

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

Вывод

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

HTML5 — новые возможности

Свое развитие язык HTML начал в 1990 году. Версия HTML4 была внедрена в 1997 году и используется до настоящего времени. И вот свершилось, вышла новая версия – HTML5. Его создатели, разработчики WHATWG ( группа создания Гипертекстовых Прикладных Технологий в Веб), прогрнозируют и надеются на серьезный скачок в его эволюции.
Поскольку версия HTML4 уже не всегда удовлетворяет требованиям сегодняшнего дня, в 2004 году началась работа над новой версией. Работа продолжается, но результаты этих трудов уже начали применять. Люди старались учесть все последние наработки в технологии веб-дизайна.

Возможности веб-дизайна в html5

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

Также необходимо обратить внимание на возможность отображения страниц без использования дополнительных плагинов для браузеров . В частности, просмотр видио возможен исключительно средствами HTML5, без традиционного приложения Adobe Flash Player. Для этого будут использованы теги audio и video . Это хорошо скажется на совместимости и на той же скорости загрузки страниц. Ведь все распространенные браузеры уже поддерживают стандарт HTML5. Функциональность и мультимедиа-возможности нового стандарта не уступают всем наработкам его предшественника, использующего для этого необходимые дополнительные плагины. Разработчики обещают максимально возможную совместимость с устаревшими браузерами, чтобы они могли корректно отображать страницы на новом стандарте.

Оптимизация и структурирование

Можно сказать, что в вопросах оптимизации и структурирования страниц сделан большой шаг вперед, можно даже сказать скачок. Дело в том, что для структурирования добавлены абсолютно новые теги:
Header, тег заголовка, содержит логотип, наименование, меню
Sidebar, тег боковых колонок
Article, тег основного контента страницы
Section, тег для разбивки текста на части
Footer, тег нижней части страницы.

При помощи этих тегов очень удобно разбивать страницу на все традиционные части. И эти возможности необходимо максимально использовать веб-дизайнером и сео-оптимизаторам. Эти теги существенно повышают эффективность индексации страниц поисковыми системами . Они будут больше акцентировать внимание на данных в теге Article, содержащим основную информационную часть страницы.

Работа со ссылками

В новом стандарте даны и новые возможности работы со ссылками. Это реализованио за счет использования следующих атрибутов, используемых для описания ссылки.
author, указывает адрес страницы об авторе
external, внешняя ссылка
help, ведет на страницу помощи
license, ведет на страницу лицензирования
alternate, указывает альтернативный адрес
next/prev, ведут на следующие и предыдущие страницы
nofollow, закрывает ссылки от индексации.
При использовании этих атрибутов улучшается индексация ссылок и уменьшается количество ошибок при индексации.

Этой информацией я делюсь с вами по-горячему. Сам недавно познакомился и теперь осознаю, что нам это может дать. Конечно, возникают вопросы о том, как конкретно и с пользой использовать новый стандарт? Когда и как его будут использовать популярные CMS и, в частности, WordPress? И, самое интересное, как действительно его будут воспринимать поисковые системы ? Особенно интересно поведение Яндекса, который всегда отличается своей точкой зрения на большинство вопросов.

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

Для тех, кто хочет разобраться с этой темой более основательно, ниже я привожу пару ссылок. Здесь информация дана в виде справочника по HTML5, расширяйте кругозор с этим стандартом более подробно, если возникнет в этом необходимость.
Ссылка на первый ресурс http://ru.wikibooks.org/wiki/Html5
Ссылка на второй ресурс http://htmlbook.ru/html5

Да, поделюсь еще одной новостью, я обновил версию WordPress до последней 3.3.1. Все прошло на удивление гладко, в отличие от предыдущего обновления, интерфейс немного поменялся, стал поудобнее, мне кажется. Тема у меня, напомню, своя, сделал при помощи программы Artisteer. Конфликтов никаких не возникало, плагины тоже все на месте, не выеживаются. Копию предварительно сделал по FTP, на свой компьютер.
На этом закругляюсь, всем успехов, спасибо за внимание.

Правила применения основных тегов HTML5

Введение

Все мы уже знаем (ну или что-то слышали об) основных правила применения элементов разметки HTML5. Появилось много «плюшек» и “вкусностей” в новой спецификации HTML. Вместе с тем, появились новые элементы разметки. Но не все помнят/знают, как их использовать правильно.

Коротко остановлюсь на главных нововведениях HTML5:

  1. Новые элементы: header, footer, section, article, video, audio, progress, nav, meter, time, aside, canvas;
  2. Новые значения для атрибута type тега ;
  3. Новые атрибуты HTML5 для элементов, такие как: dragable, contenteditable, hidden, contextmenu, data-*, dropzone, role, spellcheck[8] и т.д.;
  4. Атрибуты class, dir, id, lang, style, tabindex, title, существовавшие в HTML4, теперь можно применять ко всем елементам HTML разметки;
  5. Устаревшие элементы HTML страницы, которые частично поддерживаются и не рекомендуются к ипользованию: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt, u.

Итак, более детально рассмотрим, как же правильно использовать основные новые теги.

Элемент

Элемент main >содержит главную информацию вашего сайта . Такие повторяющиеся элементы как логотип, окно поиска, меню навигации не рекомендуется вкладывать в main > . Также не стоит помещать сам элемент main > внутрь элементов article >, aside >, header >, footer > или nav > .

Элемент

В элемент article > следует помещать тот контент, который может быть удален без ущерба для всего сайта. К примеру, краткое описание новостей, рекламный баннер, статья, комментарии. Можно вкладывать article > в article >, что будет связывать вложенные элементы article > с родительским.

Элемент

Элемент header >, как понятно из названия, используется для оглавления отдельного контента или всей страницы. Должен содержать заглавие, дату статьи и т.д.

Элемент

Элемент footer > служит для предоставления информации об авторе статьи/страницы, ссылки на авторские права и т.д. Обычно является прямым потоком тега body > (помещается сразу за элемент body > ).

Элемент

Этот элемент содержит информацию об окружающем контенте, дополнительную информацию пользователю. Может содержать такой элемент, как nav > , сноски, ссылки и т.д.


Элемент

Предназначен для предоставления контактной информации о статье или всей странице. Стоит отметить, что этот элемент часто помещают в

, для размещения ссылок для связи с авторами страницы.

Элемент

Элемент nsfw > (англ. — Not Safe For Work – небезопасно для отработки) используется для размещения на странице контента сомнительного характера. Часто этот тег используют для размещения порнографии. Чтобы браузер не отображал такой контент, используют CSS код

Элемент

Элемент предназначен для размещения видео контента на странице. Для корректного отображения контента стоит прописать дополнительно атрибуты width, height, src, controls. Ваш код будет выглядеть примерно так:

video width =»840″ height =»480″ src =»../video/myVideo.mp4″ controls > video >

Если же Вы хотите разместить у себя на странице видео, которое расположено на сайте youtube.com.

  1. Вам стоит зайти на страницу c видео, правой кнопкой мыши нажать на видео, и из выпадающего меню выбрать “Получить код для встраивания”.
  2. Копировать код из “попап” окошка.
  3. В разметке вашего сайта, в нужном вам месте, кликнуть правой кнопкой мыши и выбрать “Вставить”.

У вас получится примерно такой код:

iframe width =»854″ height =»510″ src =»https://www.youtube.com/embed/_giinWWrNlQ» frameborder =»0″ allowfullscreen > iframe >

В свою очередь, элемент > создает область, которая позволяет загружать любой документ в себя .

Элемент

Элемент audio > позволяет добавить на страницу аудио дорожки.

  • Реализована возможность добавления на станицу геолокационных карт, а также определения местоположения пользователя в данный момент.
  • Теперь мы можем рисовать с помощью технологии canvas. А также использовать 3D графику.
  • Стало возможным просто перетягивать документы и прикреплять к письму.
  • И еще много новых «плюшек», которые вы можете узнать и научиться их использовать, пройдя наши курсы в учебном центре CyberBionic Systematics.

Правильная структура страницы на HTML5, новые семантические теги

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги, которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

Раньше страницу можно было верстать любым способом, например, простым размещением блоков div. В таком случае семантическое значение вычислялось поисковиками и другими сервисами при помощи классов и идентификаторов. Сейчас же эту проблему решают новейшие теги. Кроме семантики, теги помогают построить внешний вид современного веб-приложения или сайта более совершенно.

Согласно спецификации HTML5, каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

  • Мета,
  • Заголовочное,
  • Текстовое,
  • Потоковое,
  • Секционное,
  • Встроенное,
  • Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr. Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp. Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

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

Тег nav (потоковое, секционное)

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

Тег article (потоковое, секционное)

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

Тег section (потоковое, секционное)

Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.

Тег aside (потоковое, секционное)

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

Тег footer (потоковое)

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

Тег address (потоковое)

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

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav.

Тег figure (потоковое, корневое)

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

Тег figcaption (-)

Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.

Тег time (потоковое, текстовое)

Важный тег, который позволяет ввести дату и время. Это может быть полезно для поисковых систем, а также для пользователей. С появлением данного тега, стало возможным задавать дату в стандартных временных форматах.

Тег mark (потоковое, текстовое)

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

Тег bdi (потоковое, текстовое)

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

Тег wbr (потоковое, текстовое)

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

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

Быстрое введение в HTML5 для веб-мастеров

HTML5 является последней версией самого популярного языка разметки. HTML не претерпел существенных изменений за последние 10 лет.

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

Для указания типа текущего документа в HTML5 достаточно просто указать: В HTML5 не такие строгие правила как у его предшественника XHTML:

# вы можете не использовать закрывающие теги;
# не использовать кавычки в значениях атрибута;
# использовать символы верхнего регистра в элементах и атрибутах.

Новые теги HTML5

В HTML5 появились следующие новые теги:

Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:

Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.

Хорошо, но будет ли HTML5 работать со старыми браузерами? Ответ — «ДА», кроме новых тегов, естественно. Новые страницы, сделанные в HTML5 будут отображаться во всех браузерах, но пользователи новых браузеров увидят немного больше, а в некоторых случаях страница будет вообще смотреться по-другому.

Структурные теги.

Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги

и

Теперь нам доступны следующие структурные теги:

Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.

Цель его состоит в том, чтобы определить верхнюю часть HTML документа.

Этот тег применяется для того, чтобы определить нижнюю часть документа.

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

Вот к примеру HTML код с новыми тэгами.

Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг

Новые блочные теги HTML5.

В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:

Следующий тэг используется для создания диалогов между пользователями:

В тег мы вложили еще два тэга: — содержащий имя пользователя и для отображения сообщения пользователя.

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

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

Что необходимо учитывать при использовании структурных и блочных тегов HTML5.

Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer, то необходимо так же добавить следующее:

Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега

Атрибут ID используется для идентификации тега как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами , будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.

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

Разработка сайтов на HTML5. Что нового в HTML5?

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

Поддержка браузерами HTML5

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

На какие браузеры будем обращать внимание? Заглянем на минутку на GlobalStats от StatCounter и узнаем статистику за последнее время. Вот такая статистика была на момент написания этой статьи.

На первой картинке видна мировая статистика, на второй — данные по России.

Хорошо видно, что Chrome по популярности среди пользователей уже несколько лет вне конкуренции. На втором месте — Firefox. IE с каждым годом теряет позиции. В России хорошее место также занимает Opera и Yandex Browser, у которого позиции только растут. Не стоит забывать и про Safari, который неплохо смотрится в общей динамике. Вот пожалуй и все браузеры, которые сегодня стоит учитывать при верстке страниц, в частности на HTML5.

Чтобы узнать, насколько хорошо каждый браузер поддерживает HTML5, есть 2 отличных сервиса caniuse.com и html5test.com. Только следует сразу поправиться, — нужно говорить не о поддержке браузерами HTML5, а о поддержке различных возможностей, которые стали доступны при переходе на HTML5.

С помощью сервиса caniuse.com можно увидеть, что сегодня поддержка основными браузерами уже около 86 — 87%, у Safari чуть хуже. Воспользовавшись поиском на этом сервисе, вы можете быстро получить интересующую вас информацию.

Не нужно думать, что 86% — это не 100%, этого может никогда не произойдет. Все браузеры будут отображать HTML5-страницы, но в каждом браузере пока что не все новые возможности одинаково хорошо реализованы. При переходе к HTML5 вы ничего не теряете, а наоборот, только выигрываете. Правда есть некоторые особенности, которые стоит иметь ввиду при новой верстке страниц.

Сервис html5test.com также очень удобен. Он позволяет протестировать ваш браузер и посмотреть, сколько очков он наберет. Таблица результатов очень наглядная.

Я протестировал свой Chrome (он набрал 521 очко из возможных 555) и заметил, что не поддерживается: input type=datetime в полях формы, элементы: time, menu (в toolbar и popup), видео формата MPEG-4 ASP и прочее.

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

А вот результаты тестов в других браузерах:

— Firefox — 478 очков (не очень поддерживает новые элементы форм и потоки),

— Opera — 520 очков.

Что нового в HTML5? Отличия между HTML и HTML5

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

Что появилось нового:

  • Рисование в реальном времени на прямоугольном холсте с помощью JavaScript
  • Расширенные возможности проигрывания видео — и аудио —
  • Локальное хранилище — стало доступным хранить большие объемы информации прямо в браузере пользователя
  • Многопоточность
  • Геолокация — можно узнать местонахождение пользователя
  • Управление историей браузера
  • Drag-and-drop
  • Микроданные
  • Редактирование

Чтобы узнать, какие из новых возможностей HTML5 и CSS3 поддерживает браузер пользователя, поможет JavaScript-библиотека Modernizr.

Подробнее об этих возможностях смотрите здесь и здесь .

Также HTML5 поддерживает MathML (математическая разметка для формул) и SVG (форма изображений, масштабируемая векторная графика).

Упрощения элементов страницы HTML5. Что нового?

  • Доктайп: , его легко запомнить
  • Корневой элемент:
  • Кодировка симоволов:
  • В некоторых ссылках можно не указывать тип:

Новые теги HTML5

В HTML5 появились новые теги для разметки страниц. Это логические блоки для удобства формирования структуры страниц, они ничем не отличаются от блоков

Вот основные из новых:

  • — шапка/заголовок, может быть несколько на странице в разных разделах
  • — основной контент
  • — подвал страницы
Добавить комментарий