Стандарты кодирования в HTML5. Обзор HTML5 спецификации Что такое HTML5

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

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

Название страницы Верх веб-страницы, "шапка" Основное меню веб-страницы Основное тело, статья, материал страницы Сайдбар (боковая панель) Нижняя часть страницы, подвал

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

- обрамляют основной контент страницы (статью) ,
- обрамляют шапку страницы,
- обрамляют подвал страницы,
- обрамляют основное меню страницы,
- обрамляют боковую панель страницы (сайдбар) ,
- обрамляют повторяющиеся блоки на странице (например комментарии) .

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

- назначем кодировку windows-1251.

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

- отображение сайта на мобильных устройствах.

header - шапка страницы сайта, в нем обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.

nav - основное меню страницы сайта.

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

aside - сайдбар (боковая панель) сайта, обычно содержит различные элементы, типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.

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

HTML5 на уровне структуры страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тег

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

Аудио/Видео

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

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

API JavaScript

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

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

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

SVG

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

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

Результат:

MathML

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

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

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

и вместо них следует использовать тег embed
вместо него следует использовать тег abbr
вместо него следует использовать тег audio
вместо него следует использовать тег ul
, , вместо них следует использовать тег iframe
вместо него следует использовать связку тегов form и input
и вместо них следует использовать теги pre или code

Вместо него следует использовать тег pre
вместо него следует использовать тег s

Вместо тегов форматирования: , , , , , , , , , и , следует использовать CSS-свойства.

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

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

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

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

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

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

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

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

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

2. Для того, чтобы указать язык документа, теперь вместо мета-тегa:
нужно использовать атрибут lang="ru" в теге :

3. Для того, чтобы указать кодировку документа, теперь вместо мета-тега:

нужно использовать мета-тег , без атрибутов http-equiv и content

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

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

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

Заголовок

Абзац

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

Заголовок

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

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

Дополнения к HTML W3C от 2015-2017 года

Рекомендации W3C от 24 декабря 1999 года

Сайт посвящён современному языку разметки — HTML5 .
Цель сайта: рассказать вам о HTML5 как можно больше.

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

Что такое HTML5, в современном веб-строительстве?
Какие технологии начал поддерживать этот язык?
Какие новые теги появились в HTML5?
Чем он отличается от языков HTML4 или XHTML?
Можно ли уже сейчас использовать HTML5?
и т.п.

Что такое HTML5?

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

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

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

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

В четвёртых, теперь можно прямо в коде использовать микроразметку и те спецификации которые раньше были частью XML, например можно прямо в коде HTML-документа, использовать спецификацию SVG (которая создаёт различные векторные фигуры) .

Какие новые технологии появились в HTML5?

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

Элемент (тег) canvas , позволяет создавать векторную графику, анимировать её и даже создавать игры. Цель этой технологии, полностью заменить флеш анимацию на сайте.

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

Появилась возможность определять местоположение пользователя geolocation .

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

Другие технологии.

Чем HTML5 отличается от HTML4 и XHTML?

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

Многие теги и атрибуты из HTML4, теперь считаются устаревшими. Но при этом HTML5 , сохраняет полную совместимость с предыдущими языками разметки HTML3, HTML4 и XHTML.

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

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

Можно ли использовать язык HTML5 уже сейчас?

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

В заключение

Организации W3C и WHATWG , которые разрабатывают HTML5, решили в будущем не давать нумерации новым версиям языка, отныне и в будущем можно говорить просто HTML , без цифровой идентификации. Новые элементы (теги) и технологии (API) которые появятся у языка, будут просто добавляться в уже существующую спецификацию.

Условные обозначения HTML код

Многие веб-разработчики HTML код спецификации плохо изучены.

В 2000-2010 годах, многие веб-разработчики для преобразования из HTML в XHTML.

Разработчики используют XHTML постепенно развивать хорошие спецификации HTML письма.

И в HTML5, мы должны сформировать относительно хорошие нормы кода, несколько рекомендаций приводятся ниже спецификации.

Используйте правильный тип документа

Объявление типа документа в первой строке HTML документа:

DOCTYPE HTML>

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

DOCTYPE HTML>

Строчные имена элементов

HTML5 имя элемента можно использовать прописные и строчные буквы.

Смешанный стиль случай очень плохо.
Строчные буквы легко писать.

Это параграф.

Очень плохо:

