: Что внутри «head»? Метаданные в HTML — Изучение веб-разработки

Содержание

Что внутри «head»? Метаданные в HTML — Изучение веб-разработки

  • Назад
  • Обзор: Introduction to HTML
  • Далее

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

  • заголовок (title) страницы
  • ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
  • ссылки на иконки
  • другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

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

Предварительные требования:Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача:Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.

Давайте снова посмотрим на HTML-документ из прошлой статьи:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Содержимое <head>, в отличие от содержимого элемента <body>, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:

<head>
  <meta charset="utf-8">
  <title>Моя тестовая страница</title>
</head>

Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Мы уже видели, как работает элемент <title>: его используют для добавления заголовка (названия страницы) в документ. Элемент <h2> (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

  • Элемент <h2> (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
  • Элемент <title> — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.

Активное изучение: разбор простого примера

  1. Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как… в меню браузера и выберите папку для сохранения.
  2. Откройте файл в браузере. Вы увидите что-то вроде этого:

    Теперь должно стать совершенно ясно, в чём разница между <h2> и <title>!

  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

Содержимое элемента <title> используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из <title> предлагается в качестве названия закладки.

Текст из <title> также появляется в результатах поиска, как мы скоро увидим.

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент <meta>. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

<meta charset="utf-8">

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера <title> (странице title-example. html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

<p>Пример на японском: ご飯が熱い。</p>

Указываем автора и описание

У элементов <meta> часто есть атрибуты name и content:

  • name — тип элемента, то есть какие именно метаданные он содержит.
  • content — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

<meta name="author" content="Крис Миллс">
<meta name="description" content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

Активное изучение: как поисковые системы используют описание

Описание из <meta name="description"> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

  1. Перейдите на главную страницу Mozilla Developer Network.
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
  3. Найдите тег meta с описанием. Он выглядит так:
    <meta name="description" content="Веб-документация на MDN
предоставляет собой информацию об открытых веб-технологиях,
включая HTML, CSS и различные API для веб-сайтов и
прогрессивных веб-приложений. Также на сайте содержатся материалы
для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
  4. Теперь найдите «Mozilla Developer Network» в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

Другие виды метаданных

В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

<meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png">
<meta property="og:description" content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
продуктах Mozilla, как Инструменты разработчика Firefox.">
<meta property="og:title" content="MDN Web Docs">

Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _(User eXperience, UX)_.

У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter. com:

<meta name="twitter:title" content="MDN Web Docs">

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

Чтобы добавить на страницу favicon:

  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
  2. Добавьте ссылку на иконку в <head> документа:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer. mozilla.org/static/img/favicon144.png">
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- Для iPad первого и второго поколения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- Для других случаев - обычный favicon -->
<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

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

Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент <link>, а скрипты — через элемент <script> .

Активное изучение: добавляем на страницу CSS и JavaScript

  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
  2. Откройте HTML в браузере и текстовом редакторе.
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов <link> и <script>.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

  • JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
  • CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

<html lang="en-US">

<html lang="ru">

Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово «шесть» пишется одинаково как на французском, так и на английском языках, но произносится по-разному. ).

Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:

<p>Пример на японском: <span lang="ja">ご飯が熱い。</span>.</p>

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

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

  • Назад
  • Обзор: Introduction to HTML
  • Далее
  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Last modified: , by MDN contributors

— HTML | MDN

HTML-элемент <meta> представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base>, <link>, <script>, <style> или <title>.

Этот элемент включает в себя глобальные атрибуты.

Примечание: атрибут name имеет особое значение для элемента <meta> и атрибут itemprop не должен быть задан в <meta> элементе в котором уже определены какие-либо name, http-equiv или charset атрибуты.

charset

Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:

  • Авторам рекомендуется использовать UTF-8 (en-US).
  • Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB и EBCDIC.

    Примечание: ASCII-несовместимые кодировки — это те, которые не преобразуют 8-битные коды точек 0x20, 0x7E, 0x0020, 0x007E в коды Unicode точек.

    Предупреждение:

    • Авторы не должны использовать CESU-8, UTF-7, BOCU-1 и/или SCSU, так как есть примеры атак межсайтового скриптинга (en-US) использующих данные кодировки.
    • Авторам не следует использовать кодировку UTF-32, потому что не все алгоритмы кодирования HTML5 могут отличить её от UTF-16.

    Примечание:

    • Указанный набор символов должен соответствовать одной странице.
      Нет веских оснований для объявления неточного набора символов.
    • <meta> элемент должен находиться внутри элемента <head> и задаваться в 1024 первых байтах HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.
    • Этот <meta> элемент — часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. Заголовок Content-Type и любые Byte-Order Marks элементы переопределяют данный элемент.
    • Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать вас от этого риска.
    • Этот <meta> элемент это синоним для pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> где *IANAcharset *соответствует значению эквивалентного charset атрибута.
      Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
content

Этот атрибут содержит значение для http-equiv или name атрибута, в зависимости от контекста.

http-equiv

Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью content и может быть следующим:

  • "content-language" Этот API вышел из употребления и его работа больше не гарантируется.
    • : Эта прагма определяет значение языка страницы по умолчанию.

    Примечание: Не используйте эту прагму, так как она устарела Используйте глобальный атрибут <html> элемента вместо этого.

  • "Content-Security-Policy"
    • : Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.
  • "content-type" Этот API вышел из употребления и его работа больше не гарантируется.
  • "default-style"
    • : Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице. content атрибут должен содержать заголовок <link> элемента который href связывает атрибут с CSS таблцей стилей, или заголовок <style> элемента, который содержит CSS таблицу стилей.
  • "refresh"
    • : Эта прагма определяет:
      • Количество секунд перезагрузки таблицы, если content атрибут содержит только целое положительное число;
      • Время, в количестве секунд, за которое страница должна быть перенаправлена ​​на другую, если content атрибут содержит целое положительное число, заканчивающийся строкой ‘;url=‘ и корректный URL.
  • "set-cookie" Этот API вышел из употребления и его работа больше не гарантируется.
name

Этот атрибут определяет имя уровня документа метаданных.
Его не следует устанавливать, если один из атрибутов itemprop, http-equiv или charset также указан в наборе.
Имя этого документального уровня метаданных связано со значением, которое содержится в content атрибуте. Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредством content атрибута:

  • application-name, определяет имя веб-приложения, запущенного на веб-странице;

    Примечание: Замечание:* Браузеры могут использовать его для идентификации приложения. Он отличается от <title> элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например имя документа или статус;

    • Простые веб-страницы не определяют application-name meta.
  • автор определяет в свободном формате имя автора документа;
  • описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;
  • генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;
  • Ключевые слова, представленные строками, разделёнными запятыми, связанные с содержанием страницы
  • referrer Её поведение в будущем может измениться»>
    Экспериментальная возможность
     контролирует содержимое HTTP. Referer HTTP — заголовок, прикреплённый к любому запросу, отправленному из этого документа:

    Примечание: Замечание: Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.

    Примечание: Замечание: Динамическая вставка <meta name="referrer"> (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:

  • creator, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имён больше чем одно, то несколько <meta> элементов должны быть использованы;
  • googlebot, синоним robots, но только следует за Googlebot, сканирует индексы для Google;
  • publisher, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;
  • robots, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже:

    Примечание: Замечания:

    • Только кооперативные роботы будут следовать правилам, определённым именем роботов.
    • Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если вы хотите скрыть от них информацию, то используйте robots.txt файл.
    • Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
    • Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
    • Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
  • slurp,синоним robots, но следует только за Slurp, индексирующим роботом от Yahoo Search;Наконец несколько общих терминов:
    • viewport, который даёт подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.

    СпецификацияСтатусКомментарий
    CSS Device Adaptation
    Определение ‘<meta name=»viewport»>’ в этой спецификации.    		Рабочий черновикНенормативно описывает элемент META Viewport

    Смотрите также: @viewport

    Примечание: Замечания:

    • Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
    • Значения по умолчанию могут быть изменены у разных браузеров или устройств..
    • Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.
scheme Этот API вышел из употребления и его работа больше не гарантируется.

Этот атрибут определяет схему, которая описывает метаданные.
Схема — это контекст, ведущий к правильной интерпретации content значения, например формата.

Примечание: Замечание: Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.

В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:

  • Если в наборе name, то это document-level metadata, применяемая ко всей странице.
  • Если в набореhttp-equiv , то это pragma directive,
    то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница.
  • Если в наборе charset, то это charset declaration,
    то есть кодировка, используемая для сериализованной формы веб-страницы.
  • Если в наборе itemprop, то это user-defined metadata,
    прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя.
    Экспериментальная возможность
<!-- In HTML5 -->
<meta charset="utf-8">
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
Specification
HTML Standard
# the-meta-element

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

  • Другие элементы, содержащие метаданные: <base>, <head>, <link>, <style>,<title>.

Last modified: , by MDN contributors

Элементы заголовка HTML

❮ Назад
Далее ❯

Элемент HTML
является контейнером для следующих элементов:
<название> , <стиль> ,
<мета> , <ссылка> , <скрипт> и <база> .

Элемент HTML

Элемент является контейнером для метаданных (данные
о данных) и помещается между 9тег 0006 и тег .

Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.

Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.

HTML-элемент

</h3><p> Элемент <code><title> </code> определяет заголовок документа.<br /> Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или в<br /> вкладка страницы.</p><p> Элемент <code><title> </code> обязателен в документах HTML!</p><p> Содержание заголовка страницы очень важно для поисковой оптимизации<br /> (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка<br /> при отображении страниц в результатах поиска.</p><p> Элемент <code><title> </code>:</p><ul><li> определяет заголовок на панели инструментов браузера</li><li> предоставляет заголовок для страницы, когда она добавляется в избранное</li><li> отображает заголовок страницы в результатах поиска</li></ul><p> Итак, постарайтесь сделать заголовок максимально точным и осмысленным!</p><p> Простой HTML-документ:</p><h4><span class="ez-toc-section" id="%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80"></span> Пример <span class="ez-toc-section-end"></span></h4><p data-readability-styled="true"> <!DOCTYPE html> <br /><html> <br /><head> <br /><title>Значащая страница<br /> Заголовок

Содержание документа. …..


Попробуйте сами »

HTML-элемент

Попробуйте сами »

HTML-элемент

Элемент определяет
отношения между текущим документом и внешним ресурсом.

<ссылка>
чаще всего используется для ссылки на внешние таблицы стилей:

Пример

Попробуйте сами »

Совет: Чтобы узнать все о CSS, посетите наш учебник по CSS.

Элемент HTML

Обычно используется элемент
указать набор символов, описание страницы, ключевые слова, автора документа,
и настройки видового экрана.

Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент
или перезагрузить страницу)
поисковыми системами (ключевыми словами) и другими веб-сервисами.

Примеры

Определение используемого набора символов:

Определение ключевых слов для поисковых систем:

CSS

Определите описание вашей веб-страницы:

Определить автора страницы:

Обновлять документ каждые 30 секунд:

Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:

Пример тегов:

Пример




Попробуйте сами »

Настройка области просмотра

Область просмотра — это видимая пользователем область веб-страницы. Она зависит от устройства
- на мобильном телефоне он будет меньше, чем на экране компьютера.

Вы должны включать следующий элемент на все свои веб-страницы:

Это дает браузеру инструкции о том, как
для управления размерами страницы и масштабированием.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).

Начальная шкала =1,0 9Часть 0007 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :

Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Без
метатег области просмотра


метатег окна просмотра

Элемент HTML

Попробуйте сами »

Совет: Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript.

HTML-элемент

Элемент указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.

Тег должен иметь
href или целевой атрибут присутствует, или оба.

Может быть только один единственный
элемент в документе!

Пример

Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<голова>


gif"
alt="Stickman">
базовый тег HTML

Попробуйте сами »

Резюме главы

  • The Элемент является контейнером для метаданных (данные
    о данных)
  • Элемент помещается между тег и тег
  • Требуется элемент </code> и<br /> он определяет заголовок документа</li><li> Элемент <code><br /><p></head> <br /><body></p><p><h2><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA"></span>Заголовок<span class="ez-toc-section-end"></span></h2><p></p><p>A<br /> параграф.</p></p><p></body> <br /></html></p><p data-readability-styled="true"> Попробуйте сами »</p><h4><span class="ez-toc-section" id="Example"></span> Example <span class="ez-toc-section-end"></span></h4><p> Тег<link> (ссылка на внешний стиль<br /> лист) идет внутри<head>:</p><p data-readability-styled="true"><html> <br /><head> <br />  <link rel="stylesheet" type="text/css" href="styles.css"></head> <br /><body></p><p><h2><span class="ez-toc-section" id="%D0%AF_%D0%BE%D1%82%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_%D1%81%D0%BE_%D1%81%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D0%BE%D0%B9_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B5%D0%B9_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9"></span>Я отформатирован со связанной таблицей стилей<span class="ez-toc-section-end"></span></h2><p></p><p>Я тоже!</p></p><p></body> <br /></html></p><p data-readability-styled="true"> Попробуйте сами »</p><hr/><h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D1%8F%D0%B7%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B"></span> Связанные страницы <span class="ez-toc-section-end"></span></h3><p> Учебник по HTML: HTML Head</p><p> Ссылка HTML DOM: Head Object</p><hr/><h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_CSS_%D0%BF%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E"></span> Настройки CSS по умолчанию <span class="ez-toc-section-end"></span></h3><p> Большинство браузеров отображают элемент <code><head> </code> со следующим значением по умолчанию<br /> значения:</p><p> голова { <br />   отображение: нет; <br /> }</p><p> ❮ Предыдущий<br /> Полный справочник HTML<br /> Далее ❯</p><p></p><p> НОВИНКА</p><p> Мы только что запустили <br /> Видео W3Schools</p><p data-readability-styled="true"> Узнать</p><h5><span class="ez-toc-section" id="%D0%92%D0%AB%D0%91%D0%9E%D0%A0_%D0%A6%D0%92%D0%95%D0%A2%D0%90"></span> ВЫБОР ЦВЕТА <span class="ez-toc-section-end"></span></h5><h5><span class="ez-toc-section" id="%D0%9A%D0%9E%D0%94_%D0%98%D0%93%D0%A0%D0%AB"></span> КОД ИГРЫ <span class="ez-toc-section-end"></span></h5><p data-readability-styled="true"> Играть в игру</p><hr/><hr/><hr/><p><h5><span class="ez-toc-section" id="Top_Tutorials"></span> Top Tutorials <span class="ez-toc-section-end"></span></h5><p>Учебное пособие по HTML <br /> Учебное пособие по CSS <br /> Учебное пособие по JavaScript <br /> Учебное пособие <br /> Учебное пособие по SQL <br /> Учебное пособие по Python <br /> Учебное пособие по W3.<img class="lazy lazy-hidden" loading='lazy' src="//novosteika.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/piskovani-km.cz/foto/galerie/777.jpg' /><noscript><img loading='lazy' src='/800/600/http/piskovani-km.cz/foto/galerie/777.jpg' /></noscript> CSS <br /> Учебное пособие по Bootstrap <br /> Учебник по PHP <br /> Учебник по Java <br /> Учебник по C++ <br /> Учебник по jQuery</p><p><h5><span class="ez-toc-section" id="%D0%9B%D1%83%D1%87%D1%88%D0%B8%D0%B5_%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8"></span> Лучшие ссылки <span class="ez-toc-section-end"></span></h5><p>Справочник по HTML <br /> Справочник по CSS <br /> Справочник по JavaScript <br /> Справочник по SQL <br /> Справочник по Python <br /> Справочник по W3.CSS <br /> Справочник по Bootstrap <br /> Справочник по PHP <br /> Цвета HTML <br /> Справочник по Java <br /> Справочник по Angular <br /> Справочник по jQuery</p><p> Примеры HTML <br /> Примеры CSS <br /> Примеры JavaScript <br /> Примеры инструкций <br /> Примеры SQL <br /> Примеры Python <br /> Примеры W3.CSS <br /> Примеры Bootstrap <br /> Примеры PHP <br /> Примеры Java <br /> Примеры XML <br /> Примеры jQuery</p><hr/><p> FORUM |<br /> О</p><p data-readability-styled="true"> W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.<br /> Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.<img class="lazy lazy-hidden" loading='lazy' src="//novosteika.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/preview.turbosquid.com/Preview/2014/07/09__20_21_44/male_head_image_01.jpg998362e1-c294-45b6-98e1-65d619f4791dOriginal.jpg' /><noscript><img loading='lazy' src='/800/600/http/preview.turbosquid.com/Preview/2014/07/09__20_21_44/male_head_image_01.jpg998362e1-c294-45b6-98e1-65d619f4791dOriginal.jpg' /></noscript></p><div class="clearfix"></div></div></article></main></div><footer id="site-footer" class="site-footer page-footer"><div id="footer-row" class="row"><div class="col-md-12 text-center"><div class="pryam"><span class="novosteika">новостейка © 2022</span></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://novosteika.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>