Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <meta>



Пример

Описание метаданных в HTML документе:

<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">
</head>
Попробуйте сами »


Определение и использование <meta>

Тег <meta> определяет метаданные о документе HTML. Метаданные - это данные (информация) о данных.

Теги <meta> всегда находятся внутри элемента <head>, и обычно используются для указания набора символов, описания страницы, ключевые слова, автор документа и настройки видового экрана.

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

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

Существует метод, позволяющий веб дизайнерам взять под свой контроль видовое окно (видимую область веб страницы пользователя), через тег <meta> (Смотреть "Настройка видового экрана" пример ниже).


Поддержка браузеров <meta>

Элемент
<meta> Да Да Да Да Да

Атрибуты <meta>

Атрибут Значеие Описание
charset character_set Указывает кодировку символов для HTML документа
content text Указывает значение, связанное с атрибутом http-equiv или name
http-equiv content-security-policy
content-type
default-style
refresh
Предоставляет HTTP заголовок для информации/значения атрибута content
name application-name
author
description
generator
keywords
viewport
Задает имя для метаданных

Глобальные атрибуты <meta>

Тег <meta> также поддерживает Глобальные атрибуты в HTML.


Еще примеры <meta>

Определение ключевых слов для поисковых систем:

<meta name="keywords" content="HTML, CSS, JavaScript">

Определите описание вашей веб страницы:

<meta name="description" content="Бесплатные веб уроки для HTML и CSS">

Определите автора страницы:

<meta name="author" content="Щипунов Андрей">

Документ обновляется каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Настройка окна просмотра, чтобы ваш сайт хорошо выглядел на всех устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Настройка видового экрана <meta>

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

Вы должны включить следующее, элемент<meta> на всех ваших веб страницах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это дает браузеру инструкции по управлению размерами и масштабированием страницы.

Часть width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Вот пример веб страницы без мета-тега viewport и той же веб страницы с мета-тегом viewport:

Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.


Подробнее о видовом окне вы можете прочитать в нашем разделе Адаптивный веб дизайн - Учебник по видовому экрану


Связные страницы <meta>

HTML учебник: HTML Глава

HTML DOM reference: Объект meta


Настройки CSS по умолчанию <meta>

Нет.