Html head теги: Тег head, служебная информация о странице — Структура HTML-документа — HTML Academy

Leave a Comment / Html / By /

Содержание

Структура HTML файла

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

Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл».

Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.

Рассмотрим пример упрощённого HTML файла, страницы сайта: 

<!DOCTYPE html>
<html>
   <head>
      Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
   </head>
   <body>
      Содержание страницы
   </body>
</html>

Всё, что написано латиницей и заключено в скобки < > — это теги. Разберём пример по сторкам:

<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.

<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.

<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.

<body> … </body>

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

Пример html страницы

Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера: 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Про мышей</title>
</head>
<body>      Тише, мыши, кот на крыше,<br>
а котята ещё выше. <br>
Кот пошёл за молоком,<br>
а котята кувырком.<br>
Кот пришёл без молока,<br>
а котята ха-ха-ха.    </body>
</html>

Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут

lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.

Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.

Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.

В блоке <head> … </head>

также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).

Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.

Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере.

Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.

Комментарии в HTML коде

Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: <!— текст_комментария —>. Пример комментариев: 

<!DOCTYPE html>
<html>
<head>
<!-- Комментарий в разделе head -->
</head>
<!-- Комментарий между блоками head и body-->
<body>
<!-- Комментарий в теле страницы -->
</body>
</html>

Комментарий может находиться в любой части сайта.

Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.

HTML. Полезные мета-теги и их последовательность в head / СоХабр

Предисловие

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

И когда у меня изрядно «подгорело», я решил написать эту статью, чтобы «открыть глаза юным падаванам».


Вникаем в спецификацию

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

Внимание! Шаблонное копирование мета-тегов из проекта в проект- это неправильно. Но, по моему мнению, это необходимый «минимальный» комплект. Данная статья является моим субъективным мнением, каждый пункт которого отталкивается строго от документаций для веб-мастеров Google и Yandex, а так же, спецификации HTML.


Начинаем

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

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width">

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

И в самом конце мы задаем настройки viewport’а.

Далее просто приведу всю разметку в теге head, а затем уточню некоторые нюансы.

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width">
  <!--3 meta-тега выше должны быть использованы первыми-->
  <!--OpenGraph | http://ogp.me
  Для подключения нужно использовать атрибут prefix="og: http://ogp.me/ns#" в теге html.
  
  Шаблон:
  <meta property="og:type" content="website">
  <meta property="og:url" content="адрес сайта">
  <meta property="og:title" content="заголовок">
  <meta property="og:description" content="описание">
  <meta property="og:image" content="адрес изображения">
  -->
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link rel="icon" href="" type="image/x-icon">
  <link rel="apple-touch-icon" href="" type="image/png">
  <!--Apple iOS | https://developer.
  apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!--CSS-->
  <link href="" rel="stylesheet">
  <!--JS-->
  <!--Считается хорошим тоном подключать скрипты перед закрывающим тегом body. Но, например, если вы хотите сделать загрузочный экран, то было бы логичнее подключить скрипт сюда.-->
  <script src=""></script>
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <!--Custom Windows Start Screen Tile | http://www.buildmypinnedsite.com-->
</head>


Нюансы


Устаревшие типы и теги

Речь и дет о таких мета-тегах, как keywords и таких типах файлов, как image/x-icon.
Большинство людей считают, что, например, тег keywords безсмысленно использовать, так как он уже давно устарел. Или, тип x-icon.
Отвечу раз и навсегда на это. Нужно всегда отталкиваться от документациий для веб-разработчиков, созданными (и регулярно обновляемыми) поисковыми системами. Документацию пишут не дураки. Например, в документации Яндекс до сих пор указано, что «keywords МОЖЕТ использоваться поисковой системой для формирования сниппета», а тип x-icon указан вообще первым и ничего не сказано про то, что он устарел.


OpenGraph

