Для чего нужен head в html

Что внутри «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-сайта: Работа с тегом 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-тег head

Теги верхнего уровня и являются обязательными элементами веб-страницы и формируют ее структуру. В общих чертах разметка любого html-документа выглядит следующим образом:

Какие теги помещаются между тегами …

В разрешается добавлять следующие теги title, meta, link, style, script, noscript, и base. Наличие любого из них является опциональным. Даже если будет пустым или вообще отсутствовать, браузер сможет отрисовать страницу, правда, выглядеть она скорее всего будет не очень.

Вот минимум, который стоит включать в каждую страницу

Обычно выглядит примерно так:

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

Вот некоторые рекомендации по поводу заголовка страницы:

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

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

не имеет закрывающего тега и имеет следующие атрибуты:

Атрибуты name и http-equiv являются взаимоисключающими и не могут вместе находиться в одном теге.

Как использовать meta name viewport?

Если вы не используете meta name=viewport в разметке страницы, то скорее всего мобильный браузер просто уменьшит ее для того чтобы впихнуть в границы экрана. Контент на странице станет трудночитаемым и пользователю придется увеличивать части страницы и бесконечно скроллить, чтобы что-то разглядеть. Не айс.

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

width=device-width сообщает браузеру о том, что ширина страницы должна быть привязана к ширине экрана устройства.

initial-scale=1.0 устанавливает начальный уровень зума.

Это все, конечно, здорово, но для того, чтобы сайт одинаково хорошо смотрелся на всех устройствах не достаточно. Нужно также максимально отказаться от фиксированных размеров элементов страницы и использовать media queries в CSS.

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

Что такое meta http-equiv?

При помощи тегов с атрибутом http-equiv можно, например, обновлять страницу или перенаправлять на другую

Этот тег используется для указания связи между страницей и другими документами в сети, т.е. с его помощью можно подключать дополнительные файлы (например, CSS или фавикон).

Источник

Мета теги в 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 документа: 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

Источник