Вёрстка HTML5
В этой статье мы рассмотрим то, как сверстать базовый шаблон на основе HTML-5. Вы получите все необходимые знания и научитесь верстать простейшие странички быстро и просто.
Итак, начнем работу. Прежде всего вам необходимо прописать в документе DOCTYPE.
<!DOCTYPE HTML>
Наверняка вы заметили, что в нем есть маленькие буквы, а также необычна и длина описания. Дело в том, что это теперь возможно, ведь в настоящее время регистр не влияет ни на что! Чтобы прочувствовать разницу, предоставим вам прежний формат написания:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Теперь нам необходимо изменить обозначение кодировки. Исходное:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Измененное:
<meta charset=utf-8>
Расскажем о некоторых вольностях. Дело в том, что для HTML5 абсолютно по барабану то, пишете ли вы кавычки или же нет. Также ему неинтересно, в каком регистре вы ставите символы, и даже наличие/отсутствие в конце непарных тегов слэша его не волнует!
Теперь нам нужно определить язык. Вместо вот этого:
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">
Мы пишем вот это:
<html lang=ru>
Помимо этого, упрощению подверглись и ссылки. Дело в том, что убрали атрибут type, то есть код теперь выглядит следующим образом:
<link rel="stylesheet" href="style.css" />
Помните, как было раньше? Вот так:
<link rel="stylesheet" href="style.css" type="text/css" />
Этот же атрибут для парных элементов script тоже добавлять нет необходимости. Конечно, в том случае, если rel не является однозначным, как rel=alternate.
Перед тем как двинуться дальше, перейдя к контенту, рассмотрим еще один нюанс - хак IE. Дело в том, что Explorer, как типичный браузер, таких тегов не понимает, поэтому для фиксации нужно прописать вот такой скрипт:
Помимо этого, необходимо новые элементы превратить в блочные - но это, разумеется, выполняется в css-файле.
aside, nav, footer, header, section { display: block }
Итак, все понятно? Отлично, двигаемся дальше! Разберем конструкцию блога в HTML4 и HTML5, одновременно рассматривая различия.
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml>
<head></head>
<body>
Шапка
Пост
</body>
</html>
А теперь посмотрим, какие изменения были совершены:
HTML5
<!doctype html>
<html lang=ru>
<head></head>
<header> Шапка
Пост
</body>
</html>
Становится понятно, что теперь все более просто. Помимо этого, были добавлены новые теги, которые предоставляют информацию для поисковых роботов в более простом виде.
- <header> - шапка вашего блога или сайта;
- <navr> - навигационный блок, который идеально подходит для того, чтобы формировать список основных навигационных ссылок;
- <asider> - это боковая колонка;
- <articler> - комментарий, пост или любой другой независимый текст;
- <sectionr> - раздел того или иного документа;
- <footer> - всем знакомый футер, или подвал.
Обратите внимание на то, что section - тег, которым можно заменить div практически в любом случае.
E-mail: 
Telegram:
Оставить комментарий