В этой статье мы рассмотрим, как начать создавать свой собственный шаблон HTML5. Мы рассмотрим основные элементы базового шаблона HTML, заканчивая базовым шаблоном, который вы можете взять с собой и развивать на его основе.
Что такое HTML шаблон?
Каждый веб-сайт индивидуален, но есть много вещей, которые, по сути, одинаковы от одного веб-сайта к другому. Вместо того, чтобы писать один и тот же код снова и снова, хорошей идеей будет создать свой собственный “шаблон”. Шаблон – это шаблон, который вы открываете при каждом запуске проекта, что избавляет вас от необходимости начинать с нуля.
В Википедии шаблоны описываются как:
разделы кода, которые повторяются в нескольких местах практически без изменений.
По мере изучения HTML5 и добавления новых методов в свой инструментарий, вы, вероятно, захотите самостоятельно создать шаблон HTML для начала всех будущих проектов. Это определенно стоит сделать, и в Интернете есть много отправных точек, которые помогут вам создать свой собственный шаблон HTML5.
Простой пример HTML 5 шаблона для старта
В полном шаблоне, который мы предлагаем в конце этой статьи, содержится многое. Но вам не обязательно так фантазировать, особенно если вы только начинаете. Вот действительно простой HTML5 шаблон для “начала работы”, который может оказаться всем, что вам нужно:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 шаблон</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Заголовок страницы</h1>
<script src="scripts.js"></script>
</body>
</html>Если вы вставите приведенный выше код в .html файл, у вас получится веб-страница! Этот базовый шаблон HTML5 включает в себя некоторые элементы, перечисленные в следующем разделе, а также простой элемент заголовка, который будет отображаться в вашем веб-браузере.
Давайте рассмотрим эту анатомию более подробно.
Структура HTML5 шаблона
- Объявление типа документа (или doctype)
<html>Элемент- Кодировка символов
- Мета-элемент viewport
<title>,descriptionиauthor- Мета-элементы Open Graph для социальных карточек
- Иконки Favicons и Touch Icons
- Ссылки на стили CSS
- Ссылки на файлы JavaScript
Кроме объявления типа документа и <html> элемента, перечисленные выше элементы в основном будут найдены внутри <head> раздела HTML-шаблона.
Тип документа HTML5
Ваш шаблон HTML5 должен начинаться с объявления типа документа, или doctype. Doctype – это просто способ сообщить браузеру — или любому другому анализатору — какой тип документа он просматривает. В случае HTML-файлов это означает конкретную версию и вид HTML. Doctype всегда должен быть первым элементом в верхней части любого HTML-файла. Много лет назад объявление doctype представляло собой уродливую и трудно запоминаемую путаницу, часто указываемую как “XHTML Strict” или “HTML Transitional”.
С появлением HTML5 эти не поддающиеся расшифровке бельма на глазу исчезли, и теперь все, что вам нужно, это:
<!doctype html>Просто и по существу. Doctype может быть написан в верхнем, нижнем или смешанном регистре. Вы заметите, что в объявлении явно отсутствует “5”. Хотя текущая итерация веб-разметки известна как “HTML5”, на самом деле это всего лишь эволюция предыдущих стандартов HTML, а будущие спецификации будут просто развитием того, что мы имеем сегодня. “HTML6” никогда не будет, поэтому текущее состояние веб-разметки принято называть просто “HTML”.
Поскольку браузеры должны поддерживать устаревший контент в Интернете, нет необходимости полагаться на doctype, чтобы указывать браузерам, какие функции должны поддерживаться в данном документе. Другими словами, один только doctype не сделает ваши страницы совместимыми с современными функциями HTML. На самом деле браузеру решать, как поддерживать функции в каждом конкретном случае, независимо от используемого doctype. Фактически, вы можете использовать один из старых типов документов с новыми элементами HTML5 на странице, и страница будет отображаться так же, как если бы вы использовали новый тип документа.
<html> Элемент
<html> Элемент является элементом верхнего уровня в HTML-файле, что означает, что он содержит все, что есть в документе, кроме doctype. <html> Элемент разделен на две части — <head> и <body> разделы. Все остальное в файле веб-страницы будет размещено либо в <head> элементе, либо внутри <body> элемента.
Приведенный ниже код показывает <html> элемент, который следует за объявлением doctype и включает в себя элементы <head> и <body>:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body></body>
</html>Как использовать <head> теги в HTML
<head> Раздел содержит важную информацию о документе, которая не отображается конечному пользователю, такую как кодировка символов и ссылки на CSS—файлы и, возможно, также на JavaScript-файлы. Эта информация используется такими машинами, как браузеры, поисковые системы и программы чтения с экрана:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 шаблон</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script> <!-- Опционально. Обычно это
лучше разместить это перед
закрывающим тегом </body> -->
</head>Все элементы, содержащиеся между этими <head> … </head> тегами выше, важны, но не видны конечным пользователям — за исключением, возможно, <title> текста, который будет отображаться при онлайн-поиске и на вкладках браузера.
Как использовать <body> теги в HTML
<body> Раздел содержит все, что отображается в браузере, например текст, изображения и так далее. Если вы хотите представить что-то конечному пользователю, убедитесь, что это помещено между открывающим и закрывающим <body> … </body> тегами:
<body>
<h1>This is My Dog</h1>
<p>
<img src="dog.jpg" alt="Золотистый ретривер, лежит в траве">
</p>
<p>Here's my gorgeous boy, lying in the grass after our walk today.</p>
</body>
Что такое lang атрибут?
<html> Элемент в идеале включает в себя lang атрибут, как показано в приведенном выше коде (<html lang="en">). Его основная цель – рассказать вспомогательным технологиям, таким как программы чтения с экрана, как произносить слова при чтении вслух. (Этот атрибут не требуется для проверки страницы, но вы получите предупреждение от большинства проверяющих, если вы его не включите.)
lang Атрибут, показанный выше, имеет значение en, которое указывает, что документ написан на английском языке. Существуют значения для всех других разговорных языков, таких как fr для французского, de для немецкого, hi для хинди и так далее. (Вы можете найти полный список языковых кодов в Википедии.)
Кодировка символов HTML-документа
Первая строка внутри <head> раздела HTML-документа – это та, которая определяет кодировку символов для документа. Буквы и символы, которые мы читаем на веб-странице, определяются для компьютеров как серия чисел, а некоторые символы (например, буквы) кодируются несколькими способами. Поэтому полезно указать вашему компьютеру, на какую кодировку должна ссылаться ваша веб-страница.
Указание кодировки символов является необязательной функцией и не вызовет никаких предупреждений в валидаторах, но рекомендуется для большинства HTML-страниц:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- character encoding -->
⋮
</head>
<body></body>
</html>Примечание: чтобы гарантировать, что некоторые старые браузеры правильно читают кодировку символов, полное объявление кодировки символов должно быть включено где-то в пределах первых 512 символов вашего документа. Он также должен отображаться перед любыми элементами, основанными на контенте (как <title> элемент, который появляется позже в нашем примере).
Зачем использовать кодировку символов UTF-8 в шаблонах HTML5?
В приведенном выше примере кодировки символов используется набор символов UTF-8. Почти во всех случаях utf-8 – это значение, которое вы должны указывать в своих документах. Эта кодировка охватывает широкий спектр символов, не включенных в другие кодировки. Вы, вероятно, сталкивались со странными символами в Интернете, такими как �, которые, очевидно, были ошибкой. Это часто происходит из-за того, что браузер не может найти нужный символ в наборе символов, указанном в документе.
UTF-8 охватывает широкий спектр символов, включая множество символов языков по всему миру, а также множество полезных символов. Как объяснил Консорциум World Wide Web:
Кодировка на основе Unicode, такая как UTF-8, может поддерживать множество языков и вмещать страницы и формы на любой смеси этих языков. Его использование также устраняет необходимость в серверной логике индивидуального определения кодировки символов для каждой обслуживаемой страницы или каждой отправки входящей формы. Это значительно снижает сложность работы с многоязычным сайтом или приложением.
Полное объяснение кодировки символов выходит за рамки этой статьи, но если вы хотите углубиться немного глубже, вы можете прочитать о кодировке символов в спецификации HTML.
Что означает X-UA-Compatible?
Иногда можно увидеть эту строку в заголовке HTML-документа:
<head>
⋮
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>Этот meta тег позволяет веб-авторам выбирать, в какой версии Internet Explorer должна отображаться страница. Теперь, когда Internet Explorer по большей части просто занимает плохую память, вы можете смело исключить эту строку из своего кода. (Мы исключили его из нашего шаблона HTML5.) Если вы точно знаете, что ваша веб-страница может просматриваться в старых версиях IE, возможно, стоит включить его. Вы можете прочитать больше об этом мета-теге на сайте Microsoft.
Мета-элемент Viewport
Мета-элемент viewport – это функция, которую вы увидите практически в каждом шаблоне HTML5. Это важно для адаптивного веб-дизайна и дизайна, ориентированного на мобильные устройства:
<head>
⋮
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>Этот <meta> элемент включает в себя два атрибута, которые работают вместе как набор имя / значение. В этом случае name задается значение viewport, а значение равно width=device-width, initial-scale=1. Он используется только мобильными устройствами. Вы заметите, что значение состоит из двух частей, описанных здесь:
width=device-width: ширина в пикселях окна просмотра, в котором вы хотите отображать веб-сайт.initial-scale: это должно быть положительное число в диапазоне от 0.0 до 10.0. Значение “1” указывает на соотношение ширины устройства и размера окна просмотра 1: 1.
Вы можете немного подробнее ознакомиться с функциями этих мета-элементов в MDN, но пока просто знайте, что в большинстве случаев этот мета-элемент с такими настройками лучше всего подходит для адаптивных веб-сайтов, ориентированных на мобильные устройства.
<title>, description и author
Следующий раздел базового шаблона HTML содержит следующие три строки:
<head>
⋮
<title>Базовый HTML5 шаблон</title>
<meta name="description" content="Простой HTML5 шаблон для проектов.">
<meta name="author" content="planet2web">
</head><title> – это то, что отображается в строке заголовка браузера (например, при наведении курсора мыши на вкладку браузера), а также отображается в результатах поиска. Этот элемент является единственным обязательным элементом внутри <head> раздела. Мета-элементы description и author необязательны, но они предоставляют важную информацию для поисковых систем.
Вы можете поместить внутрь столько допустимых мета-элементов, <head> сколько захотите.
Мета-элементы Open Graph для социальных карточек
Как было сказано выше, все мета-элементы необязательны, но многие из них имеют преимущества для SEO и маркетинга в социальных сетях. Следующий раздел нашего шаблона HTML5 включает некоторые из этих параметров мета-элементов:
<head>
⋮
<meta property="og:title" content="Базовый HTML5 шаблон">
<meta property="og:type" content="website">
<meta property="og:url" content="https://planet2web.ru/a-basic-html5-template/">
<meta property="og:description" content="Простой HTML5 шаблон для проектов.">
<meta property="og:image" content="image.png">
</head>Эти <meta> элементы используют преимущества так называемого Open Graph protocol, и есть много других, которые вы можете использовать. Это те, которые вы, вероятно, будете использовать чаще всего. Вы можете просмотреть полный список доступных мета-опций Open Graph на веб-сайте Open Graph.
Те, которые мы включаем сюда, улучшат внешний вид веб-страницы, когда на нее будет дана ссылка в публикации в социальных сетях. Например, пять <meta> элементов, включенных здесь, появятся в социальных карточках, содержащих следующие данные:
- заголовок для содержимого
- тип предоставляемого контента
- канонический URL для содержимого
- описание содержимого
- изображение, которое нужно связать с содержимым
Когда вы просматриваете публикацию в социальных сетях, вы часто увидите, что эти фрагменты данных автоматически добавляются к публикации в социальных сетях. Например, ниже показано, что появилось бы в твите, если бы вы включили ссылку на домашнюю страницу GitHub.
Иконки Favicons и Touch Icons
Следующий раздел шаблона HTML5 включает <link> элементы, указывающие ресурсы для включения в виде значка favicon и Apple touch:
<head>
⋮
<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">
</head>Значок появится на вкладке браузера, когда кто-то просматривает ваш сайт. favicon.icoФайл предназначен для устаревших браузеров и его необязательно включать в код. Пока ваш favicon.ico файл включен в корневой каталог вашего проекта, браузер автоматически найдет его. favicon.svgФайл предназначен для современных браузеров, поддерживающих иконки SVG. Вы также можете использовать вместо него .png файл.
Последний элемент ссылается на значок, который используется на устройствах Apple при добавлении страницы на главный экран пользователя.
Здесь вы можете включить другие параметры, включая файл манифеста веб-приложения, в котором содержатся ссылки на другие значки. Для более подробного обсуждения мы рекомендуем пост Андрея Ситника на эту тему. Но тех, что включены здесь, будет достаточно для простого начального шаблона HTML.
Включение файлов CSS-стилей и JavaScript
Последние две важные части нашего шаблона начального HTML – это ссылки на одну или несколько таблиц стилей и, возможно, также файлы JavaScript. Разумеется, оба варианта необязательны, хотя редко можно встретить сайт без хотя бы некоторого CSS-стиля.
Включение таблицы стилей CSS в HTML-шаблон
Таблицу стилей можно включить в любое место документа, но обычно вы увидите ее внутри <head> раздела:
<head>
⋮
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head><link> Элемент указывает веб-браузеру на внешнюю таблицу стилей, чтобы он мог применить эти стили CSS к странице. <link> Элементу необходим rel атрибут stylesheet. В прошлом type атрибут также обычно включался, но на самом деле он никогда не был нужен, поэтому просто оставьте его, если вы найдете в Интернете более старый код, который его включает.
Обратите внимание, что мы добавили ?v=1.0 строку запроса в конец ссылки CSS. Это совершенно необязательно. Это удобный прием, когда вы обновили свою таблицу стилей, чтобы также обновить эту строку запроса (скажем, на 1.1 или 2.0), потому что это гарантирует, что браузеры удалят любую старую, кэшированную копию файла CSS и загрузят свежую, новую версию.
Стоит отметить, что вам не обязательно использовать <link> элемент для включения CSS на веб-страницу, поскольку вместо этого вы можете разместить все свои стили на самой странице в <style> … </style> тегах в <head> разделе. Это удобно при экспериментировании с макетами, но в целом неэффективно делать это на живом сайте, поскольку эти стили не будут доступны на других страницах, что приведет к неэффективному и / или повторяющемуся коду.
Включение файла JavaScript в HTML-шаблон
Код JavaScript обычно добавляется на HTML-страницу с помощью <script> элемента. src Атрибут этого элемента предоставляет ссылку на файл JavaScript. Вы можете ссылаться на файлы JavaScript из любого места вашего HTML-шаблона. Вы часто увидите их в <head> разделе, но, как правило, считается лучшей практикой размещать их внизу документа, непосредственно перед закрывающим </body> тегом:
<head>
⋮
<script src="js/script1.js"></script>
</head>
<body>
⋮
<script src="js/script2.js"></script> <!-- Generally the best location -->
</body>Размещение <script> элемента в нижней части страницы частично направлено на увеличение скорости загрузки страницы. Когда браузер обнаруживает скрипт, он приостанавливает загрузку и рендеринг остальной части страницы, пока анализирует скрипт. Это приводит к тому, что страница загружается намного медленнее, когда большие скрипты включаются в верхнюю часть страницы перед любым содержимым. Таким образом, большинство скриптов следует размещать в самом низу страницы, чтобы они были проанализированы только после загрузки остальной части страницы.
Еще одним преимуществом размещения скриптов в нижней части страницы является то, что все элементы, с которыми скрипту необходимо действовать, загружаются первыми. Тем не менее, в некоторых случаях скрипт может понадобиться поместить в начало вашего документа, потому что вы хотите, чтобы он вступил в силу до того, как браузер начнет отображать страницу.
Аналогично ссылкам на таблицы стилей, type атрибут в скриптах не нужен (и никогда не был). Поскольку JavaScript для всех практических целей является единственным реальным языком сценариев, используемым в Интернете, и поскольку все браузеры будут предполагать, что вы используете JavaScript, даже если вы явно не заявляете об этом факте, вы можете смело отказаться от type="text/javascript, что часто встречается в устаревшем коде.
Как и в случае с CSS, вы можете фактически встроить JavaScript в сам шаблон, а не ссылаться на внешний файл JavaScript. Опять же, как правило, это неэффективно, поэтому не делайте этого, если вы не тестируете какой-либо код или если вы уверены, что скрипт не понадобится ни на каких других страницах. Вы можете встроить свой скрипт, поместив его в простые <script> … </script> теги:
<head>
⋮
<script>
console.log("Woo!")
</script>
</head>
<body>
⋮
<script>
console.log("Hoo!")
</script>
</body>Примечание о старых браузерах и новых элементах
Когда был представлен HTML5, он включал в себя ряд новых элементов, таких как <article> и <section>. Вы могли бы подумать, что поддержка нераспознанных элементов была бы серьезной проблемой для старых браузеров — но это не так! Большинству браузеров на самом деле все равно, какие теги вы используете. Если бы у вас был HTML-документ с <recipe> элементом (или даже <ziggy> элементацией) в нем, и ваш CSS прикрепил к этому элементу некоторые стили, почти каждый браузер действовал бы так, как если бы это было совершенно нормально, применяя ваш стиль без жалоб.
Конечно, такой гипотетический документ не прошел бы проверку и может иметь проблемы с доступом, но он будет корректно отображаться почти во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE не позволял оформлять нераспознанные элементы. Механизм рендеринга рассматривал эти таинственные элементы как “неизвестные элементы”, поэтому вы не могли изменить их внешний вид или поведение. Сюда входят не только наши воображаемые элементы, но и любые элементы, которые еще не были определены на момент разработки этих версий браузера, включая новые элементы HTML5.
К счастью, старых браузеров, которые не поддерживают оформление новых элементов, сегодня практически не существует, поэтому вы можете без проблем использовать любой новый HTML-элемент практически в любом проекте.
При этом, если вам действительно нужна поддержка старых браузеров, вы все равно можете использовать надежный HTML5 Shiv, простую часть JavaScript, первоначально разработанную Джоном Ресигом. Вдохновленный работой Серда Вишера, он сделал новые элементы 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>Базовый HTML5 шаблон</title>
<meta name="description" content="Простой HTML5 шаблон для проектов.">
<meta name="author" content="Planet2web">
<meta property="og:title" content="Базовый HTML5 шаблон">
<meta property="og:type" content="website">
<meta property="og:url" content="https://planet2web.ru/a-basic-html5-template/">
<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?v=1.0">
</head>
<body>
<!-- your content here... -->
<script src="js/scripts.js"></script>
</body>
</html>Вы можете добавить этот простой, готовый к использованию код шаблона HTML5 в любой проект уже сегодня! Основываясь на этом, вы можете добавить любой контент, который вы хотите, между тегами <body> и </body>.
Заключение
В Интернете доступно множество шаблонов и фреймворков для начального HTML, которые поставляются с готовыми файлами CSS и JavaScript и множеством предварительно написанного контента, с которым вы можете поиграть и модифицировать. Это не было нашей целью здесь. Представленный здесь базовый шаблон включает в себя все, что вам может понадобиться при разработке любой веб-страницы, так что вам не придется каждый раз начинать полностью с нуля.
Не стесняйтесь скопируйте простой html-шаблон страницы мы показали в начале, или выполните одну показано выше, и используйте их в ваших проектах. Со временем вы, вероятно, обнаружите, что есть биты, которые вам не часто нужны, и другие вещи, о которых мы здесь не упоминали, которые вы часто используете, поэтому вы можете обновить свой шаблон, чтобы адаптироваться к вашему рабочему процессу.