Прошу заметить, что данная интеграция, как и следующая, которую я приведу, действительно, не являются обязательными. Но отталкиваясь от спецификации Yahoo!, которая была сделана много лет назад и до сих пор является действительной, можно сделать вывод, что эта интеграция необходима, чтобы повысить «карму» сайта.
Связано это с тем, что с точки зрения SEO, да и здравого смысла, рейтинг сайта зависит от того, на сколько он «универсальный солдат». Иными словами, зависит он от того, на сколько он удобен для пользователя на разных устройствах, какие дополнительные полезные возможности он в себя включает и т.п. И в это входит адаптация по iOS устройства, интеграция двух протоколов, которые я привел в этой статье, отсутвие атрибута alt в изображениях и много чего другого.
Лично я пользуюсь уже несколько лет данным ресурсом-плагином для браузера, чтобы проверять соответствие сайта этим требованиям. Прошу заметить, что, нами всеми любимый, Хабрахабр и Тостер отвечают, почти на каждой странице (на некоторых страницах это просто невозможно или ненужно) всем пунктам этого чеклиста.

OpenGraph Protocol — это протокол, который изначально был придуман для социальной сети Facebook. Теперь он используется каждой соц. сетью и большинством современных форумов/сайтов. Он содержит в себе информацию о странице, на которую пользователь дает ссылку в сообщении. Думаю, каждый из Вас отправлял ссылки в соц. сетях и видел, как ссылка преобразуется в картинку, под ней добавляется заголовок и описание.
Ссылка на документацию добавлена в комментарий в коде.


Windows

Тут у некоторых опытных верстальщиков может вспыхнуть вопрос: «При чем здесь Windows и RSS Канал и какое отношение он может иметь к, например, сайту-визитке?» Но, тут тоже есть своя особенность. Этот протокол нужен для того, чтобы при добавлении сайта в «закладки» в меню Пуск на Windows, туда добавлялось не только название сайта, но и читалась информация с RSS и постоянно обновлялась. Вы можете заметить пример работы протокола, зайдя в меню Пуск на Windows 10 и посмотрев на плитку новостей, которая регулярно обновляется.
Действительно, зачем сайту, который не нуждается в подобном функционале, нужен этот протокол?
Все просто! Это для того е самого плюсика в «карму». Но есть небольшая хитрость. Вам не обязательно действительно создавать RSS канал для сайта. Вы можете просто вставить разметку протокола, а ссылку в последней строке указать несуществующую (ведущую на несуществующий канал вашего сайта).


Заключение

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


Бонус

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

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

Тег head: создание, настройка и назначение

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

Назначение тега <head>

Существуют элементы, которые обязательно должны присутствовать в коде. Технически есть только один тег, который должен присутствовать в верхней части всех документов, написанных на языке HTML — <html>-тег. Он позволяет браузеру понять, где начинается и заканчивается страница. Между открывающим и закрывающим тегом <html> помещается все содержимое HTML-страницы. Перед ним располагается только doctype. Большинство других технически важных элементов — внутри тега <head>, который располагается внутри <html> и находится в самом начале кода. Он и тег <body> являются его потомками.

Что содержится в <head>

Элемент <head> является контейнером для других элементов. В нем содержатся общие сведения (метаданные) о документе, включая его название, ссылки на скрипты и таблицы стилей. Метаданные предоставляют техническую информацию о документе, такую как название, описание, ключевые слова. Там же, где тег <head>, располагается <body>, где помещается контент сайта. Метаданные скрыты от посетителей, но используются оптимизаторами для раскрутки страницы. Они и теги heading (<h2>-<h6>) очень полезны, поскольку передают информацию веб-браузеру, а также поисковым системам об этой странице.

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

Какие элементы могут присутствовать в <head>

Следующие элементы могут находиться внутри этого тега: <title> (этот элемент является обязательным для документ HTML), <style>, <base>, <link>, <meta> <script>, <noscript>.

