Заголовок страницы

Html head — используемые элементы, правильные мета теги, примеры, код

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

      
Содержимое страницы
  

Как видно выше, тег содержит метаданные о странице, а тег — непосредственно содержимое страницы. Информация внутри не видна пользователю (за исключением , но об этом позже), зато активно используется:

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

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

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

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

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

      body   

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

Тег

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

Кроме того, поисковые системы очень часто используют значение тега в качестве заголовка поискового сниппета, поэтому этот тег — абсолютный “мастхэв”.

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

• Следите за количеством символов (лучше не больше 50-60)
• Не борщите с ключевиками
• Помещайте основную ключевую фразу в начало заголовка

Тег

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

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

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

• charset — кодировка страницы
• name — название метаданных, которые содержатся в данном теге
• http-equiv — формат ответа сервера
• content — само значение

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

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

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

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

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

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

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

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

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

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

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

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

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

В HTML5 большая часть meta http-equiv не поддерживается ( set-cookie , expires ).

Тег

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

также не имеет закрывающего тега и его параметры передаются в виде атрибутов.

Ниже приведены наиболее распространенные примеры использования тега :

Вот еще несколько примеров использования

Тег

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

Этот тег может быть использован в разметке страницы неоднократно, и его можно помещать не только в , но и в .

  body  #container 
Lorem ipsum dolor sit amet
 
 

Тег

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

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

Тег

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

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

Тег

Этот тег используется для указания базового URL для всех относительных путей на странице и/или дефолтного значения атрибута target ссылок на странице.

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

Бонус: Микро разметка Open Graph для шаринга

Социальные кнопки для шаринга в соц. сетях и мессенджерах уже давно стали практически неотъемлемой частью современного интернета и сейчас редко встретишь сайт, на котором их нет. Пользователи с удовольствием делятся интересным и/или полезным контентом в своих профилях, тем самым привлекая дополнительную аудиторию.

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

По сути Open Graph это набор мета-тегов с атрибутом property , в которых можно указать заголовок страницы, ее краткое описание, превью-изображение, язык, название сайта и т.д.

Хотя изначально разметка Open Graph создавалась для Facebook, сейчас ее понимают большинство соц. сетей и мессенджеров, хотя интерпретируют ее немного по-своему.

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

В заключение хочу подытожить все вышесказанное.

Тег является обязательным структурным элементом любого HTML-документа. Это своеобразный контейнер для тегов, которые описывают то, что находится в документе и как это нужно выводить ( title , meta , style , base ). Кроме того, в подключаются скрипты и стили, а также другие файлы необходимые для корректной отрисовки страницы ( link , script ).

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

Источник

HTML — The Head Element

The HTML element is a container for the following elements: , , , , , and .

The HTML Element

The element is a container for metadata (data about data) and is placed between the tag and the tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML Element

The element defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.

The element is required in HTML documents!

The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

Example

The content of the document.

The HTML Element

The element is used to define style information for a single HTML page:

Example

The HTML Element

The element defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets:

Example

Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML Element

The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples

Define the character set used:

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

Setting the viewport to make your website look good on all devices:

Example

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

The HTML Element

The element is used to define client-side JavaScripts.

The following JavaScript writes «Hello JavaScript!» into an HTML element with >

Example

Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML Element

The element specifies the base URL and/or target for all relative URLs in a page.

The tag must have either an href or a target attribute present, or both.

There can only be one single element in a document!

Example

Specify a default URL and a default target for all links on a page:

Chapter Summary

• The element is a container for metadata (data about data)
• The element is placed between the tag and the tag
• The element is required and it defines the title of the document
• The element is used to define style information for a single document
• The tag is most often used to link to external style sheets
• The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
• The element is used to define client-side JavaScripts
• The element specifies the base URL and/or target for all relative URLs in a page

HTML head Elements

Tag	Description
	Defines information about the document
	Defines the title of a document
	Defines a default address or a default target for all links on a page
	Defines the relationship between a document and an external resource
	Defines metadata about an HTML document
	Defines a client-side script
	Defines style information for a document

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник