Тег meta содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты meta:
charset – Задает кодировку документа.
content – Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv – Предназначен для конвертирования метатега в заголовок HTTP.
name – Имя метатега, также косвенно устанавливает его предназначение.
<head> <meta charset="UTF-8"> <meta name="description" content="Это описание веб-страницы"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Иван Иванов"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Моя тестовая страница</title> </head>
<meta name="twitter:title" content="MDN Web Docs" />
Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _(User eXperience, UX)_:
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png" /> <meta property="og:description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox." /> <meta property="og:title" content="MDN Web Docs" />
Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <!-- Для iPad 3 с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- Для iPhone с Retina-экраном высокого разрешения: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- Для iPad первого и второго поколения: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: --> <link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- Для других случаев - обычный favicon --> <link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png" />
Подключение CSS и JavaScript
<link rel="stylesheet" href="my-css-file.css" /> <script src="my-js-file.js"></script>
Встроенные CSS и JavaScript
<script> .............. </script> <style> ................. </style>
Основной язык HTML страницы
<html lang="ru"> <html lang="en-US">