В теге <head> можно:

  1. Подключать внешние файлы, такие как CSS, JavaScript и т.д.
  2. Вставлять ссылки на плагины carousel, pickdate и т.д.
  3. Добавлять ссылки на библиотеки, такие как jquery, Angularjs, vuejs и т.д.
  4. Подключать фреймворки, например, bootstrap.
  5. Вставлять мета-теги, которые описывают, как будет выглядеть сайт в браузере.
  6. Здесь размещается обязательный тег <title>, который содержит заголовок страницы.

Большинство метаданных не отображаются в браузере. Только <title> обычно появляется в строке заголовка браузера. Это может быть полезно для функциональности страницы, а информацию легко проверить через «Инспектор».

Синтаксис и атрибуты

Тег <head> — парный. Что это значит? Информация в нем записывается между открывающим и закрывающим тегами как <head></head>. Что должны иметь большинство HTML-документов? Это <title> тег в <head>. Единственное исключение: если документ — это <iframe> srcdoc, или информация, которую нужно заключить в заголовок, уже имеется в протоколе более высокого уровня. Примером может служить HTML-формат электронной почты. Атрибуты могут быть добавлены в HTML-элемент, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя. Тег <head> принимает атрибут profile, где прописывается адрес профиля метаданных и другие глобальные атрибуты. Но они не являются обязательными.

Тег <title> и его особенности

Элемент <title> или заголовок страницы — один из важнейших мета-тегов в <head>. Он всегда должен присутствовать на веб-странице, иначе поисковые роботы не смогут быстро найти ее и корректно отобразить в выдаче. Помимо этого, существует еще ряд причин, почему его использование обязательно:

  1. Он отображает название сайта.
  2. Используется как основное средство для каталогизации. Если веб-страница не имеет названия, где описывается ее содержимое, поисковые системы дают ей более низкий рейтинг.
  3. Также содержимое <title> отображается как текстовая ссылка на странице выдачи, известной как SERP.
  4. Он отображается в верхней части окна браузера. Или на вкладке, описывающей страницу в браузере.
  5. Информация из заголовка страницы записывается, когда кто-то добавляет сайт в закладки. Поэтому его содержимое должно быть запоминающимся, чтобы пользователь мог легко запомнить и найти его среди других веб-страниц.
  6. Если этот тег не используется, то на сайте будет отображаться «Untitled Document». Он является заголовком страницы по умолчанию. Такой заголовок используется на многих программных платформах веб-разработки.

Поскольку тег <title> предназначен для отображения информации о сайте, каждая страница должна иметь уникальный заголовок, так как на ней находится уникальный контент. Это наиболее важная вещь для SEO. Хороший заголовок должен быть реалистичным и отображать ту информацию, которая действительно присутствует на странице. Считается, что оптимальное содержание этого тега не должно превышать 60 символов. Можно добавить больше, но поисковые системы будут отсекать содержимое, если оно превышает это число.

Метаданные в <head>

Тег <head> определяет раздел, в котором находится техническая информация HTML-документа. Метаданные содержат дополнительную информацию о веб-странице в браузере. В них можно включать информацию, такую как имя автора, программа, которая была использована для создания страницы, и ключевые слова. Наиболее важный мета-тег, который должен быть в коде страницы, — это кодировка. Мета-теги очень важны для получения хорошего рейтинга в поисковых системах. Поэтому важно создавать качественные заголовки и описания страниц.

Другие важные теги

В теге <head> могут присутствовать и другие элементы. Например, <style> используется для добавления внутренних стилей и изменения оформления документа. Однако рекомендуется в <head> подключать внешние стили — это гораздо лучше, чтобы отделить контент от его оформления. Сделать это можно при помощи тега <link>. Добавить внешнюю таблицу стилей можно при помощи следующего кода: <link href=»main. css» rel=»stylesheet»>. Для этого тега обязателен атрибут href, в котором указывается ссылка на файл со стилями CSS, а также rel, где прописывается, что это именно стили. Существуют и другие варианты использования тега <link>, например, для создания фавикона — значка для веб-страницы, который отображается в поисковой выдаче. Атрибут rel также используется по-разному и часто применяется при создании мобильных приложений.

