Разное

Head в html: Тег | htmlbook.ru

16.08.1991

HTML/Элемент head

Синтаксис

HTML

XHTML

<html>
  <head>
    <title> ... </title>
    ...
  </head>
  <body> ... </body>
</html>

Описание

Элемент head (от англ. «head» ‒ «голова, заголовок») указывает голову документа (технический заголовок документа), в котором располагаются элементы технической информации (ссылки, стили, сценарии), а так же метатеги данных документа (описание страницы, ключевые слова). При этом всё содержимое данного элемента в поле страницы ни как не отображается.

Допустимые дочерние элементы: base, basefont, link, meta, script, style, title.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0Head: HEADПеревод
3.2The HEAD element
4.017.4.1 The HEAD element
DTD: Transitional Strict Frameset
5.04.2.1 The head element
5.14.2.1. The head element
XHTML
1. 0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Атрибуты

profile
Указывает URL-адрес документа содержащего набор правил для элемента meta.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент head</title>
</head>
<body>
<h2>Пример с элементом «head»</h2>

<p>»Видимая часть страницы»</p>
</body>
</html>

Элемент head

Элемент head и метаданные веб-страницы

Последнее обновление: 08. 04.2016

Основная часть документа html, фактически все, что мы увидим в своем браузере при загрузке веб-страницы, располагается между тегами <body> и </body>. Здесь размещаются большинство элементов html.

Хотя большинство элементов в HTML5 остаются теми же, что и в ранних версиях, но несколько изменился способ их использования. Рассмотрим базовые элементы HTML5, их предназначение и использование.

Как правило, одним из первых элементов html-документа является элемент head, задача которого состоит в установке метаданных страницы и ряда сопроводительной информации. Метаданные содержат информацию о html-документе.

Заголовок

Для установки заголовка документа, который отображается на вкладке браузера, используется элемент title


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент title</title>
	</head>
	<body>
		<p>Содержание документа HTML5</p>
	</body>
</html>

Элемент base

Элемент base

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


<!DOCTYPE html>
<html>
	<head>
		<base href="content/">
		<meta charset="utf-8">
		<title>Элемент base</title>
	</head>
	<body>
		<a href="newpage. html">Перейти</a>
	</body>
</html>

Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл

newpage.html

Можно также указывать полный адрес:


<base href="http://www.microsoft.com/">

В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:


<meta charset="utf-8">

При этом надо помнить, что указанная элементе meta кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет указать кодировку документа.

Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM. Например, выбор кодировки в Notepad++:

Элемент meta также имеет два атрибута: name и content. Атрибут name содержит имя метаданных, а content — их значение.

По умолчанию в HTML определены пять типов метаданных:

  • application name: название веб-приложения, частью которого является данный документ

  • author: автор документа

  • description: краткое описание документа

  • generator: название программы, которая сгенерировала данный документ

  • keywords: ключевые слова документа

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

Добавим в документ ряд элементов meta:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<base href="content/">
		<title>Элемент title</title>
		<meta name="description" content="Первый документ HTML5">
		<meta name="author" content="Bill Gates">
	</head>
	<body>
		<a href="newpage.
 
 html">Содержание документа HTML5</a>
	</body>
</html>

НазадСодержаниеВперед

Узнайте о заголовке HTML-страницы и метатегах HTML

TL;DR — элемент заголовка HTML — это раздел, используемый для определения метаданных — информации о странице, которая читается браузером, но остается невидимой для пользователя.

Содержание
  • 1. Знакомство с элементом HTML Head
  • 2. Теги, которые чаще всего используются в HTML Head
  • 3. Тег HTML Head: полезные советы

Знакомство с элементом HTML Head >

для определения метаданных (таких как заголовок страницы или связанные ключевые слова). Здесь же вы размещаете сценарии JS или таблицы стилей CSS.

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

Плюсы

  • Упрощенный дизайн (без ненужной информации)
  • Высококачественные курсы (даже бесплатные)
  • Разнообразие функций

Основные функции

  • Программы Nanodegree
  • Подходящие для Enterprises
  • Платный сертификат из завершения
  • .

    ЭКСКЛЮЗИВ: СКИДКА 75%

    Плюсы

    • Удобная навигация
    • Никаких технических проблем
    • Кажется, заботятся о своих пользователях

    Main Features

    • Huge variety of courses
    • 30-day refund policy
    • Free certificates of completion

    AS LOW AS 12.99$

    Pros

    • Great user experience
    • Offers quality контент
    • Очень прозрачные цены

    Основные функции

    • Бесплатные сертификаты об окончании
    • Ориентированы на навыки работы с данными
    • Гибкий график обучения

    СКИДКА 75%

    Теги, наиболее часто используемые в HTML Заголовок

    </code> определяет заголовок HTML-страницы, который отображается в веб-браузере.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image2.slideserve.com/3718384/slide10-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image2.slideserve.com/3718384/slide10-l.jpg' /></noscript> Заголовок HTML-страницы показывает, о чем ваша страница, и помогает пользователям ее найти:</p><p> <strong> Пример </strong></p><pre> <head><center><ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="8813674614"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> <title>Название документа

    Попробуйте вживую. Учитесь на Udacity

    Вероятно, вы также будете использовать CSS и JavaScript при разработке своего сайта. Однако такой код должен быть написан вне вашего основного HTML-документа. Тег создает связь с внешними ресурсами (таблицами стилей или сценариями), используемыми веб-страницей:

    Пример

    Попробуйте Live Learn на Udacity

    Теги HTML используются для определения метаинформации о документе, такой как кодировка, описание, автор, режим области просмотра и т. д.:

    Пример 

     
     
