HTML5 Введение
Как и обещал, начинаю обучающий цикл статей, посвященный последней версии HTML5. Вэлкам!
Мы сейчас живем в бурном море Интернета, где видео и звук давно потеснили древние текстовые портянки с убогими гифками. Любой современный сайт, не говоря уже о соц. сетях, изобилует медийной составляющей, а также интерактивен по самое не хочу.
И все бы замечательно, но устаревший HTML4 уже исчерпал свои возможности. Для отображения всего этого добра приходится использовать либо сторонние программы и сервисы, либо рулить что-то громоздкое и не всегда адекватно работающее.
Кроме того, поголовная мобилизация всего и вся, а также внедрение Интернета во все, что жужжит и питается электричеством, также обязывает разработчиков сайтов учитывать особенности каждого из возможных девайсов, чтобы они отображали сайт хотя бы примерно одинаково и функционально.
HTML5 призван устранить все проблемы и сделать сайты легче, проще и, самое важное, семантически правильными. Что это значит?
Структура современных сайтов
Исследование огромного количества современных сайтов выявило в их структуре следующие характерные черты:
1. Подавляющее большинство имеет типичную структуру: шапка, навигация, контент, подвал.
2. Подавляющее большинство также имеет в названиях этих блоков соответствующие слова: header, nav, article, footer.
Логика проста: раз уж большинство вебмастеров так называют функциональные блоки своих сайтов, то почему бы не зафиксировать это в стандарте? Как, например, всем и каждому известные тэги p, a или ul.
Сказано — сделано! Теперь эти тэги официально входят в состав HTML5.
Но все не так просто на самом деле. Спрашивается, зачем городить огород, если и так все успешно используют нейтральный тэг div с соответствующим id или классом и спокойно курят бамбук?
Вот тут как раз и выходит на сцену слово семантика. Для HTML5 оно является практически ключевым.
А все из-за расплодившихся разнокалиберных PDA-устройств. Экранчики и возможности у каждого разные. Как сделать так, чтобы все они хорошо отображали сайт? Нужна какая-то стандартная схема. Ведь не станешь же, на самом деле, прописывать в стилях все возможные варианты размеров.
Семантика — это и есть схема
Семантика однозначно закрепляет за шапкой конкретное обозначение, и за навигацией тоже, и за всеми остальными блоками также.
И тогда любому устройству будет однозначно понятно, где и что, а уж что он будет показывать, он будет решать сам именно на основе данной четкой схемы. В этом вся суть. Это самое главное.
Более того, семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое, т.е. контент. Причем, простейшим методом исключения: не шапка, не подвал, не навигация, а лишь то, что останется и даже конкретный кусок статьи.
Вот типичная упрощенная схема сайта в HTML5:
<!DOCTYPE html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</body>
</html>
Ну просто брыльянт!
Для начала достаточно. В следующий раз поговорим о новых тэгах более подробно и о том, нужны ли вообще тэги html и body в HTML5.
HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas
Сейчас как раз создаю потихоньку новый проект, думаю наверное его делать уже под HTML5.
Не наверное, а точно! :) 5-й HTML уже пришел де факто.