Если добавить несколько элементов <style> и <link> в документ, они будут применяться в порядке следования. Потому важно убедиться, что они следуют друг за другом в правильном порядке, чтобы избежать неожиданностей. В языке HTML <link>-элемент используется для добавления в текущий документ внешнего ресурса и наиболее часто применяется для ссылки на стили. В теге <head> также могут подключаться скрипты. Тег <script> позволяет добавить JavaScript на сайт, но вставлять его рекомендуется незадолго до закрытия <body>. Тогда сначала будет загружаться все содержимое, а затем обрабатываться JavaScript. Это поможет увеличить скорость загрузки страницы и исключит возможность просмотра пользователем пустого экрана, пока подключается скрипт.

–&двоеточие; Элементы заголовка раздела HTML — HTML: Язык гипертекстовой разметки

HTML-элементы от

до
представляют шесть уровней заголовков разделов.

— самый высокий уровень раздела, а
— самый низкий.

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

Примечание: Атрибут align устарел; не используйте его.

  • Информация заголовка может использоваться пользовательскими агентами для автоматического построения оглавления документа.
  • Не используйте элементы заголовков для изменения размера текста. Вместо этого используйте свойство CSS font-size .
  • Избегайте пропуска уровней заголовков: всегда начинайте с

    , затем

    и так далее.
  • Используйте только один

    на страницу или представление. Он должен кратко описывать общую цель контента.

Не используйте несколько элементов

на одной странице

Использование более одного

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

Использовать только один

на страницу и вкладывать заголовки без пропуска уровней.

Все рубрики

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

 
Уровень заголовка 1

 
Уровень заголовка 2
 
 
Уровень заголовка 3
 
 
Уровень заголовка 4
 
 
Уровень заголовка 5
 
 
Уровень заголовка 6

Вот результат этого кода:

Пример страницы

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

 
Элементы заголовка
 
 
Обзор
 

Текст здесь…

 
Примеры
 
 
Пример 1
 

Текст здесь…

 
Пример 2
 

Текст здесь…

 
См. также
 

Текст здесь…

Вот результат этого кода:

Навигация

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

Не делать 
 
Уровень заголовка 1
 
 
Уровень заголовка 3
 
 
Уровень заголовка 4
Сделать 
 
Уровень заголовка 1
 
 
Уровень заголовка 2
 
 
Уровень заголовка 3
Вложение

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

  1. h2 Beetles
    1. h3 Этимология
    2. h3 Распространение и разнообразие
    3. h3 Эволюция
      1. h4 Поздний палеозой
      2. h4 Юрский период
      3. h4 Меловой период
      4. h4 Кайнозой
    4. h3 Внешняя морфология
      1. h4 Головка
        1. h5 Ротовые части
      2. h4 Грудная клетка
        1. h5 Переднегрудь
        2. h5 Птероторакс
      3. h4 Ножки
      4. h4 Крылья
      5. h4 Брюшная полость

Когда заголовки являются вложенными, уровни заголовков могут быть «пропущены» при закрытии подраздела.

  • Заголовки • Структура страницы • Учебники WAI по веб-доступности
  • MDN Понимание WCAG, пояснения к Руководству 1.3
  • Понимание критерия успеха 1.3.1 | Понимание W3C WCAG 2.0
  • MDN Понимание WCAG, пояснения к Руководству 2.4
  • Понимание критерия успеха 2.4.1 | Понимание W3C WCAG 2.0
  • Понимание критерия успеха 2.4.6 | Понимание W3C WCAG 2.0
  • Понимание критерия успеха 2.4.10 | Понимание W3C WCAG 2.0

Содержимое раздела маркировки

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

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

Пример 
 <заголовок>
  


<нижний колонтитул>

В этом примере технология чтения с экрана сообщит, что есть два