указывает, в соответствии с каким стандартом HTML написана ваша Web-страница.

DOCTYPE Описание

HTML5
	Для всех документов.
HTML 4.01
	Строгий синтаксис HTML.
	Переходный синтаксис HTML.
	В HTML-документе применяются фреймы.
XHTML 1.0
	Строгий синтаксис XHTML.
	Переходный синтаксис XHTML.
	Документ написан на XHTML и содержит фреймы.
	XHTML мобильного профиля, добавляет специфические элементы для мобильных телефонов.
XHTML 1.1
	Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Итак, доктайпов существует несколько (строгие и переходные, для HTML и XHTML). Какой стандарт выбрать - вот в чем вопрос.

Стандарты HTML и XHTML

HTML - стандартный язык разметки Web-документов.

В HTML 4.01 и HTML5 внешний вид страницы отделен от ее содержания. Содержание и структура (заголовки, абзацы, ссылки) задаются в HTML. Оформление (выравнивание, шрифты, цвета) задаются CSS-стилями.

Например, тег и атрибут align объявлены устаревшими.

XHTML - расширяемый язык разметки Web-документов, созданный на базе XML . Стандарт XHTML представляет собой перечень различий между HTML 4.01 и XHTML.

Требования XHTML Нельзя Нужно

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

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

Однако, 2 июля 2009 года Консорциум Всемирной паутины (W3C) сообщил о прекращении работ над XHTML 2.0, посчитав концепцию XHTML неверной. Группа программистов переключилась на работу над стандартом HTML5. И хотя стандарт HTML5 всё ещё не утверждён, на нём уже написано множество сайтов.

Кому интересно, когда же HTML5 будет закончен, могут ознакомиться с первоисточниками:

Официальная версия стандарта HTML5 находится по адресу: www.w3.org/TR/html5/

Определимся с выбором. Сделать его несложно: использовать XHTML-стандарт не стоит, если вы не собираетесь расширять язык HTML.

На!DOCTYPE, предназначенных для документов, использующих фреймы , останавливаться не будем: позавчерашний день.

Следующий вопрос: какой выбрать синтаксис - строгий или переходный?

Строгий и переходный синтаксис HTML 4.01

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

Понять, что тут к чему, проще на примере. Сначала зададим строгий синтаксис.

Строгий синтаксис Проверка на валидность Проверка на валидность

красным цветом.

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

Чтобы отслеживать ошибки верстки, установим дополнение к FireFox Html Validator .

Откроем нашу страницу в браузере FireFox, наведем мышку на знак валидатора:

Двойной щелчок на знаке валидатора даст развернутый список ошибок:

Поменяем!DOCTYPE на переходный синтаксис:

Переходный синтаксис Проверка на валидность Проверка на валидность

Часть текста понадобилось выделить красным цветом.

Запускаем FireFox. Ошибок нет:

Вроде все прекрасно. Может, на этом и остановиться?

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

Не соблазняйтесь лояльностью переходного синтаксиса, только строгое соответствие стандартам!

Зачем нужна валидная верстка

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

- это минус на оценке качества сайта.

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

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

Не используйте как обёртку для оформления

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

Моя супер-пупер страница

Вместо этого я вижу следующее:

Честно говоря, это неправильно: - это не обёртка. Элемент определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.

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

Моя супер-пупер страница

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

Используйте и осознанно

Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.

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

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

Злоупотребление

Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:

Мой лучший пост

Если ваш содержит единственный заголовок, избавьтесь от ненужного . Элемент в любом случае гарантирует, что заголовок войдёт в смысловую структуру документа. И поскольку не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен? Будьте проще:

Мой лучший пост

Неправильное использование

Раз уж зашла речь о заголовках - я часто вижу неправильное использование . Не следует использовать в сочетании с в случае, когда:

• дочерний заголовок всего один или
• элемента будет достаточно и без .

Первая проблема выглядит так:

Мой лучший пост

Ричард Кларк

В этом случае стоит избавиться от и оставить только заголовок:

Мой лучший пост

Ричард Кларк

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

Моя компания Основана в 1893 году

Когда - это единственный дочерний элемент , то какой смысл в этом ? Если в нём нет дополнительных элементов, соседствующих с , смело избавляйтесь от .

Моя компания Основана в 1893 году

Больше примеров использования вы можете найти .

Не оборачивайте все списки ссылок в

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

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

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

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

• Самая главная навигация;
• Поиск по сайту;
• Вторичная навигация (что спорно);
• Внутренняя навигация (по длинной статье, например).

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

• Постраничная навигация;
• Социальные ссылки, за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours ;
• Тэги к записи в блоге;
• Категории записи;
• Навигация третьего уровня;
• Подвалы, набитые ссылками.

Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:

• «Не используйте , если кажется, что в этом случае может подойти и с заголовком », - Ян Хиксон, IRC .
• Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?

Если ответ на оба эти вопроса «нет», то, скорее всего, это не .

Общие ошибки с элементом

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

Не каждая картинка это

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

Спецификация обозначает как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента , который может быть перемещён из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.

Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .

Ваш логотип - это не

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

Название компании

Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри , но мы здесь не за этим. Настоящая проблема - в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:

Название компании

Элемент - это не только картинки

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

Веб-дизайнеру - Спецификация 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 это язык для структурирования и представления материалов в сети Интернет, который был представлен и рекомендован к использованию в 2014 году. На сегодняшний момент практически все браузеры поддерживают большую часть нововведений HTML5 , однако не стоит забывать, что развитие языка продолжается и Консорциум Всемирной паутины продолжает изменять и совершенствовать пятую версию.

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

Принятие стандарта HTML5 привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:

Рассмотрим основные изменения которые следует учесть в первую очередь:

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

html5 объединяет две технологии html и xhtml, как следствие устраняется возможность смешанных правил написания кода. Если раньше можно было встретить написания непарных тегов:
так и

так и

то в стандарте html5 правильным написанием является:

Изменения в тегах: устаревшие и адаптированные элементы

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

Гиперссылка

Пример

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

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

Теги и

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

Тег small

Тег использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.

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

Тег address

В отличие от предыдущих версий HTML в пятой редакции используется только для указания контактных данных автора материалов. Не используйте тег для указания контактных данных на сайте организации (для этого следует применять микроформаты и микроданные).

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

• , заменены тегом (используется для внедрения объектов);
• — заменили тегом (используется для аббревиатур);
• — заменили тегом (для внедрения проигрывателя в страницу);
• — заменили на ;
• , — заменили на теги И (для вставки листингов программ и кодов);
• — заменили на

Свойства форматирования текста , , , — убрали, вместо них следует использовать CSS для оформления.

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

HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.

Поделись статьей:

Похожие статьи

17 апреля 2015
SuperBeam — мощный инструмент для передачи файлов по Wi-Fi без интернета

17 апреля 2015
Многоядерный DSP TMS320C6678

17 апреля 2015
Продукция Intel: чипсеты и их особенности

17 апреля 2015
Caterpillar представила смартфон с тепловой камерой Cat S60