Вступление
Стандарт HTML5 это язык для структурирования и представления материалов в сети Интернет, который был представлен и рекомендован к использованию в 2014 году. На сегодняшний момент практически все браузеры поддерживают большую часть нововведений HTML5, однако не стоит забывать, что развитие языка продолжается и Консорциум Всемирной паутины продолжает изменять и совершенствовать пятую версию.
Обратите внимание, что начиная пятой версии язык HTML5 представлен не просто как язык структурирования, но и как язык представления, что отражено в семантической верстке, т.е. HTML теперь используется в новом качестве.
Принятие стандарта HTML5 привело к уменьшению разброса существующих технологий верстки. Так, до данного стандарта повсеместно использовались версии 4.01 HTML и стандарты XHTML 1.0 и 1.1, в результате чего страницы были представлены смесью данных технологий, что усложняло работу браузера по интерпретации страниц.Для стандарта HTML5 введен новый doctype:
<!DOCTYPE html5>
Рассмотрим основные изменения которые следует учесть в первую очередь:
- согласно HTML5, язык html является независимым от регистра символов, поэтому теги можно писать с любыми сочетаниями строчных и прописных букв:
<TITLE>,<title>,<TiTlE>— данные написания являются правильными и равнозначными. - html5 объединяет две технологии html и xhtml, как следствие устраняется возможность смешанных правил написания кода. Если раньше можно было встретить написания непарных тегов:
<meta charset="utf-8"/>так и<meta charset="utf-8">
<br/>так и</br>
то в стандарте html5 правильным написанием является:
<meta charset="utf-8">
<br>
Изменения в тегах: устаревшие и адаптированные элементы
Перечисление всех изменений в тегах невозможно в рамках одного занятия, поскольку изменения в стандарте затронуло огромное количество тегов, поэтому давайте рассмотрим основные изменения, которые понадобятся нам в работе.
Гиперссылка
Гиперссылка (тег <a>) можно применять как в виде блочного элемента (block), так и в виде строчного (inline). Таким образом, запись:
<a href="#"><h1>Пример</h1></a>
которая в предыдущих стандартах вызывала ошибки, поскольку строчных элемент оборачивал блочный, в HTML5 валидна.
Одним из самых популярных вопросов начинающих верстальщиков является: «Как сделать гиперссылку на блоке div?». И чаще всего отвечали: «Используйте JS». Как видно из примера, в HTML5 можно просто вложить внутрь гиперссылки нужные блоки.
Теги <b> и <i>
В HTML 5 были возвращены теги <b> (делает шрифт жирным) и <i> (курсив). В современной интерпретации, данные теги служат только для визуального оформления и не несут смысловой нагрузки.
Тег small
Тег <small> использовался в предыдущих версиях для задания размера шрифта, меньше чем основной текст (антиподом ему был тег big – который увеличивал размер шрифта). Разные отображения в различных браузерах привели к вытеснению данного элемента тегом span, который значительно удобнее в использовании.
В HTML5 тег <small> был возвращен, однако его интерпретация изменилась, теперь он используется для оборачивания текста, который должен быть на странице, однако не должен отвлекать внимания от основного содержимого, и быть как можно менее заметным. Аналог – текст по сноскам, или различные условия акций. Визуально также уменьшает размер шрифта текста, который оборачивает.
Тег address
В отличие от предыдущих версий HTML в пятой редакции используется только для указания контактных данных автора материалов. Не используйте тег для указания контактных данных на сайте организации (для этого следует применять микроформаты и микроданные).
Как уже упоминалось, в рамках данного урока невозможно рассмотреть все изменения в тегах, выше мы рассмотрели адаптированные теги, теперь перечислим устаревшие:
<applet>,<object>заменены тегом<embed>(используется для внедрения объектов);<acronym>— заменили тегом<abbr>(используется для аббревиатур);<bgsound>— заменили тегом<audio>(для внедрения проигрывателя в страницу);<frame>— заменили на<iframe>;<listing>,<xmp>— заменили на теги<pre>и<code>(для вставки листингов программ и кодов);<plaintext>— заменили на<pre>
Свойства форматирования текста <big>, <center>, <font>, <u> — убрали, вместо них следует использовать CSS для оформления.
Напомним, что многие устаревшие теги поддерживаются браузерами, однако валидацию страницы с устаревшими тегами не пройдут. Именно поэтому после окончания верстки страницы следует проверять ее на валидаторе.
HTML 5 и CSS 3 добавили в верстку огромное количество новых тегов и свойств. Посмотрите возможности анимации с новыми CSS 3 свойствами.
