Веб-дизайнеру - Спецификация 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.

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

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

W3C

  • 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 года

 

Наши ссылки на веб-страницы, можно скопировать html-код ссылки


Книги по математике и физике, программы HTML, компьютерные технологии
Документация HTML, XML, JavaScript на русском языке для разработчиков W3C

   Примечание. Удобная текстовая ссылка для форумов, блогов, цитирования материалов веб-сайта, код html можно скопировать и просто вставить в Ваши веб-страницы при цитировании материалов нашего веб-сайта.