Эта статья, обновленная в 2018 году, изначально была основана на главе из HTML5 и CSS3 для реального мира , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль.
Когда вы изучите HTML5 и добавите новые приемы к своему набору инструментов, вы, вероятно, захотите создать шаблон, с которого вы сможете начать все свои проекты на основе HTML5. Мы поощряем это, и вы также можете рассмотреть возможность использования одного из множества онлайн-источников, которые предоставляют вам базовую отправную точку HTML5.
В этой статье мы рассмотрим, с чего начать. Давайте начнем с простой страницы 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?v=1.0"> </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?v=1.0">
В этих строках HTML5 практически не отличается от предыдущих синтаксисов. Заголовок страницы (единственный обязательный элемент внутри заголовка) объявляется таким же, как и всегда, и мета-теги, которые мы включили, являются просто дополнительными примерами, чтобы указать, где они будут размещены; Вы можете разместить здесь столько допустимых meta сколько захотите.
Ключевой частью этого фрагмента разметки является таблица стилей, которая включается с использованием обычного элемента link . Для link нет обязательных атрибутов, кроме href и rel . Атрибут type (который был распространен в более старых версиях HTML) не является обязательным, и при этом он никогда не был необходим для указания типа содержимого таблицы стилей.
Выравнивание игрового поля
Когда HTML5 был представлен, он включал ряд новых элементов, таких как article и section . Вы можете подумать, что это будет серьезной проблемой для поддержки в старых браузерах нераспознанных элементов, но вы ошибаетесь. Это потому, что большинству браузеров на самом деле все равно, какие теги вы используете. Если у вас есть HTML-документ с тегом recipe (или даже тегом ziggy ), и ваш CSS-файл прикрепил к этому элементу несколько стилей, почти каждый браузер будет работать так, как если бы это было совершенно нормально, применяя ваш стиль без жалоб.
Конечно, такой гипотетический документ не может быть проверен и может иметь проблемы с доступностью, но он будет корректно отображаться почти во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE не давал непризнанным элементам получать стилизацию. Эти загадочные элементы были замечены механизмом рендеринга как «неизвестные элементы», поэтому вы не смогли изменить то, как они выглядели или вели себя. Это включает в себя не только наши воображаемые элементы, но также и любые элементы, которые еще не были определены во время разработки этих версий браузера. Это означает (как вы уже догадались) новые элементы HTML5.
Хорошая новость заключается в том, что в наши дни использование IE сразу прекратилось: IE11 упал примерно до 2,7% в глобальном масштабе (по состоянию на 2018 год), а версии до этого практически исчезли с карты. (Вы можете просмотреть статистику использования браузера и поддержку функций HTML5 в общих чертах на сайте « Могу ли я использовать» .)
Если вам действительно нужна поддержка древних браузеров, вы все равно можете использовать надежный HTML5 Shiv , очень простой фрагмент JavaScript, изначально разработанный Джоном Резигом. Вдохновленный идеей Sjoerd Visscher, он сделал новые элементы HTML5 стилизованными в старых версиях IE. Правда, сейчас это не нужно. Как указано в разделе « Могу ли я использовать» , элементы HTML5 поддерживаются во всех современных браузерах и даже в их самых старых старых версиях. (Нажмите «Показать все», чтобы увидеть все версии браузера.) Единственное исключение — некоторые браузеры не распознают новый main элемент. Тем не менее, для этих браузеров вы все еще можете использовать этот элемент, если вы добавите подходящие стили (например, установите его как блочный элемент).
Остальное уже история
Глядя на остальную часть нашего начального шаблона, у нас есть обычный элемент 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) сценарий может потребоваться поместить в заголовок документа, поскольку вы хотите, чтобы он вступил в силу до того, как браузер начнет рендеринг страницы.
Следующие шаги
Один из способов поднять свой HTML5 на следующий уровень — это попробовать HTML5 Boilerplate . Этот регулярно обновляемый ресурс представляет собой удобную отправную точку для ваших проектов, содержащую все последние лучшие практики, разработанные сотнями лучших программистов мира. Это стоит скачать и проверить, даже если вы просто хотите просмотреть код и посмотреть, как используются определенные элементы в наши дни, такие как различные мета-элементы, найденные в заголовке документа.
Еще один способ поднять разработку вашего веб-сайта или веб-приложения на новый уровень — это попробовать одну из современных сред, широко используемых сегодня. Например, ознакомьтесь с обширными ресурсами SitePoint по React и Angular .