Статья по html 5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Война браузеров в HTML5

Локальные конфликты из-за медиа форматов в HTML5 или «Война браузеров продолжается…» Хотя глобальные войны браузеров (Netscape Navigator vs Internet Explorer) остались в далёких 90-х, их отголостки в виде локальных конфликтов время от времени доходят и до нас. Один из таких конфликтов происходит на фоне поддержки браузерами тех или иных аудио и видео форматов. Например браузер… Читать далее

Семантика HTML5

Структура и синтаксис языка HTML5 Семантика в переводе с греческого, означает обозначающий. Одно из направлений движения развития HTML заключается в том, чтобы каждый тег имел свою семантику (т.е. что-то обозначал). Любые данные находящиеся между тегами, должны обладать своей смысловой нагрузкой. Программа которая анализирует сайт, должна понимать какой вид данных находится между тегами. Семантика тегов в… Читать далее

История HTML5

История создания языка HTML5 Краткая история языков HTML и XHTML История языка HTML началась в 1991 году, когда сэр Тим Бёрнерс Ли представил миру HTML 1.0, в котором тогда описывалось всего лишь 20 тегов. Спецификации для языка HTML 1.0 не существовало. В 1994 году был создан W3C — World Wide Web Consortium (Консорциум Всемирной паутины),… Читать далее

Учебник HTML5

» Всё о HTML5 на русском

Определяем местоположение с Geolocation API

Учимся использоватья Geolocation API для определения местоположения пользователя.

Несколько примеров показывающих то, как просто работать с 3D трансформациями в CSS.

Использование drag and drop в html 5

В статье рассказывается о том, каким образом использовать функцию Drag and Drop в HTML 5. Рассмотрены такие аспекты как передача данных между элементами и добавление пиктограммы в перетаскиваемый объект.

Методы коммуникации в HTML 5

В статье приведен краткий обзор методов коммуникаций предлагаемых HTML 5. Рассмотрены XHR, Web Messaging, Web Sockets, Server-sent events и Web Workers.

Видео в браузере с тегом video

В этой статье рассказывается о том, как использовать в Ваших сайтах HTML 5 тег video для вопросизведения видеороликов.

Использование нового тега nsfw

В спецификации HTML 5 предусмотрена даже такая возможность, как контроль нежелательного содержания и порнографии. Она реализована с помощью тега nsfw (Not Save For Work)

Могут ли поладить HTML5 и Flash?

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

Частые вопросы о логотипе HTML 5

Как и обещали, мы предоставляем Вашему вниманию перевод частых вопросов о логотипе HTML5 от W3C.

Частые вопросы о HTML5: Какие изменения предлагается внести в HTML5

Перевод частых вопросов от WHATWG. Часть пятая. В этой главе рассказывается почему те или иные предложения по улучшению HTML 5 были отвергнуты рабочей группой WHATWG.

Новый тег meter в html5

В этой статье мы расскажем Вам как правильно использовать новый тег meter в html 5. А конкретно — его синтаксис, правильное и неправильное использование и определение поддержки его браузером.

1.11. Семантические элементы HTML5

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

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

Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

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

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент
  • 2. Элемент
  • 3. Элемент
  • 4. Элемент
  • 5. Элемент
  • 6. Элемент
  • 7. Элемент
  • 8. Элемент
  • 9. Элемент
  • 10. Элемент
  • 11. Элемент
  • 12. Элемент
  • 13. Элемент
  • 14. Элемент
  • 15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.

Элемент нельзя помещать внутрь элементов , или другого элемента .

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

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

В качестве элементов панели навигации можно использовать не только элементы списков:

Также можно добавлять заголовки внутрь элемента:

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы , которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом . Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: , цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

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

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

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента , для отображения автора статьи — внутри тега . В браузере обычно отображается курсивом.

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

Элемент не может быть потомком таких элементов как , , , или .

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

Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin :

10. Элемент

Элемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .

11. Элемент

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

12. Элемент

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент

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

14. Элемент

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

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов ;
— один и более элементов , , каждый из которых предшествует или следует непосредственно за элементом .

Элементы , , и не относятся ни к одной категории контента.

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

HTML5 — новая версия стандарта

HTML — это язык для струк­ту­ри­ро­ва­ния и пред­став­ле­ния содер­жи­мо­го, HTML5 (HyperText Markup Language, version 5) — это пятая вер­сия стан­дар­та, кото­рая ещё нахо­дится в раз­ра­бот­ке, но уже явля­ется вполне рабо­чей. Цель раз­ра­ботки HTML5 — улуч­ше­ние уровня под­держки муль­ти­ме­ диа-тех ­но­ло­гий при сохра­не­нии удо­бо­чи­та­е­мо­сти кода для чело­века и про­стоты ана­лиза для пар­се­ров (в част­но­сти, поис­ко­вых систем).

