Язык HTML5 делает акцент на упрощении разметки, необходимой для созда- HTML5 делает акцент на упрощении разметки, необходимой для созда- 5 делает акцент на упрощении разметки, необходимой для созда -ния соответствующих W3C-стандартам страниц и объединения всего требуемого
CSS - и JavaScript-кода, а также файлов изображений. Если вести речь о пользова- - и JavaScript-кода, а также файлов изображений. Если вести речь о пользова- JavaScript -кода, а также файлов изображений. Если вести речь о пользова- -кода, а также файлов изображений. Если вести речь о пользова-телях, которые, вероятно, просматривают наши страницы, подключаясь к Интер -нету по каналу с невысокой скоростью передачи информации, а также об основной
цели наших адаптивных веб-дизайнов, то нам необходимо, чтобы сайт не просто
адаптировался к их более ограниченным областям просмотра, но и загружался
настолько быстро, насколько это возможно. Несмотря на то что при удалении
лишних элементов разметки объем передаваемых данных уменьшается совсем не-значительно, даже малая экономия будет полезна!
HTML5 несет в себе дополнительные преимущества и функции по сравнению
с предыдущей версией (HTML 4.01). Веб-разработчиков клиентских приложений,
скорее всего, заинтересуют новые семантические HTML5-элементы, которые обес- HTML5-элементы, которые обес- 5-элементы, которые обес -печивают более осмысленный код для поисковых механизмов. HTML5 также по- HTML5 также по- 5 также по-зволяет организовать для пользователей обратную связь на основе базового взаи -модействия с сайтами вроде отправки данных форм и т. п., зачастую устраняя
необходимость в JavaScript-обработке форм, более требовательных к вычислитель- JavaScript -обработке форм, более требовательных к вычислитель- -обработке форм, более требовательных к вычислитель -ным ресурсам. Опять-таки это хорошая новость, поскольку мы сможем создать
более компактную и быстрее загружающуюся кодовую базу.
Экономия времени и кода
благодаря HTML 5
Первая строка любого HTML-документа начинается с DOCTYPE (Document Type
Declaration — определение типа документа). Честно говоря, эта часть будет авто -матически добавляться используемым редактором кода веб-страниц либо можно
скопировать и вставить ее из уже имеющегося шаблона (в действительности никто
не вводит вручную определение типа документа HTML 4.01 целиком). До появле- HTML 4.01 целиком). До появле- 4.01 целиком). До появле-ния HTML5 DOCTYPE для стандартной страницы на HTML 4.01 выглядело сле- HTML5 DOCTYPE для стандартной страницы на HTML 4.01 выглядело сле- 5 DOCTYPE для стандартной страницы на HTML 4.01 выглядело сле- HTML 4.01 выглядело сле- 4.01 выглядело сле -дующим образом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Однако теперь, когда у нас есть HTML5, определение типа документа выглядит
так:
<!DOCTYPE html>
Сейчас я не печатаю вручную определение типа документа каждый раз, когда
пишу страницу, и, думаю, вы поступаете точно так же. «Что же такого особенного
в HTML5?» — спросите вы. Как насчет добавления ссылок в JavaScript или CSS на
ваших страницах? При использовании HTML 4.01 правильный вариант указания
ссылки на файл сценария будет таким:
<script src="js/jquery-1.6.2.js" type="text/javascript"></script>
1.6. Преимущества HTML5 41
HTML5 упрощает его:
<script src="js/jquery-1.6.2.js"></script>
Как вы можете видеть, больше нет необходимости указывать атрибут type.
Похожим образом дело обстоит с добавлением ссылок на CSS -файлы. HTML5
также допускает использование намного менее аккуратного синтаксиса, который
будет считаться валидным. Например, <sCRipt SrC=js/jquery-1.6.2.js></script>
будет точно таким же валидным, как и предыдущий образец. Здесь нет кавычек
вокруг источника сценария, а в именах тега и атрибута используется сочетание
символов в верхнем и нижнем регистре. Однако для HTML5 это не имеет значения:
данный код сможет пройти валидацию в W3C-валидаторе HTML5 (http://validator.
w3.org/). Это хорошая новость для вас, если ваш код написан не очень аккуратно
и, что важнее, если вы хотите убрать из своей разметки все лишние символы. Есть
и другие особенности написания кода, которые облегчают жизнь. Предлагаю взгля-нуть на новые семантические HTML5-элементы.
Новые семантически значимые
элементы тегов HTML 5
При структурировании HTML-страницы стандартный способ разметки верхнего
колонтитула и блока навигации выглядит примерно так:
<div class="header">
<div class="navigation">
<ul class="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</div> <!-- конец navigation -->
</div> <!-- конец header -->
Однако взгляните, как все это можно сделать с использованием HTML5:
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>
Как вам результат? Вместо безликих тегов <div> для каждого структурного
элемента (пусть даже и с добавленными именами классов) HTML5 дает нам се- HTML5 дает нам се- 5 дает нам се -мантически более значимые элементы. Общие структурные разделы страниц,
например верхний колонтитул и навигационное меню (и многие другие, в чем вы
вскоре убедитесь), располагают своими собственными тегами элементов. Наш код
стал намного более понятным благодаря тегу <nav>, который «говорит» браузерам:
«Эй, вот этот раздел является навигационным». Это хорошая новость для нас,
42 Глава 1. Знакомство с HTML5, CSS3 и адаптивным веб-дизайном
но, возможно, более важно то, что это хорошая новость и для поисковых механиз -мов. Теперь они смогут лучше понимать наши страницы, чем когда-либо прежде,
и соответствующим образом ранжировать их содержимое.
При создании HTML-страниц я часто использую именно этот подход, зная, что
они затем будут переданы команде разработчиков серверных приложений (это
такие крутые ребята, имеющие дело с PHP, Ruby, .NET, ColdFusion и т. д.), прежде
чем наконец будут размещены в Интернете. Чтобы оставаться в хороших отноше-ниях с разработчиками серверных приложений, я часто снабжаю комментариями
закрывающие теги </div>, благодаря чему другие люди (и я сам) могут с легкостью
разобраться, где заканчиваются разделы <div> . HTML5 в значительной степени
сводит на нет эту задачу. При взгляде на закрывающий тег, например </header> ,
сразу понятно, какой элемент он закрывает, и при этом не требуются никакие ком -ментарии.
|