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.0 | Head: HEAD | Перевод |
3.2 | The HEAD element | |
4.01 | 7.4.1 The HEAD element DTD: Transitional
Strict
Frameset | |
5.0 | 4.2.1 The head element | |
5.1 | 4.2.1. The head element | |
XHTML | ||
1.![]() | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset | |
1.1 | Extensible 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>
</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, в которой должен находится файл
Можно также указывать полный адрес:
<base href="http://www.microsoft.com/">
В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html
Элемент meta
Элемент meta определяет метаданные документа.
Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой кодировкой является utf-8:
<meta charset="utf-8">
При этом надо помнить, что указанная элементе meta
кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет
указать кодировку документа.
Элемент 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-тег заголовка: полезные советы
Чтобы попрактиковаться, щелкните правой кнопкой мыши свой любимый веб-сайт и выберите
Некоторые браузеры меняют кодировку, если она определена неправильно, однако это не является общепринятой практикой. Убедитесь, что вы определили кодировку как 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.