Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Теперь, когда мы дали вам небольшой учебник по истории, а также некоторые веские причины изучить HTML5 и начать использовать его в своих проектах сегодня, пришло время познакомить вас с примером сайта, который мы будем постепенно строить в этой книге. ,
После того, как мы кратко рассмотрим то, что будем создавать, мы обсудим некоторые основы синтаксиса HTML5, а также несколько советов по созданию наилучшего кода. Мы рассмотрим это вместе с важной информацией о совместимости между браузерами и основами структуры страницы в HTML5. Наконец, мы представим некоторые конкретные элементы HTML5 и посмотрим, как они будут вписываться в наш макет.
Итак, давайте углубимся в это!
Представляем Вестник HTML5
Для этой книги мы собрали пример проекта веб-сайта, который мы будем создавать с нуля. Сайт уже создан — вы можете проверить это сейчас на thehtml5herald.com. Это старый газетный сайт под названием The HTML5 Herald . Главная страница сайта содержит некоторые медиа в виде видео, изображений, статей и рекламы. Есть также другая страница, содержащая регистрационную форму.
Идите вперед и посмотрите на источник, и попробуйте некоторые функции, если хотите. По мере прохождения книги, мы будем работать над кодом, который вошел в создание сайта. Мы не будем обсуждать каждую деталь CSS, поскольку большинство из них уже должно быть вам знакомо — макеты с плавающей точкой, абсолютное и относительное позиционирование, основные стили шрифта и тому подобное. В первую очередь мы сосредоточимся на новых элементах HTML5, а также на API, а также на всех методах CSS3, используемых для добавления стилей и интерактивности к различным элементам.
На рисунке ниже показано, как выглядит готовый продукт.
Пока мы создаем сайт, мы сделаем все возможное, чтобы объяснить элементы HTML5, API-интерфейсы и функции CSS3, и постараемся рекомендовать некоторые лучшие практики. Конечно, некоторые из этих технологий все еще являются новыми и находятся в стадии разработки, поэтому мы постараемся не слишком догматично относиться к тому, что вы можете и не можете делать.
Базовый шаблон HTML5
Изучая HTML5 и добавляя новые методы в свой инструментарий, вы, вероятно, захотите создать шаблон, с которого вы сможете начать все свои проекты на основе HTML5. Мы поощряем это, и вы также можете рассмотреть возможность использования одного из множества онлайн-источников, которые предоставляют вам базовую отправную точку HTML5. [4]
В этом проекте, однако, мы хотим построить наш код с нуля и объяснить каждый фрагмент по мере продвижения. Конечно, было бы невозможно даже для самого фантастического и громоздкого примера сайта, о котором мы могли мечтать, включить каждый новый элемент или технику, поэтому мы также объясним многие новые функции, которые не вписываются в проект. Таким образом, вы будете знакомы с широким набором опций при принятии решения о том, как создавать свои веб-сайты и приложения HTML5 и CSS3, что позволит вам использовать эту книгу в качестве краткого справочника по ряду функций и методов.
Давайте начнем с простой страницы HTML5:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="js/html5shim.js"></script> <![endif]--> </head> <body> <script src="js/scripts.js"></script> </body> </html> Имея этот базовый шаблон, давайте теперь рассмотрим некоторые важные части разметки и то, как они могут отличаться от того, как HTML был написан до HTML5.
Доктип
Во-первых, у нас есть декларация типа документа или doctype . Это просто способ сообщить браузеру или любому другому анализатору, какой тип документа он просматривает. В случае файлов HTML это означает конкретную версию и разновидность HTML. Тип документа всегда должен быть первым элементом в начале любого HTML-файла. Много лет назад декларация типа документа была ужасной и запоминающейся неразберихой. Для XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
И для HTML4 Переходный:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Хотя эта длинная строка текста в верхней части наших документов на самом деле не повредила нам (за исключением того, что заставляла зрителей наших сайтов загружать несколько дополнительных байтов), HTML5 покончил с этой не поддающейся расшифровке болтовней. Теперь все, что вам нужно, это:
<!DOCTYPE html>
Просто и по существу. Тип документа может быть написан в верхнем, нижнем или смешанном регистре. Вы заметите, что «5» явно отсутствует в декларации. Хотя текущая итерация веб-разметки известна как «HTML5», на самом деле это всего лишь эволюция предыдущих стандартов HTML, а будущие спецификации будут просто развитием того, что мы имеем сегодня.
Поскольку браузеры, как правило, должны поддерживать весь существующий контент в Интернете, они не полагаются на тип документа, чтобы сообщить им, какие функции должны поддерживаться в данном документе. Другими словами, один только тип документа не сделает ваши страницы HTML5-совместимыми. Это действительно зависит от браузера. Фактически, вы можете использовать один из этих двух старых типов документов с новыми элементами HTML5 на странице, и страница будет отображаться так же, как если бы вы использовали новый тип документа.
Элемент html
Следующим в любом документе HTML является html элемент, который существенно не изменился в HTML5. В нашем примере мы включили атрибут lang со значением en , которое указывает, что документ на английском языке. В разметке на основе XHTML вы должны были включить атрибут xmlns . В HTML5 это больше не требуется, и даже атрибут lang не нужен для проверки или правильной работы документа.
Итак, вот что у нас есть, включая закрывающий тег html :
<!DOCTYPE html> <html lang="en"> </html>
head стихия
Следующая часть нашей страницы — это head раздела. Первая строка внутри head — это та, которая определяет кодировку символов для документа. Это еще один элемент, который был упрощен после XHTML и HTML4, и является дополнительной функцией, но рекомендуется. В прошлом вы могли написать это так:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5 улучшает это, уменьшая meta кодировки символов до минимума:
<meta charset="utf-8">
Почти во всех случаях utf-8 — это значение, которое вы будете использовать в своих документах. Полное объяснение кодировки символов выходит за рамки этой книги, и, вероятно, оно также не будет вам интересно. Тем не менее, если вы хотите углубиться немного глубже, вы можете прочитать эту тему на W3C или WHATWG.
Важно: Декларация кодировки
Чтобы гарантировать, что все браузеры правильно читают кодировку символов, все объявление кодировки символов должно быть включено где-то в первые 512 символов вашего документа. Он также должен появляться перед любыми основанными на контенте элементами (такими как элемент title , следующий за ним на нашем примере сайта).
Мы могли бы написать гораздо больше об этой теме, но мы хотим, чтобы вы не спали, поэтому мы избавим вас от этих подробностей! На данный момент мы согласны принять эту упрощенную декларацию и перейти к следующей части нашего документа:
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css">
В этих строках HTML5 практически не отличается от предыдущих синтаксисов. Заголовок страницы (единственный обязательный элемент внутри заголовка) объявляется таким же, как и всегда, и мета-теги, которые мы включили, являются просто дополнительными примерами, чтобы указать, где они будут размещены; Вы можете разместить здесь столько допустимых meta сколько захотите.
Ключевой частью этого фрагмента разметки является таблица стилей, которая включается с использованием обычного элемента link . Для link нет обязательных атрибутов, кроме href и rel . Атрибут type (который был распространен в более старых версиях HTML) не является обязательным, и при этом он никогда не был необходим для указания типа содержимого таблицы стилей.
Выравнивание игрового поля
Следующий элемент в нашей разметке требует немного справочной информации, прежде чем он может быть представлен. HTML5 включает в себя ряд новых элементов, таких как article и section , о которых мы расскажем позже. Вы можете подумать, что это будет серьезной проблемой для поддержки в старых браузерах нераспознанных элементов, но вы ошибаетесь. Это потому, что большинству браузеров на самом деле все равно, какие теги вы используете. Если у вас есть HTML-документ с тегом recipe (или даже тегом ziggy ), и ваш CSS-файл прикрепил к этому элементу несколько стилей, почти каждый браузер будет работать так, как если бы это было совершенно нормально, применяя ваш стиль без жалоб.
Конечно, такой гипотетический документ не может быть проверен и может иметь проблемы с доступностью, но он будет корректно отображаться почти во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE не давал непризнанным элементам получать стилизацию. Эти загадочные элементы были замечены механизмом рендеринга как «неизвестные элементы», поэтому вы не смогли изменить то, как они выглядели или вели себя. Это включает в себя не только наши воображаемые элементы, но также и любые элементы, которые еще не были определены во время разработки этих версий браузера. Это означает (как вы уже догадались) новые элементы HTML5.
Хорошей новостью является то, что на момент написания статьи большинство людей, все еще использующих версию IE, используют версию 9 или выше, и очень немногие используют версию 9, так что это больше не является большой проблемой для большинства разработчиков; однако, если большая часть вашей аудитории все еще использует IE8 или более раннюю версию, вам придется принять меры, чтобы ваши проекты не развалились.
К счастью, есть решение: очень простой фрагмент JavaScript, изначально разработанный Джоном Резигом. Вдохновленный идеей Sjoerd Visscher, он может сделать новые элементы HTML5 стилизованными в более старых версиях IE.
Мы включили этот так называемый «HTML5 Shiv» [5] в нашей разметке в виде тега скрипта, окруженного условными комментариями. Условные комментарии являются частной функцией, реализованной в Internet Explorer в версии 9 и более ранних. Они предоставляют вам возможность указывать конкретные версии этого браузера с помощью сценариев или стилей. [6] Следующий условный комментарий сообщает браузеру, что вложенная разметка должна появляться только для пользователей, просматривающих страницу с Internet Explorer до версии 9:
<!--[if lt IE 9]> <script src="js/html5shim.js"></script> <![endif]-->
Следует отметить, что если вы используете библиотеку JavaScript, которая имеет дело с функциями HTML5 или новыми API, возможно, в ней уже будет присутствовать скрипт с поддержкой HTML5; в этом случае вы можете удалить ссылку на скрипт. Одним из примеров этого может быть Modernizr, библиотека JavaScript, которая обнаруживает современные функции HTML и CSS. Modernizr дает вам возможность включить код, который включает элементы HTML5 в более старых версиях IE, поэтому shiv будет избыточным. Мы подробнее рассмотрим Модернизр в Приложении А.
Примечание: не каждый может извлечь выгоду из HTML5 Shiv
Конечно, есть еще группа пользователей, которые не могут извлечь выгоду из HTML5: те, кто по тем или иным причинам отключил JavaScript и использует IE8 или ниже. Как веб-дизайнеры, нам постоянно говорят, что контент наших сайтов должен быть полностью доступен для всех пользователей, даже без JavaScript. Но это не так плохо, как кажется. Ряд исследований показал, что число пользователей, у которых отключен JavaScript, достаточно мало, чтобы не вызывать особого беспокойства, особенно если учесть, сколько из них будут использовать IE8 или ниже.
В исследовании, опубликованном в октябре 2013 года, Цифровая служба правительства Великобритании определила, что пользователи, просматривающие правительственные веб-службы в Великобритании с отключенным или недоступным JavaScript, составили 1,1%. В другом исследовании, проведенном в сети разработчиков Yahoo (опубликовано в октябре 2010 года), пользователи с отключенным JavaScript составили около 1% от общего трафика во всем мире.
Остальное уже история
Глядя на остальную часть нашего начального шаблона, у нас есть обычный элемент body вместе с закрывающим тегом и закрывающим тегом html . У нас также есть ссылка на файл JavaScript внутри элемента script .
Подобно тегу link обсуждался ранее, тег script не требует объявления атрибута type . Если вы когда-нибудь писали XHTML, вы могли бы вспомнить теги своего script выглядящие так:
<script src="js/scripts.js" type="text/javascript"></script>
Поскольку для всех практических целей JavaScript является единственным реальным языком сценариев, используемым в Интернете, и поскольку все браузеры предполагают, что вы используете JavaScript, даже если вы явно не объявляете этот факт, атрибут type в документах HTML5 не нужен :
<script src="js/scripts.js"></script>
Мы поместили элемент script внизу нашей страницы, чтобы соответствовать рекомендациям по внедрению JavaScript. Это связано со скоростью загрузки страницы; когда браузер встречает скрипт, он приостанавливает загрузку и рендеринг остальной части страницы, пока он анализирует скрипт. Это приводит к тому, что страница загружается намного медленнее, когда большие скрипты включаются вверху страницы перед любым содержимым. Именно поэтому большинство сценариев следует размещать в самом низу страницы, чтобы их можно было проанализировать только после загрузки остальной части страницы.
Однако в некоторых случаях (например, при использовании HTML5 shiv) сценарий может потребоваться поместить в заголовок документа, поскольку вы хотите, чтобы он вступил в силу до того, как браузер начнет отображать страницу.
[4] Некоторые из них вы можете посмотреть на html5boilerplate.com и https://github.com/murtaugh/HTML5-Reset .
[5] Возможно, вы более знакомы с его альтернативным названием: HTML5 shim. Хотя существуют идентичные фрагменты кода, которые называются обоими именами, мы будем называть все экземпляры HTML5 shiv, его оригинальным именем.
[6] Для получения дополнительной информации см. Ссылку на SitePoint .