В этой статье мы рассмотрим, как приступить к созданию собственного шаблона HTML5. Мы рассмотрим основные элементы HTML-шаблона, закончив базовым шаблоном, который вы можете взять с собой и использовать в дальнейшем.
Анатомия шаблона HTML5
HTML-шаблон обычно включает следующие части:
- Объявление типа документа (или doctype)
- Элемент
<html>_ - Кодировка символов
- Мета-элемент области просмотра
<title>,description, иauthor- Метаэлементы Open Graph для социальных карт
- Фавиконы и сенсорные иконки
- Ссылки на таблицы стилей и скрипты
Помимо объявления типа документа и <html>элемента, перечисленные выше элементы в основном находятся внутри <head>раздела шаблона HTML.
Тип документа HTML5
Ваш шаблон HTML5 должен начинаться с объявления типа документа или doctype . Тип документа — это просто способ сообщить браузеру или любому другому парсеру, какой тип документа он просматривает. В случае файлов HTML это означает конкретную версию и вариант HTML. Тип документа всегда должен быть первым элементом в начале любого HTML-файла. Много лет назад объявление типа документа представляло собой уродливую и трудно запоминающуюся мешанину, часто определяемую как «XHTML Strict» или «HTML Transitional».
С появлением HTML5 эти неразборчивые сучки в глазу исчезли, и теперь все, что вам нужно, это:
<!doctype html>
Просто и по делу. Тип документа может быть написан прописными, строчными или смешанными регистрами. Вы заметите, что в объявлении явно отсутствует цифра «5». Хотя текущая версия веб-разметки известна как «HTML5», на самом деле это просто эволюция предыдущих стандартов HTML, а будущие спецификации будут просто развитием того, что мы имеем сегодня. Никогда не будет «HTML6», поэтому принято называть текущее состояние веб-разметки просто «HTML».
Поскольку от браузеров требуется поддержка старого контента в Интернете, тип документа не зависит от того, какие функции должны поддерживаться в том или ином документе. Другими словами, сам по себе тип документа не сделает ваши страницы совместимыми с современными функциями HTML. На самом деле браузер должен определять поддержку функций в каждом конкретном случае, независимо от используемого типа документа. На самом деле, вы можете использовать один из старых типов документов с новыми элементами HTML5 на странице, и страница будет отображаться так же, как если бы вы использовали новый тип документа.
Элемент <html>_
За типом документа в любом HTML-документе следует <html>элемент:
<html lang="en">
Это не претерпело каких-либо существенных изменений с момента появления HTML5. В приведенном выше фрагменте кода мы включили langатрибут со значением en, который указывает, что документ на английском языке. Это не требуется для проверки страницы, но вы получите предупреждение от большинства валидаторов, если не включите его.
Элемент <html>разделен на две части, разделы <head>и . <body>Этот <head>раздел содержит важную информацию о документе, которая не отображается конечному пользователю, например кодировку символов и ссылки на файлы CSS и, возможно, JavaScript . Раздел <body>содержит все, что отображается в браузере — текст, изображения и так далее.
Кодировка символов HTML-документа
Первая строка внутри <head>раздела HTML-документа — это та, которая определяет кодировку символов для документа. Это необязательная функция, которая не вызовет никаких предупреждений в валидаторах, но рекомендуется для большинства HTML-страниц:
<meta charset="utf-8">
Почти во всех случаях utf-8это значение, которое вы будете использовать в своих документах. Полное объяснение кодировки символов выходит за рамки этой статьи, и, вероятно, вам это тоже не будет интересно. Тем не менее, если вы хотите копнуть немного глубже, вы можете прочитать о кодировке символов в спецификации HTML .
Примечание: чтобы убедиться, что некоторые старые браузеры правильно считывают кодировку символов, все объявление кодировки символов должно быть включено где-то в пределах первых 512 символов вашего документа. Он также должен стоять перед любыми элементами, основанными на содержимом (например, <title>элементом, который появляется позже в нашем примере) .
На эту тему можно было бы написать гораздо больше, но пока мы довольствуемся этим упрощенным заявлением и переходим к следующей части нашего документа.
Мета-элемент области просмотра
Мета-элемент viewport — это функция, которую вы увидите практически в каждом шаблоне HTML5. Для адаптивного веб-дизайна и мобильного дизайна важно:
<meta name="viewport" content="width=device-width, initial-scale=1">
Этот <meta>элемент включает в себя два атрибута, которые работают вместе как набор имя/значение. В этом случае nameустановлено значение , viwportа значение равно width=device-width, initial-scale=1. Используется только мобильными устройствами. Вы заметите, что значение состоит из двух частей, описанных здесь:
width=device-width: ширина области просмотра в пикселях, на которой должен отображаться веб-сайт.initial-scale: это должно быть положительное число от 0,0 до 10,0. Значение «1» указывает на соотношение 1:1 между шириной устройства и размером области просмотра.
Вы можете прочитать немного больше об этих функциях метаэлементов на MDN , но сейчас просто знайте, что в большинстве случаев этот метаэлемент с этими настройками лучше всего подходит для мобильных и адаптивных веб-сайтов.
<title>, descriptionи _author
Следующий раздел шаблона HTML содержит следующие три строки:
<title>A Basic HTML5 Template</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
Эти элементы уже давно являются частью HTML, так что здесь нет ничего нового. Это <title>то, что отображается в строке заголовка браузера (например, при наведении курсора на вкладку браузера). Этот элемент является единственным обязательным элементом внутри файла <head>.
Два других являются необязательными <meta>элементами, определяющими описание для целей SEO вместе с автором. Все элементы внутри <head>являются необязательными, за исключением <title>. На самом деле, вы можете поместить в файл сколько угодно допустимых <meta>элементов .<head>
Мета-элементы Open Graph для социальных карт
Как уже упоминалось, все мета-элементы являются необязательными, но многие из них имеют преимущества для SEO и маркетинга в социальных сетях. Следующий раздел в нашем шаблоне HTML5 включает некоторые из этих параметров метаэлемента:
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
Эти <meta>элементы используют преимущества так называемого протокола Open Graph, и есть много других, которые вы можете использовать. Это те, которые вы, вероятно, будете использовать чаще всего. Вы можете просмотреть полный список доступных мета-параметров Open Graph на веб-сайте Open Graph .
Те, которые мы включаем сюда, улучшат внешний вид веб-страницы, когда на нее будет ссылка в публикации в социальной сети. Например, пять <meta>включенных здесь элементов будут отображаться в социальных карточках со следующими данными:
- заголовок для контента
- тип доставляемого контента
- канонический URL контента
- описание содержания
- изображение для связи с контентом
Когда вы видите публикацию, опубликованную в социальных сетях, вы часто видите, что эти биты данных автоматически добавляются в публикацию в социальной сети. Например, ниже показано, что будет отображаться в твите, если вы добавите ссылку на домашнюю страницу GitHub:
Фавиконы и сенсорные иконки
Следующий раздел в шаблоне HTML5 включает <link>элементы, которые указывают ресурсы для включения в качестве значка favicon и значка Apple Touch:
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Файл favicon.icoпредназначен для устаревших браузеров, и его не нужно включать в код. Пока ваш favicon.icoфайл включен в корень вашего проекта, браузер автоматически найдет его. Файл favicon.svgпредназначен для современных браузеров, поддерживающих значки SVG. Последний элемент ссылается на значок, который используется на устройствах Apple, когда страница добавляется на главный экран пользователя.
Сюда можно включить и другие параметры, в том числе файл манифеста веб-приложения, который ссылается на другие значки. Для полноценного обсуждения рекомендуем пост Андрея Ситника на эту тему. Но приведенных здесь будет достаточно для простого начального шаблона.
Включение таблицы стилей и скриптов
Последние две важные части нашего HTML-шаблона — это ссылка на таблицу стилей и сценарий. Оба, конечно, необязательны:
<link rel="stylesheet" href="css/styles.css?v=1.0">
Таблица стилей включается с использованием <link>элемента с соответствующим relатрибутом. Таблица стилей может быть включена в любое место документа, но обычно вы видите ее внутри файла <head>. И в отличие от старых версий HTML, нет необходимости включать typeатрибут (который никогда не был нужен).
Аналогично с элементами скрипта, вы увидите их почти в любом месте документа, но обычно они находятся внизу (прямо перед закрывающим </body>тегом), что является наилучшей практикой.
<script src="js/scripts.js"></script>
Размещение <script>элемента внизу страницы обусловлено скоростью загрузки страницы. Когда браузер встречает скрипт, он приостанавливает загрузку и рендеринг остальной части страницы, пока анализирует скрипт. Это приводит к тому, что страница загружается намного медленнее, когда большие сценарии добавляются вверху страницы перед любым содержимым. Таким образом, большинство скриптов следует размещать в самом низу страницы, чтобы они могли быть проанализированы только после того, как остальная часть страницы загрузится. Но обратите внимание, что в некоторых случаях сценарий может потребоваться разместить в заголовке вашего документа, потому что вы хотите, чтобы он вступил в силу до того, как браузер начнет отображать страницу.
Подобно ссылкам на таблицы стилей, typeатрибут скриптов не нужен (и никогда не был) нужен. Поскольку для всех практических целей JavaScript является единственным реальным языком сценариев, используемым в Интернете, и поскольку все браузеры будут предполагать, что вы используете JavaScript, даже если вы явно не объявляете об этом факте, вы можете безопасно пропустить type="text/javascript, что часто появляется в устаревшем коде.
Примечание о старых браузерах и новых элементах
Когда HTML5 был представлен, он включал в себя ряд новых элементов, таких как <article>и <section>. Вы можете подумать, что поддержка нераспознанных элементов будет серьезной проблемой для старых браузеров, но это не так! Большинству браузеров на самом деле все равно, какие теги вы используете. Если бы у вас был документ HTML с <recipe>элементом (или даже <ziggy>элементом) в нем, и ваш CSS прикрепил бы некоторые стили к этому элементу, почти каждый браузер действовал бы так, как если бы это было совершенно нормально, применяя ваши стили без возражений.
Конечно, такой гипотетический документ не пройдет проверку и может иметь проблемы с доступностью, но он будет корректно отображаться практически во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE предотвращал получение стилей для нераспознанных элементов. Эти загадочные элементы воспринимались механизмом рендеринга как «неизвестные элементы», поэтому вы не могли изменить их внешний вид или поведение. Сюда входят не только наши воображаемые элементы, но и любые элементы, которые еще не были определены во время разработки этих версий браузера, включая новые элементы HTML5.
К счастью, старые браузеры, которые не поддерживают стилизацию новых элементов, сегодня практически не существуют, поэтому вы можете безопасно использовать любой новый HTML-элемент практически в любом проекте.
При этом, если вам действительно нужна поддержка старых браузеров, вы все равно можете использовать надежный HTML5 Shiv , простой фрагмент JavaScript, изначально разработанный Джоном Резигом. Вдохновленный работой Sjoerd Visscher , он сделал новые элементы HTML5 доступными для стилей в старых версиях IE. На самом деле, это не должно быть необходимо сегодня. Как указывает caniuse.com , элементы HTML5 поддерживаются всеми используемыми браузерами.
Полный шаблон HTML5
Вот наш окончательный шаблон HTML5 — базовый шаблон, который вы можете использовать для любого проекта:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Basic HTML5 Template</title>
<meta name="description" content="A simple HTML5 Template for new projects.">
<meta name="author" content="SitePoint">
<meta property="og:title" content="A Basic HTML5 Template">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
<meta property="og:description" content="A simple HTML5 Template for new projects.">
<meta property="og:image" content="image.png">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
<!-- your content here... -->
<script src="js/scripts.js"></script>
</body>
</html>
Вы можете добавить этот простой, готовый к использованию HTML5-шаблон в любой проект уже сегодня! Основываясь на этом, вы можете добавить любое содержимое между тегами <body>и .</body>