<мета-кодировка="UTF-8">

    Попробуйте вживую. Учитесь на Udacity

    Если вы хотите включить JS-скрипт в свой HTML-документ, вы должны использовать теги

    Попробуйте вживую. Учитесь на Udacity

    HTML-тег заголовка: полезные советы

    • Чтобы попрактиковаться, щелкните правой кнопкой мыши свой любимый веб-сайт и выберите
      Проверить       , чтобы увидеть его HTML-код. Вы увидите, что голова в HTML может быть вполне массивный в объеме - изучите, что он содержит.
    • Некоторые браузеры меняют кодировку, если она определена неправильно, однако это не является общепринятой практикой. Убедитесь, что вы определили кодировку как UTF-8 , которая включает в себя наибольшее количество символов.
    • Убедитесь, что вы четко определили мета-заголовок и описание для своего веб-сайта: поисковые системы будут отображать их пользователю в результатах поиска . Постарайтесь сохранить название ниже 70 символов и описание под 160 символов, чтобы текст отображался полностью.

    Метаданные и элемент Head

    Урок 8: Метаданные и элемент Head

    /en/basic-html/blocklevel-inline-and-organizational-elements/content/

    Метаданные и элемент head

    Этот урок часть серии по компьютерному программированию . Вы можете перейти к Введение в программирование , если хотите начать с самого начала.

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

    Метаданные

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

    • Какую версию HTML использует веб-страница
    • Название веб-страницы
    • Изображение или текст, описывающий веб-страницу

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

    Объявление DOCTYPE

    Одной из наиболее важных частей метаданных, которые требуются на каждой веб-странице, является объявление DOCTYPE . Это должно быть первое, что вы видите в HTML-документе (мы скоро добавим его в ваш), и он выглядит так:

    Это конкретное объявление DOCTYPE указывает, что HTML-документ содержит HTML и версия этого HTML HTML5 . Это важно, поскольку в Интернете все еще существует множество веб-страниц, написанных на старых версиях HTML. Например, на некоторых веб-страницах объявление DOCTYPE может выглядеть примерно так:

    Это объявление указывает более раннюю версию HTML (4.1), которая имеет некоторые отличия от HTML5. Когда вы загружаете веб-страницу, не имеющую объявления DOCTYPE, ваш браузер переходит в специальный режим, который называется quirks mode . По сути, это просто означает, что браузер угадывает, какой тип HTML использует веб-страница, и когда браузер начинает угадывать, он иногда ошибается.

    Элемент head

    Остальные метаданные, которые можно предоставить для веб-страницы, находятся внутри специального элемента HTML с именем элемент . Он выглядит так:

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

    Простейшая версия элемента head содержит только одну вещь: элемент </code> </strong> . Элемент <code><title> </code>, как следует из названия, должен содержать заголовок вашей веб-страницы. Это единственное, что ваш браузер должен содержать в элементе head: <br/></p><pre> <title>Моя очень хорошая веб-страница

    9Элемент 0018 </code> позволяет всем, кто читает ваш HTML-документ, знать, как его называть.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.multiurok.ru/html/2017/10/21/s_59eb58073e0ba/717324_1.png' /><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2017/10/21/s_59eb58073e0ba/717324_1.png' /></noscript> Например, большинство браузеров используют элемент <code><title> </code>, чтобы определить, что показывать на вкладке для этой веб-страницы. Если бы вы загрузили веб-страницу с указанным выше заголовком в своем браузере, вы бы увидели это на вкладке браузера:</p><h5><span class="ez-toc-section" id="i-10"> Реальные метаданные </span></h5><p> Сначала может показаться, что метаданные не важны — вы их не видите. В конце концов, вы делаете что-либо на своей веб-странице, но <strong> на самом деле вы видите, что метаданные используются все время </strong> в повседневной жизни. Например, давайте рассмотрим этот сайт. Если бы вы искали GCFLearnFree в Google, это был бы ваш лучший результат: <br/></p><p> Однако, если вы перейдете на нашу домашнюю страницу, вы заметите, что описание, данное в результатах Google, отсутствует на странице. Это потому, что Google автоматически <strong> извлек его из метаданных </strong>, включенных в наш HTML: <br/></p><pre> <meta name="description" content="GCFGLobal — свобода учиться тому, что вы хотите, когда хотите, абсолютно бесплатно! Ознакомьтесь с нашим Повседневная жизнь, базовая математика и компьютерное обучение уже сегодня!»> </pre><p> Обратите внимание, что этот конкретный фрагмент метаданных использует тег <code><meta> </code>, который хранит всю свою информацию в <strong> HTML-атрибутах </strong> , как вы видели при работе со ссылками и изображениями.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-13.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-13.jpg' /></noscript></p><p> Если бы вы поделились нашей домашней страницей на Facebook, вы бы увидели что-то вроде этого:</p><p> Как и раньше, изображения и текст, которые вы видите <strong>, не отображаются на главной странице </strong> . Вместо этого они также исходят из нескольких немного отличающихся метатегов в элементе head, которые требуются Facebook: <br/></p><pre> <meta property="og:title" content="Бесплатное онлайн-обучение в GCFGlobal"> <meta property="og:description" content="GCFGLobal – свобода учиться тому, что вы хотите, когда хотите, абсолютно бесплатно! Ознакомьтесь с нашими курсами повседневной жизни, базовой математики и работы с компьютером сегодня!"> <meta property="og:image" content="https://media.gcflearnfree.org/global/layout/social/gcf-website-image.png"> </pre><p> Другими словами, метаданные не обязательно говорят или показывают вам многое, когда вы просто просматриваете свою собственную веб-страницу, но они многое делают, чтобы помочь вашему браузеру понять ваш HTML, и они могут предоставить инструменты для разных вещей.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.info/slide/13816166/85/images/4/%3Chtml%3E+%3Chead%3E+%3Ctitle%3EUKURANHURUF%3C%2Ftitle%3E+%3C%2Fhead%3E+%3Cbody%3E+%3Cfont+size%3D1%3E+Font+Size+1%3C%2Ffont%3E%3Cbr%3E+%3Cfont+size%3D2%3E.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.info/slide/13816166/85/images/4/%3Chtml%3E+%3Chead%3E+%3Ctitle%3EUKURANHURUF%3C%2Ftitle%3E+%3C%2Fhead%3E+%3Cbody%3E+%3Cfont+size%3D1%3E+Font+Size+1%3C%2Ffont%3E%3Cbr%3E+%3Cfont+size%3D2%3E.jpg' /></noscript> как платформы социальных сетей и поисковые системы до <strong> понять и объяснить, о чем ваша веб-страница </strong> .</p><h5><span class="ez-toc-section" id="i-11"> Сделай сам! </span></h5><p> Откройте файл <strong> index.html </strong> вашего проекта <strong> GCF Programming Tutorials </strong> в текстовом редакторе и добавьте метаданные.</p><ol><li> Во-первых, перейдите в самый верх файла и добавьте это прежде всего: <pre> <!DOCTYPE html> </pre></li><li> Затем найдите открывающий тег <code><html> </code>. Все ваши структурные элементы HTML находятся внутри <code><html> </code>, как и остальные метаданные.</li><li> Добавьте туда свой элемент <code><head> </code> после открывающего тега <code><html> </code> и перед открывающим тегом <code><body> </code>. Не забудьте сделать отступ на том же уровне, что и элемент <code><body> </code> для удобочитаемости: <pre> <head> </голова> </pre></li><li> Мы оставили пустую строку между тегами <code><head> </code> и <code></head> </code>, потому что собираемся добавить туда тег title.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/h/hKGJzq9B6R0wMeapQEnZmH1WTskYfIli45NrLU/slide-38.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/h/hKGJzq9B6R0wMeapQEnZmH1WTskYfIli45NrLU/slide-38.jpg' /></noscript> это <strong> название веб-страницы </strong> , и мы делаем сайт с обзорами фильмов, поэтому давайте дадим ему имя, отражающее интерес к респектабельным фильмам, например <em> Basketball Dog </em> : <pre> <title>Обзоры киноклассики кино

    • После того, как вы все это сделаете, ваш полный код должен выглядеть так:

     

  <голова>
    Рецензии на киноклассику
  
  <тело>
     
    Обзоры киноклассики
     
    <дел>
       
    Обзор: Баскетбольная собака (2018 г.)
     
      
      
    4 звезды из 5
      
    Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается. 
    
      
    В этом фильме есть все, о чем вы могли мечтать:
    
      <ул>
        
  • Баскетбол
    • 
        
  • Собака
    • 
        
  • Захватывающая саспенс
    •

Возможно, нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени, но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов, а финал заставит любого любителя собак расплакаться. Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.

Полный список актеров можно найти на сайте Basketball Dog.

Откройте проводник или Finder и перейдите к проекту GCF Programming Tutorials , затем дважды щелкните файл index.html. Ваша веб-страница должна открыться в браузере по умолчанию. Имейте в виду, что добавление является метаданными только для вашего браузера — вы не увидите его на странице — но теперь, когда оно у вас есть, ваш браузер будет считать это действительным HTML .