Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Правильный шаблон HTML5
Создавая сайты, вы, вероятно, захотите создать шаблон HTML, чтобы начинать все будущие проекты. Это определенно стоит сделать.
Рассмотрим, как начать создавать свой собственный шаблон HTML5, рассмотрим основные элементы шаблона HTML и заканчим базовым шаблоном, который вы можете взять себе и использовать его в качестве шаблона.
Тип документа HTML5
Ваш шаблон HTML5 должен начинаться с объявления типа документа или doctype. Много лет назад объявление doctype было уродливым и трудно запоминающимся беспорядком, часто указываемым как “XHTML Strict” или “HTML Transitional”.
С появлением HTML5 эти неразборчивости исчезли, и теперь все, что вам нужно, это:
<!doctype html>Элемент<html>
После doctype в любом HTML-документе находится <html> элемент:
<html lang="ru">
Он не претерпел каких-либо существенных изменений с момента появления HTML5. В нашем примере фрагменте кода включили lang атрибут со значением ru, которое указывает, что документ на русском языке. Это не требуется для проверки страницы, но вы получите предупреждение от большинства валидаторов, если вы его не включите.
<html> элемент разделен на две части, разделы <head> и <body>. <head> раздел содержит важную информацию о документе, которая не отображается конечному пользователю — например, кодировку символов, а также ссылки на файлы CSS и JavaScript. <body> раздел содержит все, что отображается в браузере — текст, изображения и так далее.
Кодировка символов HTML-документа
Первая строка внутри <head> раздела - это та, которая определяет кодировку символов для документа. Это необязательная функция и не вызовет никаких предупреждений в валидаторах, но рекомендуется для большинства HTML-страниц:
<meta charset="utf-8">
Почти во всех случаях utf-8 это значение, которое вы будете использовать в своих документах.
Чтобы убедиться, что некоторые старые браузеры правильно читают кодировку символов, объявление кодировки символов должно быть включено где-то в пределах первых 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 между шириной устройства и размером окна просмотра.
Следующий раздел шаблона 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> сколько захотите.
Как уже упоминалось, все мета-элементы являются необязательными, но многие из них имеют преимущества для 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.
Фавиконы и сенсорные значки
Следующий раздел шаблона 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 — базовый шаблон, который вы можете использовать для любого проекта:
<!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>.
Удачных вам проектов!
