Articles
Введение в HTML
Теги, используемые в секции head

Теги, используемые в секции head

В этой статье объясняются теги, используемые в разделе Head.

Объясняется использование тегов в разделе head, таких как <link>, <script>, <style>.

YouTube Video

Теги, используемые в секции head

Тег <title> 

1<title>Document Title</title>
  • Тег <title> определяет заголовок документа. Этот заголовок отображается на вкладке браузера и используется в закладках, а также в результатах поиска.

Тег <link>

  • Тег <link> используется для привязки внешних ресурсов к текущему документу. Он обычно используется для подключения внешних CSS-файлов, но также может применяться для значков и других внешних ресурсов.

Атрибут rel тега <link>

Атрибут rel используется для указания соотношения между подключаемым ресурсом и текущим документом в теге <link>. Существует множество типов значений для атрибута rel, но здесь мы объясним самые важные и часто используемые.

stylesheet 
1<link rel="stylesheet" href="styles.css">
  • stylesheet используется для подключения внешнего файла таблицы стилей.

icon 

1<link rel="icon" href="favicon.ico" type="image/x-icon">
  • rel="icon" определяет значок, отображаемый на вкладке браузера или в закладке. Указав правильный фавикон, вы улучшаете брендинг сайта и его визуальное распознавание.

preload 

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  • preload используется для предварительной загрузки ресурсов до начала рендеринга страницы. Это особенно полезно для ресурсов, где важна своевременная загрузка, например шрифтов или крупных изображений. Это повышает производительность и улучшает пользовательский опыт.

canonical 

1<link rel="canonical" href="https://example.com/page.html">
  • canonical используется для информирования поисковых систем о канонической версии страницы. В случае дублированного контента указание канонического URL помогает объединить рейтинг в поисковых системах с точки зрения SEO и гарантирует правильную индексацию контента.

alternate 

1<link rel="alternate" hreflang="en" href="https://example.com/en/">
  • alternate используется для указания страниц на других языках или в других форматах для поисковых систем и браузеров. На многоязычных сайтах вы можете указать URL-адрес для каждой языковой версии в сочетании с атрибутом hreflang, чтобы предоставить пользователям страницы на соответствующем языке.

manifest 

1<link rel="manifest" href="/manifest.json">
  • manifest предоставляет браузеру файл манифеста, содержащий информацию о конфигурации для PWA (прогрессивного веб-приложения). Этот файл содержит информацию, такую как иконка приложения, цвет темы и режим отображения, что помогает в установке и запуске PWA на мобильных устройствах.

dns-prefetch 

1<link rel="dns-prefetch" href="//example.com">
  • При ссылке на внешние ресурсы выполнение DNS-разрешения домена заранее может ускорить загрузку страниц. Это особенно эффективно для страниц с большим количеством внешних ресурсов или когда требуется быстрое взаимодействие с пользователем.

Тег <style> 

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>
  • Тег <style> используется для определения внутренних таблиц стилей. Он используется для применения стилей CSS к элементам на странице, позволяя писать CSS без использования внешних файлов.

Тег <script> 

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>
  • Тег <script> используется для встроенного написания кода JavaScript в HTML-документ. Вы можете также подключать внешние файлы JavaScript, управляя динамическим поведением страницы. Используйте атрибут src для указания файла скрипта.

Атрибуты async и defer

Тег <script> поддерживает два атрибута: async и defer, которые влияют на время загрузки и выполнения скрипта. Обычно скрипты обрабатываются последовательно браузером, но использование этих атрибутов может улучшить производительность страницы и ускорить её загрузку.

Атрибут async 
1<script src="script.js" async></script>
  • Использование атрибута async позволяет загружать скрипт асинхронно. Браузер загружает скрипт параллельно с другими ресурсами и выполняет его сразу после завершения загрузки.
  • async в основном подходит для независимых скриптов и используется, когда выполнение скрипта не зависит от загрузки других скриптов или DOM.
Атрибут defer 
1<script src="script.js" defer></script>
  • Использование атрибута defer позволяет загружать скрипт асинхронно, но выполнять его только после завершения парсинга HTML. Выполнение скрипта не блокирует отображение страницы, что улучшает взаимодействие с пользователем.
  • defer эффективен, когда скрипты должны выполняться после полной загрузки DOM. Например, он подходит для запуска скрипта после загрузки всей структуры и элементов страницы.

Политика CORS и атрибут crossorigin

При загрузке внешних скриптов могут быть наложены ограничения безопасности на основе политики одинакового происхождения (Same-Origin Policy). В таких случаях можно использовать атрибут crossorigin для разрешения совместного использования ресурсов.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Атрибут crossorigin может быть установлен с одним из следующих двух значений:.

  • anonymous: Отправляет запросы без включения учетных данных.
  • use-credentials: Отправляет запросы с учетными данными.

Атрибут type

Тег <script> может использовать атрибут type для указания типа скрипта. По умолчанию используется JavaScript, но можно также указать определенные типы скриптов (например, модульный JavaScript или шаблонный язык).

Модули JavaScript 
1<script type="module" src="module.js"></script>

  • Начиная с ECMAScript 2015 (ES6), были введены модули JavaScript, позволяющие разбивать код на модули для повышения его повторного использования. Указав type="module", можно использовать скрипт как модуль.

  • Модули могут быть разбиты на другие модули с использованием import и export.

Скрипты, отличные от JavaScript 
1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>
  • В теге <script> могут быть указаны скрипты, отличные от JavaScript. Например, используйте type="application/ld+json" при описании структурированных данных, таких как JSON-LD. JSON-LD — это формат, структурирующий данные на веб-странице, что позволяет поисковым системам и другим приложениям глубже понимать данные.

Заметки по использованию тега <script>

  • Порядок загрузки скриптов: Библиотеки, от которых зависят скрипты, должны быть загружены перед зависимыми скриптами. Например, скрипты, использующие jQuery, должны быть загружены после самой библиотеки jQuery.
  • Оптимизация производительности: Чтобы избежать влияния на скорость загрузки страницы, загружайте скрипты только при необходимости и избегайте выполнения ненужных скриптов.
  • Меры безопасности: При использовании внешних скриптов убедитесь, что они загружаются из надежных источников, чтобы предотвратить внедрение вредоносных скриптов.

Тег <base> 

1<base href="https://example.com/">
  • Тег <base> устанавливает базовый URL для всех относительных URL-адресов в документе. URL-адрес, указанный в атрибуте href, становится базовым для относительных путей в ссылках и изображениях. Обычно он используется только один раз на странице.

Тег <noscript> 

1<noscript>Your browser does not support JavaScript!</noscript>
  • Тег <noscript> определяет содержимое, которое отображается, если JavaScript отключен в браузере. Он используется для предоставления альтернативного содержимого в средах, где JavaScript не поддерживается.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Проверка формТеги, связанные с метаинформацией