Основы семантической верстки на HTML5
06.10.2017
Привет всем! Вот и началась долгожданная олимпиада. Желаю все участникам больших успехов и удачи, ну и конечно же я очень болею за Россию, т.к. я сам россиянин. А теперь к теме поста. В данной статье поговорим о современной разметке HTML5, о ее преимуществах и важности в целом. Я все никак не мог перейти на html5, думал что это только новое совсем, не все браузеры поддерживают, в частности ИЕ 7-8. Но все оказалось не совсем так.
Сегодня html5 для разметки веб-страниц используется на полном ходу и практически все современные браузеры поддерживают данную разметку, хотя считается, что спецификация html5 находится еще на стадии разработки. Что касается интернет эксплорер 7-8 версии, то для них имеется специальный костыль, состоящий из небольшого javaScript’a. На мой взгляд верстать на html5 очень удобно, т.к. в первую очередь html5 это семантика. Здесь используются некоторые структурные элементы, с помощью которых структура документа становится легко читаемой и понятной не только человеку, но и поисковому роботу.
Вёрстка со смыслом. Новая семантика HTML5
Итак, давайте разберем разметку html5 по шагам и начнем с самого начала документа — Doctype. Doctype в html5 записывается уже намного проще, так, что можно легко запомнить.
<!doctype html>Обозначение кодировки прописывается следующим образом
<meta charset="utf-8" />А было
Основы Верстки HTML5 / CSS3 С Нуля За 3 Часа
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Чувствуете разницу? Код стал значительно легче и запомнить также очень легко. Также при подключении скриптов и стилей теперь не обязательно указывать type.
<link rel="stylesheet" href="style.css" /> <script src="javascript.js"></script>Далее определяем язык:
<html lang="ru">было:
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">Следующее, что мы сделаем это подключим небольшой javascript для того, что ИЕ понимал новую разметку.