HTML-документы включают объявление типа документа и корневой элемент <html> . В элемент <html> вложены заголовок документа и тело документа. Хотя заголовок документа не виден за пределами кода, он жизненно важен для функционирования сайта. Он содержит всю метаинформацию, включая информацию для поисковых систем и результатов поиска в социальных сетях, значки для вкладок браузера и ярлыков на главном экране мобильного устройства, а также поведение и представление вашего контента. В этом разделе вы узнаете о компонентах, которые, хотя и не видны, присутствуют почти на каждой веб-странице.
Для создания сайта MachineLearningWorkshop.com (MLW) начните с включения компонентов, которые следует считать необходимыми для каждой веб-страницы: тип документа, язык контента, кодировка символов и, конечно же, заголовок или название сайта или приложения.
Добавить в каждый HTML-документ
Для каждой веб-страницы необходимы несколько важных элементов. Браузеры отображают контент, даже если эти элементы отсутствуют, но вы должны их включить.
<!DOCTYPE html>
Первое, что нужно в любом HTML-документе, — это преамбула. Для HTML достаточно <!DOCTYPE html> . Это выглядит как HTML-элемент, но на самом деле это специальный узел, называемый ` doctype` . `doctype` указывает браузеру использовать стандартный режим. Если он отсутствует, браузеры используют другой режим рендеринга, известный как режим совместимости (quirks mode ). Включение `doctype` помогает предотвратить использование режима совместимости.
<html>
Элемент <html> является корневым элементом HTML-документа. Он является родительским элементом для <head> и <body> и содержит всё содержимое HTML-документа, кроме doctype. Если он опущен, язык подразумевается, но его следует указать, чтобы объявить язык документа.
Язык контента
Атрибут lang в теге <html> определяет основной язык документа. Значение представляет собой код языка ISO, за которым следует необязательный регион. Например, французский язык в Канаде — fr-CA , а в Буркина-Фасо — fr-BF . Это объявление помогает программам чтения с экрана, поисковым системам и службам перевода определять язык документа.
Атрибут lang можно использовать в других тегах для обозначения исключений из основного языка документа. Как и в заголовке, атрибут lang в теле документа не имеет визуального эффекта. Он добавляет семантику, позволяя вспомогательным технологиям и автоматизированным сервисам определять язык конкретного контента.
Помимо установки языка документа и исключений для этого базового языка, атрибут можно использовать в селекторах CSS. <span lang="fr-fr">Ceci n'est pas une pipe.</span> можно использовать с атрибутом и селекторами языка [lang|="fr"] и :lang(fr) .
<head>
Между открывающим и закрывающим тегами <html> находятся два дочерних элемента: <head> и <body> .
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
Элемент <head> содержит метаданные для сайта или приложения, а элемент <body> — видимый контент. Остальная часть этого раздела посвящена компонентам, вложенным внутрь элемента <head> .
Необходимые компоненты внутри <head>
Метаданные документа, включая заголовок документа, кодировку, настройки области просмотра, описание, базовый URL-адрес, ссылки на таблицы стилей и значки, находятся в элементе <head> . Хотя вам могут не понадобиться все эти функции, всегда указывайте кодировку, заголовок и настройки области просмотра.
Кодировка символов
Первым элементом в <head> должно быть объявление кодировки charset . Оно располагается перед заголовком, чтобы гарантировать, что браузер сможет отобразить символы этого заголовка и все символы в остальной части документа.
В большинстве браузеров по умолчанию используется кодировка windows-1252 , в зависимости от локали. Однако следует использовать UTF-8 , которая позволяет кодировать все символы с шагом в один-четыре байта.
Чтобы установить кодировку символов на UTF-8, укажите следующее:
<meta charset="utf-8" />
Объявив кодировку UTF-8 (без учета регистра), вы даже можете включить эмодзи в заголовок.
Кодировка символов наследуется во всём содержимом документа, даже <style> и <script> . Это небольшое объявление позволяет включать эмодзи в имена классов и в selectorAPI . Если вы используете эмодзи, убедитесь, что делаете это таким образом, чтобы повысить удобство использования, не ухудшая доступность.
Название документа
Каждая страница, включая главную и все дополнительные, должна иметь уникальный заголовок. Содержимое заголовка документа, текст между открывающим и закрывающим тегами <title> , отображается во вкладке браузера, в списке открытых окон, в истории, в результатах поиска и, если не переопределено с помощью тегов <meta> , в карточках социальных сетей.
<title>Machine Learning Workshop</title>
Метаданные области просмотра
Метатег viewport необходим для адаптивности сайта, обеспечивая корректное отображение контента независимо от ширины области просмотра. Хотя метатег viewport существует с 2007 года, он был описан в спецификации лишь недавно. Он контролирует размер и масштаб области просмотра, предотвращая уменьшение контента для соответствия экранам меньшего размера.
<meta name="viewport" content="width=device-width" />
Приведенный выше код означает «сделать сайт адаптивным, начиная с установки ширины контента равной ширине экрана». Помимо width , вы можете задать масштабирование и масштабируемость, но по умолчанию они принимают значения, соответствующие доступности. Если вы хотите указать это явно, добавьте:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
Viewport является частью аудита доступности Lighthouse . Ваш сайт пройдет проверку, если он масштабируем и не имеет установленного максимального размера.
На данный момент структура нашего HTML-файла выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Другое содержимое <head>
В раздел <head> входит гораздо больше информации. Фактически, все метаданные. Хотя большинство элементов, которые вы найдете в разделе <head> , рассматриваются в этом модуле, мы расскажем подробнее в модуле «Метаданные» .
Вы уже видели метатеги и заголовок документа, но помимо метатегов <meta> существует гораздо больше метаданных, которые следует включить.
CSS
В разделе <head> вы добавляете стили для своего HTML-кода. Существует отдельный учебный курс по CSS, если вы хотите изучить стили, но вам необходимо знать, как добавлять их в свои HTML-документы.
Существует три способа включения CSS: <link> , <style> и атрибут style .
Основные два способа добавления стилей в HTML-файл — это подключение внешнего ресурса с помощью элемента <link> с атрибутом rel , установленным на stylesheet , или подключение CSS непосредственно в заголовок документа внутри открывающего и закрывающего тегов <style> .
Тег <link> — это предпочтительный способ включения таблиц стилей. Связывание одной или нескольких внешних таблиц стилей полезно как для удобства разработчиков, так и для производительности сайта: вы можете поддерживать CSS в одном месте, а не разбрасывать его повсюду, и браузеры могут кэшировать внешний файл, а это значит, что его не нужно будет загружать заново при каждой навигации по странице.
Синтаксис выглядит так: <link rel="stylesheet" href="styles.css"> , где styles.css — это имя файла и его относительное расположение. Вы можете увидеть атрибут type="text/css" , но он не обязателен. Атрибут rel определяет связь, в данном случае — stylesheet . Если вы опустите атрибут rel , ваш CSS-код не будет связан.
Вскоре вы познакомитесь с несколькими другими значениями rel , но сначала изучите другие способы включения CSS.
Если вы хотите, чтобы внешние стили из таблицы стилей находились внутри каскадного слоя, но у вас нет доступа к редактированию файла CSS, вам нужно будет включить CSS с помощью @import внутри ` <style> :
<style>
@import "styles.css" layer(firstLayer);
</style>
При использовании @import для импорта таблиц стилей в документ, при необходимости в каскадные слои, операторы @import должны быть первыми в вашем <style> или связанной таблице стилей, вне объявления кодировки символов.
Хотя каскадные слои — относительно новая технология, и вы можете не заметить директиву @import в блоке <style> заголовка, вы часто будете видеть пользовательские свойства, объявленные в блоке стилей заголовка:
<style>
:root {
--theme-color: #226DAA;
}
</style>
Стили, добавленные с помощью <link> , <style> или обоих, следует размещать в `<head>`. Хотя они работают и при включении в тело документа, для повышения производительности их следует добавлять в `<head>`. Это может показаться нелогичным, поскольку вы можете подумать, что контент должен загрузиться первым. Но для браузера лучше знать, как отображать контент после его загрузки. Добавление стилей в первую очередь предотвращает ненужную перерисовку, которая происходит, если стиль применяется к элементу после его первого отображения.
Существует один способ добавить стили, которые вы никогда не будете использовать, в <head> вашего документа: встроенные стили. Вероятно, вы никогда не будете использовать встроенные стили в заголовке, потому что таблицы стилей пользовательских агентов по умолчанию скрывают заголовок. Но если вы хотите создать редактор CSS без JavaScript, например, чтобы тестировать пользовательские элементы вашей страницы, вы можете сделать заголовок видимым с помощью display: block , а затем скрыть все в заголовке, а затем с помощью атрибута встроенного style сделать видимым блок стилей, редактируемый содержимым.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Вы можете добавить встроенные стили к элементу <style> .
Другие варианты использования элемента <link>
Элемент link используется для создания связей между HTML-документом и внешними ресурсами. Некоторые из этих ресурсов могут быть загружены, другие носят информационный характер. Тип связи определяется значением атрибута rel . Доступно 25 значений атрибута rel , которые можно использовать с <link> , <a> и <area> или <form> , а также несколько значений, которые можно использовать со всеми. Предпочтительно включать элементы, связанные с метаинформацией, в раздел `<head>`, а элементы, связанные с производительностью, — в раздел <body> .
Теперь вы добавите в заголовок еще три типа: icon , alternate и canonical . Четвертый тип, rel="manifest" , вы добавите в следующем модуле .
Фавикон
Используйте тег <link> с атрибутом rel="icon" чтобы указать значок сайта (favicon) для вашего документа. Значок сайта — это небольшой значок, который отображается на вкладке браузера, обычно слева от заголовка документа. При уменьшении размера вкладок заголовок может исчезнуть, но значок останется видимым. Большинство значков сайта — это логотипы компаний или приложений.
Если вы не укажете значок сайта (favicon), браузер будет искать файл с именем favicon.ico в корневом каталоге (папке сайта). С помощью <link> ` вы можете использовать другое имя файла и его расположение:
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Приведенный выше код гласит: «Используйте mlwicon.png в качестве значка для сценариев, где имеет смысл значение 16px, 32px или 48px». Атрибут sizes принимает значение any для масштабируемых значков или список квадратных значений widthXheight разделенных пробелами; если значения width и height равны 16, 32, 48 или больше в этой геометрической последовательности, единица измерения в пикселях опускается, а значение X нечувствительно к регистру.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Для браузера Safari существуют два специальных нестандартных типа значков: apple-touch-icon для устройств iOS и mask-icon для закрепленных вкладок на macOS. apple-touch-icon применяется только тогда, когда пользователь добавляет сайт на главный экран: можно указать несколько значков разных sizes для разных устройств. mask-icon будет использоваться только в том случае, если пользователь закрепит вкладку в Safari на компьютере: сам значок должен быть монохромным SVG-изображением, а атрибут color заполняет значок необходимым цветом.
Хотя вы можете использовать <link> для определения совершенно разных изображений на каждой странице или даже при каждой загрузке страницы, не делайте этого. Для единообразия и удобства использования используйте одно изображение. Google использует разные значки для каждого из своих приложений: например, есть значок почты, значок календаря. Но все значки Google используют одну и ту же цветовую схему. По значку вы точно знаете, что находится в открытой вкладке.
Альтернативные версии сайта
Используйте значение атрибута rel alternate ) для обозначения переводов или альтернативных представлений сайта.
Предположим, у нас есть версии сайта, переведенные на французский и бразильский португальский языки:
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
При использовании alternate для перевода необходимо задать атрибут hreflang .
Альтернативное значение используется не только для переводов. Например, атрибут type может определять альтернативный URI для RSS-ленты, если атрибут type установлен на application/rss+xml или application/atom+xml .
Ссылка на фиктивную PDF-версию сайта:
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Если значение параметра rel равно alternate stylesheet , это определяет альтернативную таблицу стилей , и для этой альтернативной таблицы стилей необходимо задать имя в атрибуте title .
Канонический
Если вы создадите несколько переводов или версий «Машинного семинара», поисковые системы могут не определить авторитетный источник. Используйте rel="canonical" чтобы указать предпочтительный URL-адрес для сайта или приложения.
На всех переведенных страницах, а также на главной странице, укажите канонический URL-адрес, который мы предпочитаем:
<link rel="canonical" href="https://www.machinelearning.com" />
Каноническая ссылка rel="canonical" чаще всего используется для кросс-постинга с другими изданиями и блог-платформами, чтобы указать на первоисточник. При синдикации контента сайт должен включать каноническую ссылку на первоисточник.
Сценарии
Тег <script> включает скрипты. Тип по умолчанию — JavaScript. Если вы используете другой язык сценариев, укажите атрибут type вместе с MIME-типом или type="module" для модуля JavaScript . Анализируются и выполняются только JavaScript и модули JavaScript.
Теги <script> можно использовать для инкапсуляции кода или для загрузки внешнего файла. В MLW нет внешних файлов скриптов, потому что, вопреки распространенному мнению, JavaScript не нужен для функционирования веб-сайта. Это курс обучения HTML, а не JavaScript .
Позже вам потребуется добавить небольшой фрагмент кода JavaScript для создания пасхального яйца :
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Этот фрагмент кода создает обработчик событий для элемента с ID ` switch . В JavaScript следует избегать ссылок на элементы до того, как они появятся. Поскольку switch еще не существует, мы пока не будем включать обработчик событий.
Когда мы добавляем элемент выключателя света, мы размещаем <script> внизу <body> , а не в <head> . Почему? По двум причинам. Во-первых, мы хотим убедиться, что элементы существуют до того, как будет обнаружен скрипт, ссылающийся на них, поскольку мы не основываем этот скрипт на событии DOMContentLoaded . И, во-вторых, главное, JavaScript не только блокирует рендеринг , но и браузер прекращает загрузку всех ресурсов, когда загружаются скрипты, и не возобновляет загрузку других ресурсов, пока выполнение JavaScript не завершится. По этой причине запросы JavaScript часто располагаются в конце документа, а не в <head>.
Существуют два атрибута, которые могут уменьшить блокировку при загрузке и выполнении JavaScript: defer и async . При использовании defer отрисовка HTML не блокируется во время загрузки, и JavaScript выполняется только после того, как документ завершит отрисовку. При использовании async отрисовка также не блокируется во время загрузки, но после завершения загрузки скрипта отрисовка приостанавливается на время выполнения JavaScript.
Чтобы подключить JavaScript от MLW к внешнему файлу, можно написать:
<script src="js/switch.js" defer></script>
Добавление атрибута defer откладывает выполнение скрипта до завершения его рендеринга, предотвращая снижение производительности. Атрибуты async и defer действительны только для внешних скриптов.
База
Существует ещё один элемент, который встречается только в <head>. Редко используемый элемент <base> позволяет задать URL-адрес ссылки по умолчанию и целевой адрес. Атрибут href определяет базовый URL-адрес для всех относительных ссылок.
Атрибут target , действительный как для <base> , так и для ссылок и форм, определяет, где должны открываться эти ссылки. Значение по умолчанию _self открывает связанные файлы в том же контексте, что и текущий документ. Другие варианты включают _blank , который открывает каждую ссылку в новом окне, _parent текущего содержимого, который может совпадать с self, если открывающий элемент не является iframe, или _top , который находится в той же вкладке браузера, но выводится из любого контекста, чтобы занять всю вкладку.
Большинство разработчиков добавляют атрибут target к тем немногим, если вообще к каким-либо, ссылкам, которые они хотят открывать в новом окне, непосредственно в самих ссылках или форме, вместо использования <base> .
<base target="_top" href="https://machinelearningworkshop.com" />
Если наш веб-сайт окажется вложенным в iframe на таком сайте, как Yummly, то включение элемента <base> будет означать, что при нажатии пользователем на любую ссылку в нашем документе ссылка загрузится вне iframe, заняв всё окно браузера.
Одним из недостатков этого элемента является то, что якорные ссылки обрабатываются с помощью <base> . <base> фактически преобразует ссылку <a href="#ref"> в <a target="_top" href="https://machinelearningworkshop.com#ref"> , инициируя HTTP-запрос к базовому URL с прикрепленным фрагментом.
Ещё несколько слов о <base> :
- В документе может быть только один элемент
<base>. - Оно должно располагаться перед любыми относительными URL-адресами, включая возможные ссылки на скрипты или таблицы стилей.
Теперь код выглядит так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
HTML-комментарии
Скрипт заключен в угловые скобки, тире и восклицательный знак, которые используются для комментирования HTML-кода. Все, что находится между <!-- и --> невидимо и не обрабатывается. HTML-комментарии можно размещать в любом месте страницы, за исключением скриптов или блоков стилей, где следует использовать комментарии JavaScript и CSS.
Вы уже изучили основы того, что должно быть в разделе <head> , но хотите узнать больше. В следующих разделах мы рассмотрим метатеги и то, как управлять тем, что отображается при ссылке на ваш сайт в социальных сетях.
Проверьте свое понимание
Проверьте свои знания о структуре документа.
Как определить язык документа?
language к HTML-тегу.lang к HTML-тегу.Add the <lang> в раздел <head> . Выберите элементы, которые можно включить в раздел <head> .
<p><title><meta>