All for Joomla All for Webmasters
HTML5/CSS3

О пятой версии стандарта HTML

О пятой версии стандарта HTML

HTML5 что это?

HTML5 начал волновать web сообщество не так давно, буквально 2–3 года назад. Этот стандарт, то, о чем мечтали веб-разработчики. Здесь есть возможность реализовать различную анимацию, трансформации, есть новые теги, которые улучшают семантику кода и при правильном использовании помогаю поисковым роботам верно ориентироваться на странице. Пока он используются не повсеместно, хотя уже существует масса энтузиастов, которые демонстрируют свои эксперементы (и ещё) используя новую технологию.

Отличия между HTML4 и HTML5

Может возникнуть вопрос: «Зачем переходить на HTML5?». Да, по миллиону причин! Хотя главной из этих причин является наличие одного единственного стандарта. Без всяких Transitional, Strict и прочей ерунды, которая только забивает мозг и отвлекает. Следуя по этому пути мы можем надеяться на более широкую поддержку при решении возникающих проблем, поскольку стандартом будут пользоваться все дизайнеры. Улучшится кроссбраузерность сайта, поскольку путаницы будет меньше. Технология HTML5 позволяет создавать более мощные веб-приложения без использования неповоротливого и громоздкого Flash по сравнению с четвёртой спецификацией языка HTML. В новом стандарте появились теги позволяющие легко вставлять медийный контент в тело страницы (я имею ввиду теги <audio> и <video>). Со списком тегов можно поближе познакомится на сайте W3Schools.

Типичный скелет разметки на HTML5

Я считаю что самым лучшим способ понять любую тему — погрузится в неё. Предлагаю к рассмотрению каркас основанный на новом стандарте.

<!doctype html>
<head>
<meta charset=»utf-8″>
<title>HTML5 страница</title>
<meta name=»description» content=»Добро пожаловать»>
<link rel=»stylesheet» href=»css/style.css?v=1″>
</head>

<body>
<div id=»wrapper»>
<header>
<h1>Привет мир!</h1>
<nav>
<ul>
<li><a href=»#»>Домой</a></li>
<li><a href=»#»>О нас</a></li>
<li><a href=»#»>Контакты</a></li>
</ul>
</nav>
</header>
<div id=»core» class=»clearfix»>
<sectionid=»left»>
<p>Основная информация.</p>
</section>
<section id=»right»>
<p>Ещё информация.</p>
</section>
</div>
<footer>
<p>Копирайты</p>
</footer>
</div>
</body>
</html>

Можно заметить, что нам больше не надо использовать «самозакрывающиеся теги» как в XHTML например тег <meta name=»keywords» content=»HTML5,CSS3,JavaScript» /> теперь мы пишем без слеша и эта запись является валидной.

Определение областей на странице

Новый стандарт намного проще чем предыдущие. Посмотрите хотя бы на объявление типа документа <!doctype html> и сравните с этим: <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>. Очевидно, что жизнь для верстальщиков значительно упростится.

Блоки head и body не поменяли своего назначения и по-прежнему отвечают за служебную и основную информацию. Внутри тега body есть несколько основных формаций.

header — представляет группу вводных или навигационных средств.
ядро где находится основная часть контента <div> — не является нововведением
footer — для копирайтов и прочей не критически важной информации.
nav — означает меню для навигации по сайту.
section — представляет типовой раздел документа или приложения.
Также, существуют и другие теги, которые не были использованы в примере:

article — представляет независимый блок содержимого документа, такой как вхождения блога или статью новостей.
aside — представляет блок содержимого, которое опосредованно связано с остальной частью страницы. Сноска.
time — тег для представляния даты и/или времени.
canvas — тег для отображения динамической растровой графики на лету. Пожалуй самое перспективное нововведение.

Похожие материалы

Нет комментариев

Отставить комментарий