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

Что можно положить в тег

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

   . для обеспечения правильного отображения документов. Любой другой элемент заголовка должен идти *после* этих тегов. -->  

meta charset — определяет кодировку веб-сайта, стандартом является utf-8 .

meta name=»viewport» — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования.

Элементы

Допустимые элементы включают base , link , meta , noscript , script , style , template и title .

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

              , то может содержать только метаданные --> 

Мета

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

Ссылки

Иконки

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook. Подробнее о разметке Facebook Open Graph

Twitter Card

С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт. Подробнее о Twitter Cards

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. Подробнее о возможностях конфиденциальности Twitter.

Читайте также:  CSS Button Style

Schema.org

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу .

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

Facebook Instant Articles

OEmbed

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

Браузеры / Платформы

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

Минимально необходимая разметка xml для browserconfig.xml :

Браузеры (китайские)

360 Browser

QQ Mobile Browser

UC Mobile Browser

Ссылки на приложения

Другие ресурсы

Связанные проекты

  • Atom HTML Head Snippets — Atom пакет для HEAD сниппетов
  • Sublime Text HTML Head Snippets — пакет Sublime Text для HEAD сниппетов
  • head-it — CLI интерфейс для HEAD сниппетов
  • vue-head — Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

​ Переводы

​ Contributing

Откройте issue или PR , чтобы предложить изменения или дополнения.

​ Contributors

Посмотрите на всех супер классных авторов ​

​ Автор оригинального репозитория

Josh Buchea

​ Поддержка

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

Всем кто помогает, спасибо! ​

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод на Хабре, чтобы поделиться с русскоязычным сообществом полезным материалом.

Источник

: The Document Metadata (Header) element

The HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.

Note: primarily holds information for machine processing, not human-readability. For human-visible information, like top-level headings and listed authors, see the element.

Attributes

This element includes the global attributes.

profile Deprecated Non-standard

The URIs of one or more metadata profiles, separated by white space.

Читайте также:  ", "

Examples

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width" /> title>Document titletitle> head> html> 

Technical summary

If the document is an srcdoc document, or if title information is available from a higher level protocol (like the subject line in HTML email), zero or more elements of metadata content.

Otherwise, one or more elements of metadata content where exactly one is a element.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Tag

The tag contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user. Metadata provides browsers and search engines with technical information about the web page.

The includes the following elements:

  • The tag defines the title of a web page (required). It may be confused with the tag, but they are different. The tag specifies the title of page content, whereas the tag is metadata representing the title of the entire HTML content and not its content.
  • The tag contains CSS code that defines how HTML elements should be rendered in a browser.
  • The tag defines an absolute (base) URL for all relative URLs.
  • The tag defines the relationship between the current HTML document and the resource to which it refers, or contains a link to an external style sheet. It can have two attributes: rel=»stylesheet» and href .
  • The tag provides additional information (metadata) about HTML document. The of a page can include different kinds of elements that may contain name and content attributes.
  • The tag contains a script (generally JavaScript), or reference to an external file with scripts.This element may not be included in . Sometimes, it is better to put it at the bottom of . The element may seem empty, but it’s not.
  • The tag defines an alternate text, which is displayed, if the browser doesn’t support scripts or scripts are disabled by the user.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of the HTML tag used with the and tags:

html> html> head> title>Title of the document title> style> body< background-color: #d3d3d3; > p< color: #1c87c9; > a< color: red; > style> head> body> p>Paragraph p> a href="#">Link a> body> html>

In the given example, the tag is used with the and tags. The tag defines the title of the document, which is displayed in the browser window. In the tag the style of the document is defined: the background of the document is orange, the text in the paragraphs marked with the tag is blue, and the links within the tag are pink.

Example of the HTML tag used with the tag:

html> html> head> link rel="stylesheet" type="text/css" href="css/style.css"> head> body> p>The content of the page p> body> html>

Result

head tag example 2

In this example, we have provided a link to the document style.css in the CSS folder.

Example of the HTML tag used with the tag:

html> html> head> meta name="title" content="HTML and CSS Books"> meta name="description" content="HTML and CSS Basics for Beginners"> meta http-equiv="refresh" content="30"> head> body> p>The content of the page p> body> html>

Attributes

Attribute Value Description
profile URL Defines the URL of metadata.
Not supported in HTML5.
media media_query Specifies what media/device the media resource is optimized for.
New in HTML5.
type text/css Specifies the media type of the tag.
New in HTML5.

The tag supports the Global Attributes and the Event Attributes.

Источник

Оцените статью