HTML5 Введение

html5.jpegКак и обещал, начинаю обучающий цикл статей, посвященный последней версии 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

24.01.2012

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (5 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

2 комментария

  1. AndreyShaD
    http://andreyshad.ru/
    14.11.2015

    Сейчас как раз создаю потихоньку новый проект, думаю наверное его делать уже под HTML5.

  2. Игорь Квентор
    http://www.websovet.com/
    14.11.2015

    Не наверное, а точно! :) 5-й HTML уже пришел де факто.

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