Основы работы с языком гипертекстовой разметки HTML5 - Учебное пособие

Мэтью Мак-Дональд51 Поддерживает ли браузер вашу разметку?......................................................................... 57 Замена отсутствующих возможностей заполнителями ..................................................... 69 Подзаголовки, созданные элементом ................................................................ Продвинутые методы работы с холстом................................................235 Что еще можно рисовать на холсте?......................................................................................... 280 Стратегия 3: добавляйте резервные решения с помощью Modernizr.............................В отношении разработки вебсайтов это полезно, т. к. позволяет отловить небольшие ошибки, вследствие которых страница может отображаться по-разному в различных браузерах, или которые могут вызвать более серьезные проблемы при попытке отредактировать страницу с целью ее улучшения. Но в то время, как все казались достаточно довольными этим языком разметки, у него был один скелет в шкафу: хотя браузеры понимали разметку XHTML, они не обеспечивали строгую проверку отступлений от правил, требуемую этим стандартом. В ней нужно было ужесточить правила обработки ошибок, которые бы заставляли браузеры не обрабатывать страницы, не отвечающие стандарту XHTML 2. HTML5 поддерживает все разработки, существовавшие в области создания веб-страниц в течение десяти лет после выпуска HTML 4.01, включая строгий синтаксис в стиле XHTML (если разработчики желают использовать его), а также множество инноваций для JAVASCRIPT. Например, можно создать XHTML-страницу по самому последнему слову этой технологии, а потом добавить в нее такой ужасно устаревший элемент, как (используемый для создания "бегущей строки"), и ни один из браузеров не будет жаловаться на такую страницу.Все элементы синтаксиса HTML5, рассмотренные в этом разделе - новое описание типа документа, метаэлемент кодировки, атрибут языка, таблицы стилей и ссылки на код JAVASCRIPT - работают как в новых, так и в старых браузерах. В нем также разрешается использовать в тегах как прописные, так и строчные буквы, как в следующем примере: В тегах можно использовать как прописные, так и строчные буквы.. "Язык" ранее в этой главе), а элементы и позволяют отделить информацию о странице от собственно содержимого страницы. Если вы принадлежите ко второму типу, то знайте, что инструмент для проверки правильности разметки, называющийся валидатором, может обнаружить код, который не соответствует рекомендуемым стандартам HTML5, даже если браузер и глазом не моргнет при обработке этого кода. Валидатор предложит три способа проверки разметки, каждая на своей вкладке: Validate by URI (для страницы, которая уже размещена в Паутине), Validate by File Upload (для страницы, сохраненной в файле на вашем компьютере) и Validate by Direct Input (для кода, вводимого или вставляемого в окно валидатора).К таким элементам относятся элементы, используемые для форматирования веб-страниц, и даже самый "зеленый" веб-разработчик знает, что это работа для таблиц стилей. Например, функцию элемента лучше предоставляет элемент , а элементу предпочтителен элемент . Подобным образом зачеркивание шрифта элементом теперь несет концептуальную нагрузку - зачеркнутый этим элементом текст считается больше неверным или утратившим значимость, вследствие чего он и был "вычеркнут" из документа. Эти два наиболее употребляемые в HTML элемента - (от англ. bold - полужирный текст) и (от англ. italics - курсивный текст) - были частично заменены введенными в первой версии XHTML элементами и , которые выполняли то же самое форматирование. Таким образом, элемент должен был применяться для логического выделения полужирным форматированием текста, имеющего важное (strong) значение, а элемент для акцентирования (stress emphasis) курсивом определен-Вот самый простой пример использования этого элемента: Регистрация начнется 2012-ll-25. Здесь важно понимать то обстоятельство, что элемент не обладает никакими встроенными возможностями форматирования. Хотя к элементу можно добавить дополнительное форматирование с помощью таблицы стилей, по умолчанию он ничем не отличается от обычного текста. Например, элемент обозначает набор ссылок для перемещения по содержимому, элемент в коде обрамляет нижний колонтитул страницы и т. д. для десятка (или около этого) новых элементов. В противоположность, элемент , например, вставляет в веб-страницу полноценный видеоплеер (см. разд.Легче всего начать знакомство с новыми семантическими элементами, а также обучаться их применению для структурирования страницы на классическом HTML-документе и вставить в него некоторые облагоображивающие элементы HTML5. Эта HTML-страница имеет базовую структуру, подобную структуре документа. Это простая, самодостаточная веб-страница, содержащая статью, хотя другие типы содержимого (например, сообщения блогов, описание продукта или короткий рассказ) вполне бы подошли для этих целей.

Оглавление

Об авторе........................................................................................................................13

Благодарности...............................................................................................................13

Введение.

Если вы выполнили все вышеизложенные шаги, созданный вами документ HTML5 должен выглядеть подобным образом:

Крошечный документ HTML

Дадим встряску браузеру в стиле HTML5.

40 Часть I. Знакомство с новым языком

Пусть это больше не самый короткий документ HTML5, зато неплохая отправная точка для создания любой веб-страницы. И хотя этот пример может показаться тошнотворно скучным, не переживайте по этому поводу, т. к. в следующей главе мы повысим уровень наших разметок до практических страниц, полных тщательно оформленного содержимого, отформатированного с помощью таблиц стилей.

ПРИМЕЧАНИЕ

Все элементы синтаксиса HTML5, рассмотренные в этом разделе — новое описание типа документа, метаэлемент кодировки, атрибут языка, таблицы стилей и ссылки на код JAVASCRIPT — работают как в новых, так и в старых браузерах. Это возможно благодаря тому, что они полагаются на настройки по умолчанию и встроенные схемы исправления ошибок, которые используются во всех браузерах.

Углубленное знакомство с синтаксисом HTML5

Как вы уже узнали, в HTML5 некоторые правила были ослаблены. Это было сделано потому, что создатели HTML5 хотели, чтобы этот язык реальнее отражал действительную работу веб-браузеров. Иными словами, они хотели сократить разрыв между "работающими веб-страницами" и "веб-страницами, правильными с точки зрения стандарта". В следующем разделе мы рассмотрим изменения в правилах более подробно.

ПРИМЕЧАНИЕ

Конечно же, все еще существуют устаревшие методы, поддерживаемые браузерами, употребление которых абсолютно не одобряется стандартом HTML5. Эти методы можно обнаружить с помощью валидатора HTML5 (см. разд. "Проверка кода HTML5" далее в этой главе).

Ослабленные правила

При нашем первом знакомстве с разметкой HTML5 мы узнали, что использование элементов , и не является обязательным для этой разметки. Но ослабление правил в HTML5 на этом не заканчивается.

В нем также разрешается использовать в тегах как прописные, так и строчные буквы, как в следующем примере: В тегах можно использовать как прописные, так и строчные буквы..

Также можно не использовать закрывающую обратную косую черту в пустых элементах, т. е. элементах без содержимого, таких как (изображение), (разрыв строки) или (горизонтальная линия). Далее приведены три равнозначных способа вставить разрыв строки: Я не могу двинуться ни вперед, ни назад.

Я застрял.

Глава 1. Представляем HTML5 41

В HTML5 также подверглись изменениям правила для атрибутов. Значения атрибутов больше не требуется брать в кавычки, но только при условии, что они не содержат запретных символов (обычно это символы >, =или пробел). Вот пример использования элемента таким образом: Также разрешены атрибуты без значений. Таким образом, если для установки флажка в XHTML требуется несколько повторяющийся синтаксис: то в HTML5 это можно делать в традициях HTML 4.01, указывая только одно название атрибута:

Но некоторых особенно беспокоит не то, что все это разрешено в HTML5, а то, что не особенно последовательные разработчики могут небрежно использовать как строгие, так и ослабленные правила, иногда даже в одном и том же документе. Но в действительности подобная небрежная разметка возможна и в XHTML. В обоих стандартах обязанность за хороший стиль разметки лежит на веб-разработчике, т. к. браузер скушает все, что ему будет подано.

Далее дается краткое изложение основных принципов хорошего стиля создания разметки HTML5. Здесь же указываются соглашения, применяемые в примерах этой книги, даже если следование этим соглашениям не является обязательным.

?Использование элементов , и . В элементе удобно размещать определение естественного языка страницы (см. разд. "Язык" ранее в этой главе), а элементы и позволяют отделить информацию о странице от собственно содержимого страницы.

?Строчные буквы в тегах. Использование строчных букв в тегах не является обязательным, но такие теги намного больше распространены, их легче вводить (т. к. не требуется задействовать клавишу ), а также не так режут глаз, как теги с прописными буквами.

?Взятие в кавычки значений атрибутов. Значения атрибутов берутся в кавычки потому, что на это есть причина — помочь избежать ошибок, которые в противном случае очень легко допустить. Без кавычек один неправильный символ значения атрибута может испортить всю страницу.

С другой стороны, существуют некоторые старые правила, которые в этой книге игнорируются (что также разрешается делать и вам). В примерах в этой книге пустые элементы не закрываются, т. к. при переходе на HTML5 большинство разработчиков не утруждает себя добавлением лишней косой черты (/). Также нет причины использовать длинную форму атрибутов при одинаковом названии и значении атрибута.

Проверка кода HTML5

Новый расслабляющий подход к правилам в HTML5 может быть вполне по душе одним веб-разработчикам. Других же сама мысль о том, что за фасадом работаю-

42 Часть I. Знакомство с новым языком щего без сучка, без задоринки браузера может скрываться непоследовательная, полная ошибок разметка, способна лишить сна. Если вы принадлежите ко второму типу, то знайте, что инструмент для проверки правильности разметки, называющийся валидатором, может обнаружить код, который не соответствует рекомендуемым стандартам HTML5, даже если браузер и глазом не моргнет при обработке этого кода.

Некоторые из возможных проблем, которые валидатор в состоянии уловить, включают следующие: ?отсутствие обязательных элементов (например, элемента ); ?отсутствие закрывающего тега;

?неправильно внедренные теги;

?отсутствие атрибутов у тегов, для которых они обязательны (например, атрибута srcтега );

?неправильное расположение элементов или содержимого (например, текста в блоке ).

Инструменты для разработки веб-страниц, такие как Dreamweaver и Expression Web, оснащены собственными валидаторами, но только самые последние версии поддерживают HTML5. В таком случае можно воспользоваться одним из онлайновых валидаторов. Далее даются инструкции по использованию популярного валидатора от организации W3C: 1. Откройте в своем браузере страницу http://validator.w3.org (рис. 1.2).

Валидатор предложит три способа проверки разметки, каждая на своей вкладке: Validate by URI (для страницы, которая уже размещена в Паутине), Validate by File Upload (для страницы, сохраненной в файле на вашем компьютере) и Validate by Direct Input (для кода, вводимого или вставляемого в окно валидатора).

2. Выберите нужную вкладку и предоставьте свою HTML-разметку.

Для метода Validate by URI нужно ввести URL проверяемой страницы в поле Address (например, http://www.MYSLOPPYSITE.com/FLAWEDPAGE.html).

Для метода Validate by File Upload необходимо загрузить в валидатор требуемый файл с вашего компьютера. Для этого сначала нажмите кнопку Choose (Выберите файл) в поле File (в браузере Chrome нажмите кнопку Выбрать файл). В диалоговом окне Открыть выберите требуемый HTML-файл и нажмите кнопку Открыть.

Метод Validate by Direct Input позволяет проверить любой код, помещенный в поле Enter the Markup to validate. Для этого метода легче всего будет скопировать код из текстового редактора и поместить его в поле для проверки.

Прежде чем приступить к проверке кода, можно щелкнуть по ссылке More Options, чтобы изменить некоторые параметры, но это нежелательно. В част-

Глава 1. Представляем HTML5 43 ности, будет лучше предоставить валидатору определить тип документа автоматически. Таким образом валидатор использует описание типа документа, указанное в проверяемой веб-странице. Также лучше предоставить валидатору самому определить кодировку страницы, за исключением страниц с кодировкой, которую валидатор затрудняется определить.

Рис. 1.2. Вебсайт http://validator.w3.org позволяет выполнить проверку разметки HTML тремя разными способами

3. Нажмите кнопку Check.

Ваш код будет отправлен на проверку, и после короткого ожидания в браузере будет выведен отчет с результатами валидации. Если код не прошел проверку, то в отчете будут указаны выявленные валидатором ошибки (рис. 1.3).

ПРИМЕЧАНИЕ

Даже для полностью правильного HTML-документа в отчете может быть указано несколько предупреждений (хотя полностью безобидных), включая такие, что кодировка была определена автоматически и услуга валидации кода HTML5 является экспериментальной и не совсем доведенной до логического конца.

Как можно видеть на рис. 1.3, валидатор выявил в документе четыре нарушения правил HTML5, являющиеся результатом двух ошибок в коде. Первая ошибка — отсутствует обязательный элемент . Вторая — элемент закрывается до закрытия вложенного в него элемента . Чтобы исправить эту ошибку, нужно вместо последовательности элементов использовать последовательность . Тем не менее, несмотря на эти ошибки, эта разметка правильная, и все браузеры будут отображать эту страницу должным образом.

44 Часть I. Знакомство с новым языком

Рис. 1.3. Отчет с результатами проверки

Возвращение XHTML

Как мы уже узнали, восхождение спецификации HTML5 знаменует, по идее, закат предыдущего короля Всемирной паутины — стандарта XHTML. Но действительность не так проста, и поклонникам XHTML не нужно отказываться ни от чего, что им мило в языках разметки предыдущего поколения.

Прежде всего, вспомним, что синтаксис XHTML продолжает существовать. Налагаемые XHTML правила либо продолжают использоваться в качестве руководящих принципов (например, правила правильного вложения элементов), либо поддерживаются в виде необязательных соглашений (например, соглашение об использовании закрывающей косой черты с пустыми элементами).

Но что если вы хотите сделать следование правилам XHTML-синтаксиса обязательным? Возможно, вы беспокоитесь, что вы (или ваши коллеги по работе) неосознанно потихоньку впадете в использование ослабленных соглашений обычного HTML. Чтобы не допустить этого, вам нужно использовать XHTML5; это менее распространенный стандарт, который, по сути, является HTML5, облаченным в ограничения, основанные на XML.

Чтобы сделать документ HTML5 документом XHTML, нужно явно указывать пространство имен XHTML в элементе , закрывать каждый элемент, обязательно использовать строчные буквы в тегах и т. д. В следующем листинге приводится пример кода, в котором выполнены все эти требования: Глава 1. Представляем HTML5 45

Крошечный документ HTML

Дадим встряску браузеру в стиле XHTML5.

Для проверки этого кода требуется валидатор XHTML, который контролирует следование строгим старым правилам XHTML. Валидатор от W3C для этого не подойдет, но зато подойдет валидатор на сайте http://validator.nu, где нужно указать требуемый стандарт (т. е. XHTML) в раскрывающемся списке Preset. Также нужно установить флажок Be lax about HTTP Content-Type, если только вы не вставляете проверяемый код непосредственно в текстовое поле.

Следуя этим шагам, вы сможете создать документ XHTML и выполнить его проверку. Тем не менее браузеры все равно будут обрабатывать этот документ, как обычную страницу HTML5, которая просто пыжится походить на XML-документ. Никаких дополнительных правил при обработке такой страницы применять они не будут.

Если же вы хотите, чтобы и браузеры обрабатывали страницу согласно правилам XHTML, то вам нужно настроить свой веб-сервер для подачи страниц с MIME-типом application/xhtml xmlили application/xml, вместо стандартного типа text/html. (Краткую информацию о MIME-типах см. во врезке "На профессиональном уровне. Основные сведения о MIME-типах" главы 5.) Но прежде чем звонить администратору вашего веб-хостинга и давать ему эти инструкции, имейте в виду, что с этими настройками ваша страница не будет отображаться во всех версиях Internet Explorer более ранних, чем IE 9. По этой причине настоящий XHTML является невыполнимым условием при заключении сделки веб-страницы с браузером.

Кстати, браузеры, поддерживающие XHTML5, обрабатывают такую разметку по-другому, чем обычный код HTML5. Они пытаются обрабатывать страницу как документ XML, и если это им не удается (по причине ошибки в коде), браузер прекращает обработку оставшейся части документа.

Какой из этого следует вывод? Для подавляющего большинства веб-разработчиков, от любителей до серьезных профессионалов, игра по строгим правилам XHTML не стоит требуемых для этого свеч. Единственным исключением является разработка специальных решений, например страниц с содержимым, которым нужно манипулировать посредством XML-инструментов, таких как, например, XQUERY и XPATH.

46 Часть I. Знакомство с новым языком

СОВЕТ

Если вам интересно, можно обмануть браузер и заставить его переключиться в режим XHTML. Для этого нужно лишь переименовать файл с расширением xhtml или xht, а потом открыть его с жесткого диска вашего компьютера. Большинство браузеров (включая Firefox, Chrome и IE 9) будут обрабатывать такую страницу, как будто бы она была загружена с веб-сервера с настройками MIME XML. Если страница содержит любую незначительную ошибку, в браузере отобразится частично обработанная страница (IE 9), сообщение об ошибке XML (Firefox) или то и другое вместе (Chrome).

Семейство элементов HTML5

Все это время мы рассматривали изменения в синтаксисе HTML5. Но более важными являются добавления, удаления и изменения поддерживаемых в HTML элементов. В последующих разделах мы вкратце рассмотрим эти аспекты.

Добавленные элементы

В следующих главах в основном внимание уделяется изучению новых элементов, предоставляющих веб-страницам возможности, которые отсутствовали до настоящего времени. Эти элементы, с кратким описанием и указанием главы, в которой они рассматриваются, перечислены в табл. 1.1.

Таблица 1.1. Новые элементы HTML5

Категория

Семантические элементы для работы со структурой страниц

Семантические элементы для работы с текстом

Элементы для работы с веб-формами и интерактивности

Элементы для поддержки аудио, видео и подключаемых модулей

Поддержка холста

Поддержка языков иных, чем английский

Элементы

, , , , , , , , , , , , (поддерживался и ранее, но теперь официально является частью языка)

(старый элемент, но со многими новыми подтипами), , , , , , , , , , (поддерживался и ранее, но теперь официально является частью языка)

, , , Где рассматривается