Мобильная версия

Электронная библиотека

Программисту веб-дизайнеру

Другие материалы

Веб-дизайнеру - Спецификация HTML5 (HTML 5)

Теги в HTML5 — это XML-HTML теги, описывающие структуру веб-страницы, предназначены для того чтобы компьютерная программа (поисковый робот и др.) смогла отличать основной контент страницы от остальных частей страницы (фофрмления и элементов навигации): верха, низа, меню, боковых элементов страницы, повторяющихся (динамических) блоков и т.д. Также идет разделение на уровне основного контента (текста старницы). Сам по себе язык HTML5 является надстройкой к HTML, XML, CSS и др.

<!DOCTYPE html> <html lang="ru"> <!-- Заголовок веб-страницы сайта --> <head> <meta charset="windows-1251" /> <title>Название страницы</title> </head> <!-- Тело веб-страницы сайта --> <body> <header>Верх веб-страницы, "шапка"</header> <nav>Основное меню веб-страницы</nav> <article>Основное тело, статья, материал страницы</article> <aside>Сайдбар (боковая панель)</aside> <footer>Нижняя часть страницы, подвал</footer> </body> </html>

Структура веб-сайта

<article> </article> - обрамляют основной контент страницы (статью),
<header> </header> - обрамляют шапку страницы,
<footer> </footer> - обрамляют подвал страницы,
<nav> </nav> - обрамляют основное меню страницы,
<aside> </aside> - обрамляют боковую панель страницы (сайдбар),
<section> </section> - обрамляют повторяющиеся блоки на странице (например комментарии).

