Что значит тег head

Что внутри «head»? Метаданные в HTML

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

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

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

Название страницы (title)

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

(en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

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

set to

element.» src=»https://mdn.mozillademos.org/files/12323/title-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>Теперь должно стать совершенно ясно, в чём разница между

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

element » src=»https://mdn.mozillademos.org/files/12337/bookmark-example.png» style=»display: block; margin: 0 auto;» loading=»lazy»>

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

«>» title=»Permalink to Метаданные: Элемент «>Метаданные: Элемент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление иконок

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

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

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

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

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

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

Подключение CSS и JavaScript

Источник

Мета теги в html

Заголовочные теги выполняют две важные задачи:

Эти теги можно разделить на 4 группы.

Давайте рассмотрим каждую группу в отдельности.

1. Тег

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

Грамотно составить для новичка непросто, поскольку нужно учесть несколько нюансов. Идеальный заголовочный тег должен быть привлекательным для пользователей и содержать ключевые фразы для поисковых систем. Нельзя делать этот тег очень длинным, поскольку поисковыми системами это может быть воспринято как спам. Для каждой страницы этот тег должен быть уникальным!

Более подробно про тайтл читайте в специальной статье: как правильно составить тег

2. Теги

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

2.1. Meta Content-Type

Синтаксис этого атрибута следующий:

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

2.2. Meta description

В атрибуте content содержится описание страницы. Чаще всего это описание используется как сниппет для поисковой системы. Description не является обязательным тегом. Например, поисковая система Яндекс на своё усмотрение определяет сниппет, Google же пользуется этим описанием и выводит так, как оно написано.

Не стоит пренебрегать этим тегом, если ваша цель привлечение пользователей с поисковых систем. Более подробно про Description Вы можете прочитать здесь. Также советую ознакомиться с важной статьей: оптимизация сниппетов при продвижении сайта »

2.3. Meta keywords

Этот тег вызывает много споров о том, нужен ли он вообще. Поисковые машины не заявляют, что эти ключевые слова как-то участвуют при ранжировании сайта.

В атрибут content перечисляются ключевые слова. Вряд ли это кардинально повлияет на продвижение сайта, но при каких-то спорных моментах это может повлиять в вашу пользу. Ключевые слова должны быть написаны через запятую. Не пишите ключевые слова, которых нету на странице. Более подробно о Keywords Вы можете прочитать здесь.

2.4. Meta refresh

Этот тег нужен для организации редиректа. В content указывается время через которое произойдет переход (в нашем примере 1 секунда), а через точку с запятой URL куда произойдет переход (в нашем примере http://site.ru/). Что такое редирект и для чего он нужен читайте в статье как сделать редирект »

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

2.5. Meta viewport

Мета тег viewport используется для мобильных браузеров. Проблемы с отображением сайта на планшетах, смартфонах и других периферийных устройств существовала всегда. Сайты, как правило, делается под большие разрешения и не учитываются возможности просмотра на экранах с разрешением в 500, в 800 пикселей.

2.6. Meta robots

3. Теги

3.1. Link rel=Stylesheet

В атрибуте href указывается файл со стилями, который подключается к документу. Этот тег можно использовать несколько раз и соответственно подключить несколько файлов со стилями. Используется практически всегда из-за его удобства.

3.2. Link rel=Shortcut icon

3.3. Link rel=Alternate

В атрибуте href указывается расположение RSS ленты. Используется только в случае наличия RSS-ленты. Для статичных сайтов не используется. Читайте также: как добавить RSS ленту на сайт »

4. Тег

— подключение java-файлов со скриптами.

В атрибуте src указывается расположение подключаемых java-файлов. Используется для уменьшения кода на странице, а также в случае, если какие-то ява функции необходимо использовать при открытии страницы. Также это ускоряет загрузку страницы, т.к. браузеры обычно кэшируют скрипты.

Уважаемый читатель, мы рассмотрели заголовочные теги html документа. Теперь Вы лучше ориентируетесь в оптимизации сайта и в составлении грамотного кода.

Источник

Создание HTML-сайта: Работа с тегом head. Создание первой html-страницы.

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.

Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.

И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.

Теперь, перейдем к ответам на обозначенные вопросы в начале статьи.

Что нужно писать между тегами head и зачем?

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

Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.

Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:

У вас DOCTYPE может быть другим, в зависимости от выбранного.

Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.

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

Итак, обратим внимание на теги head. На данном этапе, между тегами указан только заголовок страницы и ничего более. Но, что же нужно написать еще между данными тегами. И самое главное зачем? Давайте разбираться.

Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».

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

Итак, теперь по порядку:

Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?

Создание первой html-страницы.

Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:

После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8». После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.

Что еще мы можем сделать? Чтобы наша первая страничка стала немного красивее. Мы можем, например, залить цветом фон страницы и покрасить заголовок в какой-нибудь цвет. И для этого, мы будем использовать каскадную таблицу стилей. Между тегами head, чуть раньше мы уже подключили файл со стилями, но его еще нет. Значит, его необходимо создать.

Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.

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

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

Итак, что мы имеем? А имеем мы заполненную техническую часть документа, что находится между тегами head. А также первую html-страницу, созданную самостоятельно. Да, в ней нет ничего особенного, но первый шаг к созданию HTML-сайта сделан. А в следующий раз мы продолжим, и приступим к созданию главной страницы сайта. Подписывайтесь, чтобы не пропустить.

Источник

Структура HTML документа: html, head, body, title

От автора

Здравствуйте! В этом уроке вы НЕ найдете для себя ничего полезного, если УЖЕ знакомы с формированием структуры HTML документа. Для тех, кто НЕ знаком, я покажу правильную (валидную) структуру HTML веб-документа, в том числе для сайта WordPress.

Общая правильная структура HTML документа

В первую очередь, без долгих предисловий – общая структура любого HTML документа должна быть такой:

Структура HTML документа

Если убрать пояснения, которые я показывал после каждого тега, то простая структура HTML документа выглядит так

Тип текущего документа DTD

Тип текущего документа (Document Type Definition, DTD) необходим, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь язык HTML существует в нескольких версиях.

Кроме этого есть другие языки разметки отличные от HTML, например XHTML.

Примечание: XHTML это EXtensible HyperText Markup Language, что переводим, как расширенный язык разметки гипертекста.

Понятие тега в HTML

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

Слово, заключенное в угловые скобки HTML документа называется тегом. Каждый тег имеет свой смысл, определенный правилами разметки.

Теги заголовков и подзаголовков h1-h6

Теги h1–h6 имеют подчиненную зависимость, нижний уровень этой подчинённости абзац.

Важно отметить, что нарушение подчиненной зависимости тегов h1-h6-p не нарушит отображение и валидность документа, а лишь ухудшит его оптимизацию для поисковых систем.

Пример развитой структуры HTML документа

Приведу академический пример более развитой структуры HTML документа:

Структура HTML 5

В версии HTML 5 должна быть такая структура документа:

Это декларация показывает, что этот документ в HTML5 ;

это корневой элемент HTML страницы;

Элемент, с мета-тегами о документе;

Этот элемент определяет заголовок для документа;

Этот элемент содержит видимое содержимое страницы;

Элемент определяет большой заголовок

Элемент определяет абзац.

Работают в html5 теги h2 – h6

Все теги двойные. Начальный тег называется открывающим тегом, а конечный тег – закрывающим тегом.

HTML разметка на сайте WordPress

Несмотря на то, что скрипт WordPress написан на php, все файлы сайта, а вернее все файлы рабочего шаблона сайта, имеют html разметку. Смотрим пример, на файле header.php шаблона Twenty Seventeen:

Вы можете видеть, что если все функции WordPress размещены в классической HTML разметке. Есть тип документа:

Как посмотреть HTML код страницы сайта WordPress

То, что вы пишите в редакторе сайта, создавая статьи или страницы, это лишь часть HTML страницы сайта. Это даже не всё тело body страницы.

Чтобы посмотреть HTML код страницы сайта WordPress, а это нужно очень часто, нужно:

Открыть страницу в браузере;

Перейти в английский шрифт клавиатуры;

Нажать следующие кнопки:

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

Вывод

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

В статье использованы инструменты обучения HTML : Tryit Editor v3.5

Источник

HTML Мета-теги

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

Функции мета-тегов

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

Группы метатегов

Мета-теги можно разделить на две основные группы — это NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о веб-документе, его авторе, а также — формирует рекомендации для поисковых роботов. Мета-теги, относящиеся к группе HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, они формируют заголовок веб-страницы и определяют его обработку, а также управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Элемент meta принимает следующие атрибуты: content, http-equiv, name, charset и scheme.

Группа значений атрибута NAME

«keywords» (ключевые слова)

Keywords поисковые системы используют для того, чтобы определить релевантность страницы тому или иному запросу. При формировании данного значения необходимо использовать только те слова, которые обязательно встречаются в самом документе. Использование тех слов, которых нет на странице, не рекомендуется. Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Рекомендованное количество слов в «keywords» — не более десяти. Кроме того, выявлено, что разбивка этого значения на несколько строк влияет на оценку ссылки поисковыми машинами. Некоторые поисковые системы не индексируют сайты, в которых в значении «keywords» повторяется одно и то же слово для увеличения позиции в списке результатов.

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords» :

«description» (описание страницы)

Description используется при создании краткого описания конкретной страницы Вашего сайта. Практически все поисковые системы учитывают его при индексации, а также при создании аннотации в выдаче по запросу. При отсутствии «description» поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике, поэтому желательно не просто указывать краткое описание документа, но сделать его содержание привлекательным рекламным сообщением.

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description» :

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

Группа значений атрибута HTTP-EQUIV

«Content-Type»

Content-Type определяет тип документа и его кодировку.

HTML-код с «Content-Type» :

В HTML5 указание кодировки упрощено:

«refresh»

Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).

Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru. Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

«Content-Language»

HTML-код с «content-language» :

В HTML5 указание языка упрощено:

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

Итоговое задание 12

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Ключевые слова

С помощью одинарного тега задайте ключевые слова: «HTML,CSS,JavaScript» для текущей веб-страницы.

Индексация веб-страницы

С помощью одинарного тега разрешите индексацию Web-страницы поисковыми машинами, а переход по ссылкам запретите.

Автоматическая перезагрузка страницы

С помощью одинарного тега meta назначте автоматическую перезагрузку текущей веб-страницы через 30 сек.

Источник