HTML5. Базовый шаблон для любого проекта
HTML шаблон для старта во всех будущих проектах. Такой шаблон мы и сделаем в этой статье.
Рассмотрим, как начать создавать собственный шаблон HTML5. Так же рассмотрим основные элементы HTML шаблона, и как результат получим HTML шаблон, который можно использовать в будущих проектах.
Если вы хотите сразу перейти к готовому HTML шаблону для нового проекта, то жмите сюда.
HTML5 шаблон обычно включает в себя следующие части:
- Тип документа (doctype)
- элемент
- Указание кодировки символов страницы
- Метатег для адаптивного дизайна
- Метатеги для социальных сетей
- Favicon
- Ссылки на таблицы стилей и скрипты
Все теги перечисленные выше в основном находятся внутри тега нашего шаблона, кроме тега .
HTML5 Doctype
Шаблон HTML5 должен начинаться с объявления типа документа или doctype . doctype — это способ сообщить браузеру или любому другому парсеру, какой тип документа он просматривает. В случае с HTML файлами он указывает на конкретную версию и разновидность HTML. Тип документа всегда должен быть первым элементом в начале любого HTML файла. Много лет назад объявление doctype было сложным и трудно запоминающимся, например, «XHTML Strict» или «HTML Transitional».
С появлением HTML5 все, что вам нужно, это:
Тип документа может быть написан в верхнем, нижнем или смешанном регистре. В объявлении doctype отсутствует цифра «5». Хотя текущее объявление разметки известна как «HTML5», на самом деле это просто эволюция предыдущих стандартов HTML. «HTML6» никогда не будет, поэтому принято называть текущее состояние разметки просто «HTML».
Поскольку браузеры должны поддерживать более старый контент в Интернете, нет необходимости полагаться на doctype , чтобы сообщить браузерам, какие функции должны поддерживаться в данном документе. Другими словами, один doctype не сделает ваши HTML страницы совместимыми со всеми современными функциями HTML. Браузер должен определять поддержку функции в каждом конкретном случае, независимо от используемого типа документа. Фактически, вы можете использовать один из старых типов документа с новыми элементами HTML5 на странице, и страница будет отображаться так же, как если бы вы использовали новый тип документа.
Элемент
Следующим за doctype в любом HTML документе является элемент :
В приведенном фрагменте кода мы включили lang атрибут со значением ru , которое указывает, что документ написан на русском языке. Аттрибут lang не обязательный, но вы получите предупреждение от большинства валидаторов HTML страниц, если вы его не укажите.
Элемент разделен на две части, и .
Раздел содержит важную информацию о документе, которая не отображается для пользователя, например, кодировка символов, ссылки на CSS файлы, JavaScript и так далее.
Раздел содержит все, что отображается в браузере — текст, изображения, и так далее.
Кодировка HTML документа
Первая строка внутри раздела HTML документа — это строка, которая определяет кодировку символов для документа. Это дополнительная функция, которая не вызовет никаких предупреждений в валидаторах, но рекомендуется для большинства HTML страниц:
utf-8 — это самая популярная кодировка используемая в HTML документах, в 99% слачаях этого будет достаточно.
Метатег viewport
Viewport — метатег области просмотра. Этот тег присутствует практически в каждом шаблоне HTML5. Он используется для адаптивного веб-дизайна, ориентированного на мобильные устройства:
Метатег содержит значение width=device-width, initial-scale=1 . Это значение состоит из двух частей:
- width=device-width : ширина области просмотра в пикселях, в которой должен отображаться сайт
- initial-scale : это должно быть положительное число от 0.0 до 10.0. Значение «1» указывает на то, что соотношение ширины устройства и размера области просмотра составляет 1:1
В большинстве случаев метатег viewport подойдет именно с этими настройками.
Метатеги title, description и author
Далее HTML шаблон содержит следующие три строки:
Эти элементы уже давно являются частью HTML, поэтому здесь нет ничего особенного. это то, что отображается в строке заголовка браузера (например, при наведении курсора на вкладку браузера). Этот элемент является единственным обязательным элементом внутри . Два других — необязательные метатеги, определяющие описание для SEO и автора. Все элементы внутри являются необязательными, за исключением .
Open Graph. Метатеги для социальных сетей
Как уже упоминалось, все метатеги являются необязательными, но многие из них имеют преимущества для SEO и маркетинга в социальных сетях. Следующий раздел в нашем шаблоне HTML5 включает некоторые из этих метатегов:
Эти метатеги используют протокол Open Graph, в нем есть много других значений, которые можно использовать. Здесь приведены те, которые чаще всего используют. Полный список можно посмотреть на сайте ogp.me.
5 метатегов, которые описаны выше улучшат вид ссылки на страницу в карточке социальной сети:
- title- название
- type — тип контента
- url- url страницы
- description — краткое описание содержания
- image — изображение для карточки
Favicon
Следующий раздел в шаблоне HTML5 включает элементы, которые указывают на иконки ресурса:
favicon.ico — файл предназначен для устаревших браузеров, и его необязательно включать в код. Пока ваш favicon.ico включен в корень вашего проекта, браузер автоматически найдет его. favicon.svg — файл для современных браузеров, которые поддерживают SVG иконки. Последний элемент ссылается на значок, который используется на устройствах Apple при добавлении страницы на главный экран.
Здесь можно задать и другие параметры иконок для разных типов устройств, но чаще всего этого будет достаточно.
Ссылки на таблицы стилей и скрипты
Еще две важные части HTML шаблона — это ссылка на таблицу стилей и скрипт.
Ссылка на CSS файл со стилями:
Таблица стилей включается с помощью элемента с соответствующим rel атрибутом. Таблицу стилей можно включить в любое место документа, но обычно она подключается внутри . В отличие от старых версий HTML, здесь нет необходимости указывать type атрибут.
Ссылка на JS файл со скриптами:
Подключить скрипт можно в любом месте документа, но обычно они находятся внизу (непосредственно перед закрывающим тегом