Элементы кода шаблона веб-страницы HTML5.

  • <meta charset="windows-1251" /> - назначем кодировку windows-1251.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - отображение сайта на мобильных устройствах.
  • header - шапка страницы сайта, в нем обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.
  • nav - основное меню страницы сайта.
  • article - основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.
  • aside - сайдбар (боковая панель) сайта, обычно содержит различные элементы, типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.
  • footer - нижняя часть - подвал страницы сайта, обычно содержит разную информацию (копирайты), контактную информацию (адреса, телефоны) и т.д.
  • HTML5 на уровне структуры страницы

    Рассмотрим список новых тегов HTML5, отвечающих за разделение структуры страницы:

    <header> </header> - теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также теги header можно использовать как верхнюю часть тега section.

    <nav> </nav> - теги обрамляющие основное меню на сайте.

    <article> </article> - теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума и т.п.

    <aside> </aside> - теги обрамляющие сайдбар. Сайдбар - это так называемая "боковая панель", которая обычно содержит блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.

    <footer> </footer> - теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section

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

    HTML5 на уровне текста

    Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

    <mark> </mark> - текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark, обрамлять слова в тексте, которые например совпадают со словом введенным пользователем в поисковую строку.

    <time> </time> - теги предназначены для создания дат и/или времени в формате
    ISO вида: YYYY-MM-DDThh:mm:ss, такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime, значением которого выступает дата и/или время в формате ISO.

    <details> </details> - теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера).

       <summary> </summary> - теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера), находятся между тегами details.

    Дополнительные теги языка HTML5

    Список новых тегов HTML5, обогощающих язык:

    <meter> </meter> - теги предназначены для вывода статического индикатора шкалы, при котором результат измерения не меняется. Для работы нужно минимальное и максимальное значения.

    <progress> </progress> - теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

    <command /> - тег должен находиться между тегами menu, используется при создании сценариев на JavaScript.

    <menu> </menu> - между этими тегами помещают тег command.

    <output> </output> - теги предназначены для вывода работы скрипта.

    <datalist> </datalist> - теги предназначены для создания списка, который будет выводится при наборе в текстовом поле.

    <figcaption> </figcaption> - теги обрамляют описание какого-либо объекта (например изображения), находятся между тегами figure..

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

    <hgroup> </hgroup> - теги предназначены для группировки заголовков h*

    <keygen /> - тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

    <ruby> </ruby> - теги обрамляют текст и аннотацию к нему.

    <rt> </rt> - теги находятся между тегами ruby, предназначены для обрамления аннотации.

    <rp> </rp> - теги предназначены для браузеров которые не поддерживают теги ruby.

    <wbr /> - тег указывает браузеру в каком месте переносить слово ("мягкий перенос"), если это слово не вмещается в окно браузера.

    Теги HTML5 описывающие новые технологии

    В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

    <audio> </audio> - теги предназначены для воспроизведения аудиофайлов, без использования сторонних программ (плагинов, расширений).

    <video> </video> - теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений).

    <source /> - тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video.

    <canvas> </canvas> - теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

    Тег <сanvas>

    Тег <сanvas> - это специальный элемент, который предназначен для рисования векторных фигур и манипулирования ими. Тег <canvas> создан для того, чтобы заменить собою технологию Flash. С помощью тега <canvas> можно рисовать векторные фигуры (изображения), а с помощью JavaScript, манипулировать данными фигурами, создавая тем самым анимацию (мультфильмы и даже игры) на сайте.

    Аудио/Видео

    С помощью тега <audio> можно внедрять аудиофайлы на страницу и прослушивать их. Элемент <audio> также создает панель с кнопками проигрывания.

    С помощью тега <video> можно внедрять видеофайлы на страницу и просматривать их. Элемент <video> также создает панель с кнопками проигрывания.

    API JavaScript

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

    Поддержка XML-технологий

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

    SVG

    SVG - Scalable Vector Graphics (язык разметки масштабируемой векторной графики), является XML-форматом. Так как HTML5 начал поддерживать XML-форматы, то теперь можно внедрять в HTML-документ рисунки созданные с помощью SVG и манипулировать ими через JavaScript.

    Пример кода рисунка "зеленый круг":

    <svg> <circle r="50px" cx="60px" cy="70px" fill="green" /> </svg>

    Результат:

    MathML

    MathML - Mathematical Markup Language (язык математической разметки) XML-формат. С помощью данного формата можно описывать различные математические формулы.

    Какие теги в HTML5, являются устаревшими?

    Устаревшими тегами, в спецификации HTML5 являются:

    <applet> и <object> вместо них следует использовать тег embed
    <acronym> вместо него следует использовать тег abbr
    <bgsound /> вместо него следует использовать тег audio
    <dir> вместо него следует использовать тег ul
    <frame />, <frameset>, <noframes> вместо них следует использовать тег iframe
    <isindex /> вместо него следует использовать связку тегов form и input
    <listing> и <xmp> вместо них следует использовать теги pre или code
    <nextid>
    <noembed>
    <plaintext> вместо него следует использовать тег pre
    <strike> вместо него следует использовать тег s

    Вместо тегов форматирования: <basefont />, <big>, <blink>, <center>, <font>, <marquee>, <multicol>, <nobr>, <spacer>, <tt> и <u>, следует использовать CSS-свойства.

    Устаревшие теги не рекомендуется использовать при создании сайтов на HTML5, однако это еще не означает что браузеры их больше не поддерживают, вот например работа не рекомендованного тега подчеркивания
    <u> </u>

    Новые глобальные атрибуты в HTML5

    Глобальные атрибуты - это атрибуты, которые могут быть внедрены в любой тег HTML-документа. В HTML5 появились новые глобальные атрибуты, в описаниях ниже они выделены словом Новый

    Рассмотрим названия и описания глобальных атрибутов HTML5:

    accesskey=" " - позволяет задействовать какой-либо элемент (тег) страницы, нажатием заранее запрограммированной комбинацией клавиш,
    class=" " - позволяет устанавливать имя класса,
    contenteditable=" " - позволяет редактировать содержимое элемента Новый,
    contextmenu=" " - позволяет создавать контекстное меню для элемента Новый,
    dir=" " - позволяет управлять направлением текста,
    draggable=" " - позволяет пользователю перетаскивать элемент Новый,
    dropzone=" " - позволяет указывать, что делать с элементом при перетаскивании Новый,
    hiden=" " - позволяет скрывать элемент Новый,
    id=" " - позволяет устанавливать уникальный идентификатор для элемента,
    lang=" " - позволяет указывать код языка в содержимом элемента,
    spellcheck=" " - позволяет указывать проверять или нет правописание, в содержимом элемента Новый,
    style=" " - позволяет создавать стиль для элемента,
    tabindex=" " - позволяет создавать правило, которое указывает в каком порядке должны получать фокус элементы, при нажатии на клавишу Tab,
    title=" " - позволяет создавать всплывающую подсказку, которая появляется при наведении указателя мыши на элемент.

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

    Новшества в структуре кода HTML5 документа

       Структура кода в HTML5 претерпела некоторые изменения, вот некоторые из них:

    1. В отличии от предыдущих версий языка, в HTML5 существует лишь один доктайп:
    <!DOCTYPE html> его например вы можете увидеть в исходниках страниц данного сайта (не забывайте что перед доктайпом ничего не должно быть, ни пробелов, ни переносов строк и т.д.).

    2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
    <meta http-equiv="Content-Language" content="ru" /> нужно использовать атрибут lang="ru" в теге <html>:

    <html lang="ru">

    3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:
      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    нужно использовать мета-тег <meta charset="windows-1251" />, без атрибутов http-equiv и content

    4. При создании JavaSсript сценария, теперь в тег <script>, внедрять атрибуты type="text/javascript" и language="JavaScript" не нужно.

    <script src="script.js"></script>

    5. При внедрении CSS стилей, теперь в теги <style> и <link />, внедрять атрибут type="text/css" не нужно.

    <link rel="stylesheet" href="style.css" /> <style></style>

    6. Ссылка <а> - строчный тег, поэтому в ранних спецификациях HTML и XHTML, ими не рекомендовалось обрамлять блочные теги, сейчас в спецификации HTML5 данная рекомендация для ссылок была убрана и ими теперь разрешается обрамлять один или несколько блочных элементов.

    В HTML4 или XHTML1, обрамление ссылками выглядело так:

    <h3><a href="url">Заголовок</a></h3> <p><a href="url">Абзац</a></p>

    Теперь при HTML5, можно делать так:

    <a href="url"> <h3>Заголовок</h3> <p>Абзац</p></a>

    По материалам сайта http://html-5.ru/, http://html-5.ru/uchebnik-html5


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

    Google

  • Accelerated Mobile Pages, AMP - основные тэги + замена команд, с 2015 года
  • Рекомендации от Google Поиска по созданию ускоренных мобильных страниц - Cправка - Search Console
  • Shema.org

  • Полная Иерархия - основные типы + расширение словарей, с 2012 года
  • Командные тэги поисковым роботам поисковых систем, смысловая нагрузка страниц
  • W3C

  • Спецификация HTML5 (HTML 5)
  • Дополнения к HTML W3C от 2015-2017 года
  • Спецификация HTML 4.01
  • Рекомендации W3C от 24 декабря 1999 года
  • Дополнительные материалы:
  • Заголовки DTD для документов (формат .txt)
  • SGML объявление HyperText Markup Language версии html 4
  • Специальные символы, типичный вызов
  • Специальные символы для html с кодировкой
  • Математические, греческие и символические знаки для html
  • html 4.01 Frameset DTD для документов с фрэймами
  • html 4.01 Переходное / Transitional ОТД, развитие таблиц стилей
  • html 4.01 Strict, которое исключает атрибуты представления и элементы
  • HTML-коды букв и специальных символов
  • XHTML 1.0, переформулирование html 4 в XML 1.0
  • Расширяемый Язык Гипертекстовой Разметки
  • Рекомендации W3C от 26 января 2000 года
  • XML 1.0, вторая редакция
  • Расширяемый Язык Гипертекстовой Разметки
  • РРекомендация W3C от 6 октября 2000 года
  • HTTP/1.1, протокол передачи гипертекста
  • HTTP используется в World Wide Web (WWW) начиная с 1990 года
  • Релиз январь 1997 года
  • JavaScript

  • Ядро JavaScript 1.5. Руководство по Использованию
  • Copyright © 2000 Netscape Communications Corp. Все Права Зарезервированы.
  • Дата последнего обновления 28 сентября 2000 года
  • Клиентский JavaScript. Руководство по Использованию
  • Copyright © 1999 Netscape Communications Corp. Все Права Зарезервированы.
  • Дата последнего обновления 25 мая 1999 года

  • Мобильная версия

    Сайт для компьютера
    http://www.mat.net.ua