Как и обещал, начинаю цикл статей, посвященных последней версии HTML за номером 5. Цум воль!
Ни для кого не секрет, что мы сейчас живем в бурном море Интернет-медийной информации, где видео и звук давно потеснили древние текстовые портянки с убогими гифками. Любой более-менее современный сайт, не говоря уже о соц. сетях, изобилует медийной составляющей, а также интерактивен по самое нихочу. И все бы замечательно, но устаревший HTML4 и всевозможные Java-примочки уже исчерпали свои возможности. Для отображения всего этого добра приходится использовать либо сторонние программы и сервисы, либо рулить что-то громоздкое и не всегда адекватно работающее.
Кроме того, поголовная мобилизация всего и вся, а также внедрение Интернета во все, что жужжит и питается электричеством, также обязывает разработчиков сайтов учитывать особенности каждого из возможных девайсов, чтобы они отображали сайт хотя бы примерно одинаково и функционально.
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.
Спасибо большое, очень интересная тема, с нетерпением жду продолжения…
Ответить
Игорь Квентор 25.01.2012
@Alex_la, вэлкам!
Ответить
Спасибо, Игорь. Как раз то что надо, а то я запарился английский изучать, информации много, да хрен чего поймёшь), а тут всё доходчиво и с юмором. Молодца.
Ответить
Игорь Квентор 25.01.2012
@SwaEgo, не за что! :)
Ответить
Думаю в первой статье стоило предупредить, что новые теги не корректно отображаются в старых браузерах (ИЕ 9, например). Для решения этой проблемы нужно подключить скрипт html5.js, гуляющий на просторах инета.
Ответить
Игорь Квентор 25.01.2012
@Snegurka, ИЕ9 уже устарел? :) Вроде он до сих пор еще в тестовом режиме?
О поддержке HTML5 различными браузерами я еще расскажу.
Ответить
Игорь, статья хорошая, спасибо. Не подскажите, где можно посмотреть теги для 5 хтмл и их описания?
Ответить