HTML5 был создан, как еди­ный язык раз­мет­ки, кото­рый рас­ши­ря­ет, улуч­шает и раци­о­на­ли­зи­рует раз­метку доку­мен­тов, а также добав­ляет еди­ное API для слож­ных веб-приложений . В HTML5 реа­ли­зо­вано мно­же­ство новых син­так­си­че­ских осо­бен­но­стей: напри­мер, эле­менты , и , а также воз­мож­ность исполь­зо­ва­ния SVG и мате­ма­ти­че­ских фор­мул. Все эти нов­ше­ства раз­ра­бо­таны для упро­ще­ния созда­ния и управ­ле­ния гра­фи­че­скими и муль­ти­ме­дий­ными объ­ек­тами без необ­хо­ди­мо­сти исполь­зо­ва­ния сто­рон­них API. Дру­гие новые эле­менты, такие как , , и , раз­ра­бо­таны для того, чтобы сде­лать веб-стра ­ницы более семантичными и понят­ными для авто­ма­ти­зи­ро­ван­ной обра­ботки (робо­тами поис­ко­вых систем, про­грам­мами для чте­ния с экрана и дру­гими). Новые атри­буты были вве­дены с той же целью. HTML5 также опре­де­ляет неко­то­рые осо­бен­но­сти обра­ботки оши­бок вёрст­ки, поэтому всеми сов­ме­сти­мыми (совре­мен­ными) бра­у­зерами синтаксические ошибки должны рас­смат­ри­ваться оди­на­ко­во, что обес­пе­чи­вает более высокую кроссбраузерность для сай­тов, кото­рые раз­ра­бо­таны на HTML5.

(шкала про­гресса выпол­не­ния)

  • (дата/время)
  • (холст для непо­сред­ствен­ного метода рисо­ва­ния в 2D)
  • API для кон­троля над про­иг­ры­ва­нием медиа­фай­лов
  • хра­не­ние баз дан­ных оффлайн на сто­роне кли­ента
  • Drag-and-Drop API (пере­тас­ки­ва­ние)
  • History API (управ­ле­ние исто­рией бра­у­зера)
  • гео­ло­ка­ция
  • В насто­я­щий момент все веду­щие бра­у­зеры под­дер­жи­вают новый стандарт: Google Chrome, Mozilla Firefox, Opera и даже Internet Explorer (начи­ная с вер­сии 9) имеют под­держку html5.

    Содержание

    HTML5 является эволюционным развитием HTML4.01 с сохранением обратной совместимости и добавлением новых возможностей (W3C)/(WHATWG).

    Конкурирующий стандарт XHTML2.0, который так и не был окончательно принят, предполагал более значительные изменения.

    Параллельно с W3C развитием HTML5 занимается и WHATWG. Причём с 2004 года WHATWG, а с 2007 W3C, у которой до этого приоритетом был стандарт XHTML2.0.

    В качестве стандарта W3C HTML5 был принят 28 октября 2014 года, а W3C HTML5.1 планируется в конце 2016 года. Стандарт WHATWG HTML является живым (Living Standard), то есть изменения в него вносятся постоянно.

    В документе можно посмотреть отличия различных HTML-спецификаций (между WHATWG HTML, W3C HTML5 и W3C HTML5.1).

    • В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: .
    • HTML5 поддерживает MathML и SVG.
    • Новые теги:
      • , , , , , , , (уже считается устаревшим в W3C),
      • , , , , ,

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

      , , ,

    • , , , , , , , ,
    • , , , (нужно использовать вместо тега ).
  • Новые значения атрибута type для тега :
    • date, datetime, datetime-local, time, month, week,
    • color, email, tel, number, range, search, url.
  • Новые атрибуты для тегов, например:
    • autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега ,
    • autocomplete, autofocus, placeholder, required и другие для ,
    • async для тега

      1.11. Семантические элементы HTML5

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

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

      Согласно спецификации HTML5 каждый элемент принадлежит к определенной (ноль или более) категории. Каждая из них группирует элементы со схожими характеристиками. Выделяют следующие общие категории:

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

      Описание HTML5-элементов

      • Содержание:
      • 1. Элемент
      • 2. Элемент
      • 3. Элемент
      • 4. Элемент
      • 5. Элемент
      • 6. Элемент
      • 7. Элемент
      • 8. Элемент
      • 9. Элемент
      • 10. Элемент
      • 11. Элемент
      • 12. Элемент
      • 13. Элемент
      • 14. Элемент
      • 15. Элементы для описания Восточно-Азиатских символов

      Категории контента: потоковое содержимое.
      Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов и они могут располагаться в любой части страницы.

      Элемент нельзя помещать внутрь элементов , или другого элемента .

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

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

      В качестве элементов панели навигации можно использовать не только элементы списков:

      Также можно добавлять заголовки внутрь элемента:

      Категории контента: потоковое содержимое, секционное содержимое.
      Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы , которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом . Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

      Категории контента: потоковое содержимое, секционное содержимое.
      Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент

      Категории контента: потоковое содержимое, секционное содержимое.
      Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: , цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

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

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

      Категории контента: потоковое содержимое.
      Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента , для отображения автора статьи — внутри тега . В браузере обычно отображается курсивом.

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

      Элемент не может быть потомком таких элементов как , , , или .

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

      Элемент является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin :

      10. Элемент

      Элемент — потомок элемента , не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента , высота по умолчанию равна 18px .

      11. Элемент

      Категории контента: потоковое содержимое, текстовое содержимое.
      Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime , в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

      Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD . Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

      12. Элемент

      Категории контента: потоковое содержимое, текстовое содержимое.
      Текст, помещенный внутрь тега , выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

      13. Элемент

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

      14. Элемент

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

      15. Элементы для описания Восточно-Азиатских символов

      Категории контента: потоковое содержимое, текстовое содержимое.
      Элемент позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
      — один и более текстовых узлов или элементов ;
      — один и более элементов , , каждый из которых предшествует или следует непосредственно за элементом .

      Элементы , , и не относятся ни к одной категории контента.

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