Если вы хотите сразу перейти к готовому HTML шаблону для нового проекта, то жмите сюда.

Содержание страницы шаблона HTML5

HTML5 шаблон обычно включает в себя следующие части:

Все теги перечисленные выше в основном находятся внутри тега <head> нашего шаблона, кроме тега <html>.

HTML5 Doctype

Шаблон HTML5 должен начинаться с объявления типа документа или doctype. doctype - это способ сообщить браузеру или любому другому парсеру, какой тип документа он просматривает. В случае с HTML файлами он указывает на конкретную версию и разновидность HTML. Тип документа всегда должен быть первым элементом в начале любого HTML файла. Много лет назад объявление doctype было сложным и трудно запоминающимся, например, "XHTML Strict" или "HTML Transitional".

С появлением HTML5 все, что вам нужно, это: 

<!doctype html>

Тип документа может быть написан в верхнем, нижнем или смешанном регистре. В объявлении doctype отсутствует цифра "5". Хотя текущее объявление разметки известна как "HTML5", на самом деле это просто эволюция предыдущих стандартов HTML. "HTML6" никогда не будет, поэтому принято называть текущее состояние разметки просто "HTML".

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

Элемент <html>

Следующим за doctype в любом HTML документе является элемент <html>: 

<html lang="ru">

В приведенном фрагменте кода мы включили lang атрибут со значением ru, которое указывает, что документ написан на русском языке. Аттрибут lang не обязательный, но вы получите предупреждение от большинства валидаторов HTML страниц, если вы его не укажите.

Элемент <html> разделен на две части, <head> и <body>.

Раздел <head> содержит важную информацию о документе, которая не отображается для пользователя, например, кодировка символов, ссылки на CSS файлы, JavaScript и так далее.

Раздел <body> содержит все, что отображается в браузере - текст, изображения, и так далее.

Кодировка HTML документа

Первая строка внутри раздела <head> HTML документа - это строка, которая определяет кодировку символов для документа. Это дополнительная функция, которая не вызовет никаких предупреждений в валидаторах, но рекомендуется для большинства HTML страниц: 

<meta charset="utf-8">

utf-8 - это самая популярная кодировка используемая в HTML документах, в 99% слачаях этого будет достаточно.

Метатег viewport

Viewport - метатег области просмотра. Этот тег присутствует практически в каждом шаблоне HTML5. Он используется для адаптивного веб-дизайна, ориентированного на мобильные устройства: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Метатег содержит значение width=device-width, initial-scale=1. Это значение состоит из двух частей:

  • width=device-width: ширина области просмотра в пикселях, в которой должен отображаться сайт
  • initial-scale: это должно быть положительное число от 0.0 до 10.0. Значение "1" указывает на то, что соотношение ширины устройства и размера области просмотра составляет 1:1

В большинстве случаев метатег viewport подойдет именно с этими настройками.

Метатеги title, description и author

Далее HTML шаблон содержит следующие три строки: 

<title>HTML5. Базовый шаблон для любого проекта</title>
<meta name="description" content="Шаблон HTML5 для любого проекта">
<meta name="author" content="Кодер">

Эти элементы уже давно являются частью HTML, поэтому здесь нет ничего особенного. <title> это то, что отображается в строке заголовка браузера (например, при наведении курсора на вкладку браузера). Этот элемент является единственным обязательным элементом внутри <head>. Два других - необязательные метатеги, определяющие описание для SEO и автора. Все элементы внутри <head> являются необязательными, за исключением <title>.

Open Graph. Метатеги для социальных сетей

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

<meta property="og:title" content="HTML5. Базовый шаблон для любого проекта">
<meta property="og:type" content="website">
<meta property="og:url" content="https://кодер.укр/">
<meta property="og:description" content="Шаблон HTML5 для любого проекта">
<meta property="og:image" content="image.png">

Эти метатеги используют протокол Open Graph, в нем есть много других значений, которые можно использовать. Здесь приведены те, которые чаще всего используют. Полный список можно посмотреть на сайте ogp.me.

5 метатегов, которые описаны выше улучшат вид ссылки на страницу в карточке социальной сети:

  • title- название
  • type - тип контента
  • url- url страницы
  • description - краткое описание содержания
  • image - изображение для карточки

Favicon

Следующий раздел в шаблоне HTML5 включает <link> элементы, которые указывают на иконки ресурса: 

<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 шаблона - это ссылка на таблицу стилей и скрипт.

Ссылка на CSS файл со стилями: 

<link rel="stylesheet" href="css/styles.css">

Таблица стилей включается с помощью <link> элемента с соответствующим rel атрибутом. Таблицу стилей можно включить в любое место документа, но обычно она подключается внутри <head>. В отличие от старых версий HTML, здесь нет необходимости указывать type атрибут.

Ссылка на JS файл со скриптами: 

<script src="js/scripts.js"></script>

Подключить скрипт можно в любом месте документа, но обычно они находятся внизу (непосредственно перед закрывающим тегом </body> ).

Размещение элемента <script> внизу страницы предназначено для улучшения скорости загрузки страницы. Когда браузер встречает скрипт, он приостанавливает загрузку и рендеринг остальной части страницы, для анализа скрипта. Это приводит к тому, что страница загружается намного медленнее, если большие скрипты включаются в верхнюю часть страницы перед содержимым. Таким образом, большинство скриптов следует размещать в самом низу страницы, чтобы они обрабатывались только после загрузки основной части страницы. В некоторых случаях может потребоваться поместить скрипты в заголовок документа, для того, что бы он начал свою работу до того как браузер начнет отображать страницу.

Как и в ссылках на стили, type атрибут в скриптах не нужен. Поскольку все браузеры предполагают, что вы используете JavaScript, даже если вы явно не заявляете об этом.

Шаблон HTML5

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

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5. Базовый шаблон для любого проекта</title>
  <meta name="description" content="Шаблон HTML5 для любого проекта">
  <meta name="author" content="Кодер">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://кодер.укр/">
  <meta property="og:description" content="Шаблон HTML5 для любого проекта">
  <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">
</head>
<body>
  <!-- your content here... -->
  <script src="js/scripts.js"></script>
</body>
</html>

HTML5 шаблон готов. Вы можете добавить любой контент между тегами <body> и </body> при необходимости.