Это параграф.

Выключите все элементы HTML

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

Это параграф.

Закрыть пустые элементы HTML

В HTML5, пустой элемент HTML не нужно выключать:

Мы можем написать:

Вы также можете написать:

XML, XHTML и слэш (/) является обязательным.

Если вы планируете использовать свою страницу XML программного обеспечения, этот стиль очень хорошо.

Имя атрибута Lowercase

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

Используйте случай очень плохая привычка.
Разработчики обычно используют в нижнем регистре (аналогично XHTML).
Строчные стиль выглядит более освежающий.
Строчные буквы легко писать.

Значение свойства

Значения атрибутов HTML5 не может цитировать.

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

Атрибут Следующие примеры значение содержит пробелы, не используйте кавычки, она не может работать:

Ниже используются двойные кавычки, это правильно:

свойства

Image Alt атрибуты часто используются. Если изображение не может быть отображено, оно может заменить дисплей изображения.

= "HTML5" стиль = "ширина: 128px; высота : 128px">

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

= стиль "HTML5" = "ширина: 128px; высота: 128px">

Пробелы и знаки равенства

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

Избегайте длительного строки кода

Используя редактор HTML, левый и правый прокрутки код неудобно.

Каждая строка кода в максимально возможной степени меньше, чем 80 символов.

Пустые строки и отступы

Не добавляйте пустую строку без причины.

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

Не используйте ненужные пустые строки с отступом между коротким кодом.

Лишние пустые строки и отступы:

Этот учебник

HTML

Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и во сне,
Этот учебник, обучение не только технологии, но и сон.

Этот учебник

В этом учебнике, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.
Этот учебник, обучение не только технологии, но и сон.

Пример формы:

Имя
Описание

A
Описание A

B
Описание B

Пример списка:

Лондон

Париж

Токио

Опустим и ?

В стандарте HTML5, и тег может быть опущен.

Следующие документы являются правильными HTML5:

Пример:

DOCTYPE HTML>

Название страницы

Это заголовок

Это параграф.

Попробуйте »

элемент является корневым элементом документа, язык, используемый для описания страницы:

DOCTYPE HTML>

Язык заявление для облегчения чтения с экрана и поисковых систем.

Опустим или в DOM и программного обеспечения XML аварий.

Опустим ошибка происходит в старых браузерах (IE9).

Опустим ?

В стандарте HTML5, тег может быть опущен.

По умолчанию браузер содержимое , прежде чем добавлен к дефолту элемент.

примеров

DOCTYPE HTML>

Название страницы

Это заголовок

Это параграф.

Попробуйте »Метаданные

HTML5 в требуется элемент, название заголовка описывает тему страницы:

В этом учебнике

Название и язык, который позволяет поисковик скоро понять тему вашей страницы:

DOCTYPE HTML>

В этом учебнике

Зачастую веб-разработчики даже не подозревают о существовании определенных стандартов кодирования в HTML. Однако в период с 2000 по 2010 годы многие веб-разработчики перешли с HTML на XHTML. При этом XHTML вынудил разработчиков писать валидный и "хорошо сформированный" код. HTML5 же, когда дело доходит до валидации кода, допускает некоторую небрежность.

Тем не менее, единообразие по стилю облегчит другим понимание вашего HTML кода.

Возможно, когда-нибудь программам, вроде программ чтения XML данных, потребуется прочитать ваш HTML код. Таким образом, использование хорошо сформированного, близкого к XHTML синтаксиса будет вполне разумным подходом.

Всегда следите, чтобы ваш код был аккуратным, чистым и хорошо сформированным.

Используйте корректный тип документа

На первой строке всегда декларируйте тип документа:

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

Имена элементов пишите маленькими буквами

HTML5 допускает одновременное использование в именах элементов больших и маленьких букв. Однако, лучше всегда использовать только маленькие буквы. Это объясняется следующими соображениями:

Смешение больших и маленьких букв в именах тегов считается плохой практикой

Это параграф текста.

Очень плохо:

Это параграф текста.

Закрывайте все HTML элементы

