Разработка сайтов в Кременной, ЛНР. Шаблон HTML5: базовый шаблон для любого проекта

По мере изучения HTML5 и добавления новых методов в свой набор инструментов вы, вероятно, захотите создать шаблон HTML для начала всех будущих проектов. Это определенно стоит сделать, и в Интернете есть много отправных точек, которые помогут вам создать собственный шаблон HTML5.

В этой статье мы рассмотрим, как приступить к созданию собственного шаблона HTML5. Мы рассмотрим основные элементы HTML-шаблона, закончив базовым шаблоном, который вы можете взять с собой и использовать в дальнейшем.

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

Анатомия шаблона HTML5

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

Объявление типа документа (или doctype)

Элемент

_

Кодировка символов

Мета-элемент области просмотра

 

Метаэлементы Open Graph для социальных карт

Фавиконы и сенсорные иконки

Ссылки на таблицы стилей и скрипты

Помимо объявления типа документа и

элемента, перечисленные выше элементы в основном находятся внутрираздела шаблона HTML.

Тип документа HTML5

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

С появлением HTML5 эти неразборчивые бельмо на глазу исчезли, и теперь все, что вам нужно, это:

<! doctype html>

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

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

Элемент

_

За типом документа в любом HTML-документе следует

элемент:

 

Это не претерпело каких-либо существенных изменений с момента появления HTML5. В приведенном выше фрагменте кода мы включили langатрибут со значением en, который указывает, что документ на английском языке. Это не требуется для проверки страницы, но вы получите предупреждение от большинства валидаторов, если не включите его.

Элемент

разделен на две части, разделыи.

Этот

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

содержит все, что отображается в браузере — текст, изображения и так далее.

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

Первая строка внутри

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

 

Почти во всех случаях utf-8это значение, которое вы будете использовать в своих документах. Полное объяснение кодировки символов выходит за рамки этой статьи, и, вероятно, вам это тоже не будет интересно. Тем не менее, если вы хотите копнуть немного глубже, вы можете прочитать о кодировке символов в спецификации HTML.

Примечание: чтобы убедиться, что некоторые старые браузеры правильно считывают кодировку символов, все объявление кодировки символов должно быть включено где-то в пределах первых 512 символов вашего документа. Он также должен стоять перед любыми элементами, основанными на содержимом (например,

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

Мета-элемент области просмотра

Мета-элемент viewport — это функция, которую вы увидите практически в каждом шаблоне HTML5. Для адаптивного веб-дизайна и мобильного дизайна важно:

 

Этот

элемент включает в себя два атрибута, которые работают вместе как набор имя/значение. В этом случае nameустановлено значение, viwportа значение равно width=device-width, initial-scale=1. Используется только мобильными устройствами. Вы заметите, что значение состоит из двух частей, описанных здесь:

width=device-width: ширина области просмотра в пикселях, на которой должен отображаться веб-сайт.

initial-scale: это должно быть положительное число от 0,0 до 10,0. Значение «1» указывает на соотношение 1:1 между шириной устройства и размером области просмотра.

Вы можете прочитать немного больше об этих функциях метаэлементов на MDN, но сейчас просто знайте, что в большинстве случаев этот метаэлемент с этими настройками лучше всего подходит для мобильных и адаптивных веб-сайтов.

 

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

 

Эти элементы уже давно являются частью HTML, так что здесь нет ничего нового. Это

.

Два других являются необязательными элементами, определяющими описание для целей SEO вместе с автором. Все элементы внутри

являются необязательными, за исключением

Мета-элементы Open Graph для социальных карт

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

Эти элементы используют преимущества так называемого протокола Open Graph, и есть много других, которые вы можете использовать. Это те, которые вы, вероятно, будете использовать чаще всего. Вы можете просмотреть полный список доступных мета-параметров Open Graph на веб-сайте Open Graph.

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

заголовок для контента

тип доставляемого контента

канонический URL контента

описание содержания

изображение для связи с контентом

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

Карта GitHub

Источник изображения: GitHub

Фавиконы и сенсорные иконки

Следующий раздел в шаблоне HTML5 включает

элементы, которые указывают ресурсы для включения в качестве значка favicon и значка Apple Touch:

Файл favicon.icoпредназначен для устаревших браузеров, и его не нужно включать в код. Пока ваш favicon.icoфайл включен в корень вашего проекта, браузер автоматически найдет его. Файл favicon.svgпредназначен для современных браузеров, поддерживающих значки SVG. Последний элемент ссылается на значок, который используется на устройствах Apple, когда страница добавляется на главный экран пользователя.

Сюда можно включить и другие параметры, в том числе файл манифеста веб-приложения, который ссылается на другие значки. Для полноценного обсуждения рекомендуем пост Андрея Ситника на эту тему. Но приведенных здесь будет достаточно для простого начального шаблона.

Включение таблицы стилей и скриптов

Последние две важные части нашего HTML-шаблона — это ссылка на таблицу стилей и скрипт. Оба, конечно, необязательны:

 

Таблица стилей включается с использованием

элемента с соответствующим relатрибутом. Таблица стилей может быть включена в любое место документа, но обычно вы видите ее внутри файла. И, в отличие от старых версий HTML, нет необходимости включать typeатрибут (который никогда не был нужен).

Аналогично с элементами скрипта, вы увидите их почти в любом месте документа, но обычно они находятся внизу (прямо перед закрывающим тегом), что является наилучшей практикой.

Размещение

 

 

Вы можете добавить этот простой, готовый к использованию HTML5-шаблон в любой проект уже сегодня! Основываясь на этом, вы можете добавить любое содержимое между тегами

и.

Следующие шаги

Отличный способ вывести веб-макеты на новый уровень — это «Принципы красивого веб-дизайна», 4-е издание. Эта книга научит вас принципам дизайна и покажет, как реализовать их в Интернете. Он был полностью переписан в сентябре 2020 года и включает в себя передовые методы, о которых вы больше нигде не читали.

Чтобы отточить свои знания CSS, наша учебная программа современных проектов CSS поможет вам освоить последние расширенные версии CSS3.

Помимо этого, вы можете вывести свой веб-сайт или разработку веб-приложений на новый уровень с интерактивностью и программируемыми реактивными пользовательскими интерфейсами. Ознакомьтесь, например, с обширными ресурсами SitePoint по JavaScript и React. И узнайте, как быстрее начинать новые проекты, из нашего руководства по лучшим веб-инструментам и библиотекам для создания строительных лесов. В качестве альтернативы, если вы хотите создавать веб-приложения без обучения кодированию, прочитайте наш учебник по движению без кода. Новейшие инструменты без кода изменили правила игры. Впервые они достаточно мощны, чтобы обеспечить серьезную альтернативу кодированию во многих ситуациях.