В HTML5 вы не обязаны закрывать все элементы (например, элемент

Это параграф текста.

Закрывайте пустые HTML элементы

В HTML5 закрывать или нет пустые элементы зависит от желания веб-разработчика.

Допустимо:

Также допустимо:

Тем не менее, закрывающая косая черта (/) ОБЯЗАТЕЛЬНА в XHTML и XML.

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

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

В HTML5 при написании имен атрибутов можно смешивать большие и маленькие буквы.

Смешение больших и маленьких букв в именах атрибутов считается плохой практикой
Разработчики обычно используют маленькие буквы (как в XHTML)
Написание в нижнем регистре выглядит чище
В нижнем регистре легче писать

Заключайте значения атрибутов в кавычки

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

Смешение больших и маленьких букв в значениях считается плохой практикой
Значения в кавычках легче читать
Вы ДОЛЖНЫ заключать в кавычки, если в значениях есть пробелы

Очень плохо:

Это не будет работать, потому что в значении есть пробелы

Атрибуты изображений

При определении изображений всегда используйте атрибут "alt". Этот атрибут важен, когда изображение по какой-то причине не отображается.

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

Пробелы и знак равно

HTML5 допускает пробелы вокруг знака равно. Однако, когда пробелов нет, то такой код легче читать, и это лучше группирует сущности.

Избегайте длинных строк кода

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

Следует стараться, чтобы строка кода в длину не превышала 80 символов.

Пустые строки и отступы

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

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

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

Не используйте ненужные пустые строки и отступы. Нет необходимости ставить отступ перед каждым элементом.

Необязательно:

Famous Cities Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.

Famous Cities Tokyo

Name Description

A	Description of A
B	Description of B

London

Paris

Tokyo

Пропускать или нет и ?

По стандарту HTML5 тег и тег могут не использоваться.

Следующий код согласно стандарту HTML5 считается валидным:

Заголовок страницы Это текстовый заголовок

Это абзац текста.

Элемент - это корень документа. Это рекомендованное место для определения языка страницы:

Декларация языка страницы важна как для специализированных приложений (например, программ чтения с экрана), так и для поисковых систем.

Кроме этого, если не написать тег или тег , то это может сломать структуру DOM и XML приложения. А пропуск тега к тому же может привести к ошибками в старых браузерах (IE9).

Пропускать ли тег ?

Согласно стандарту HTML5 тег может не использоваться.

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

Вы можете снизить сложность структуры HTML, пропустив тег :

Заголовок страницы Текстовый заголовок

Это текстовый абзац.

Метаданные

Элемент является обязательным в HTML5. Заголовок страницы должен быть наполнен значением:

Чтобы обеспечить правильную интерпретацию и корректное индексирование страницы поисковыми системами, определение языка и кодировки символов страницы необходимо декларировать как можно раньше:

Стандарты синтаксиса и кодирования в HTML5

Установка вьюпорта (окна просмотра)

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

В HTML5 был введен метод, позволяющий веб-дизайнерам контролировать вьюпорт при помощи тега .

Следует всегда использовать элемент управления вьюпортом в следующей форме на всех веб-страницах:

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

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана текущего устройства (которая будет разной в зависимости от используемого устройства).

Часть initial-scale=1.0 устанавливает начальный уровень увеличения, когда страница впервые загружается браузером.

Ниже вы можете увидеть пример веб-страницы на экране смартфона с установленным мета тегом вьюпорта и без него:

Страница с мета тегом вьюпорта

HTML комментарии

Короткий комментарий должен писаться на одной строке:

Хотите быстро найти описание элемента или атрибута HTML5, используемого на веб-странице или в веб-приложении? Перед вами классический справочник, который веб-дизайнеры и веб-разработчики стараются всегда держать под рукой на протяжении вот уже более 15 лет.
Пятое издание книги включает полное описание элементов и атрибутов HTML5 в соответствии со стандартами HTML5 Candidate Recommendation, HTML5.1 Working Draft и WHATWG. Особенности справочника:
– упорядоченный по алфавиту список элементов и атрибутов из HTML5, HTML5.1 и стандарта WHATWG;
– примеры разметки, категории контента, модели контента и требования к начальному/конечному тегу для каждого элемента;
– описание различий между спецификациями HTML5 и HTML4.01;
– таблицы специальных символов;
– обзор библиотек API, применяемых в HTML5.

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

Понравилась статья или книга? Поделись с друзями:

Все книги представленные на сайте только в ознакомительных целях. Любое их использование Вами допускается только в ознакомительных целях. Если Вы планируете их использовать в дальнейшем, то Вы обязаны приобрести их у правообладателей. Администрация сайта не несет ответственность за их использование Вами