Head HTML уроки для начинающих академия
Элемент HTML <head>
Элемент <head> является контейнером для метаданных (данные о данных) и помещается между тегом <html> и тегом <body>.
Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Метаданные обычно определяют название документа, набор символов, стили, ссылки, сценарии и другую мета-информацию.
Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.
Элемент HTML <Title>
Элемент <title> определяет название документа и является обязательным для всех документов HTML/XHTML.
Элемент <title>:
- Определяет заголовок на вкладке «Обозреватель»
- предоставляет заголовок страницы при добавлении в избранное
- Отображает заголовок страницы в результатах поисковой системы
Простой HTML-документ:
Пример
<head>
<title>Page
Title</title>
</head>
<body>
The content of the document……
</body>
</html>
Элемент HTML <Style>
Элемент <style> используется для определения сведений о стиле для одной страницы HTML:
Пример
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>
Элемент HTML <Link>
Элемент <link> используется для связывания с внешними таблицами стилей:
Пример
<link rel=»stylesheet» href=»mystyle.css»>
Совет: Чтобы узнать все о CSS, посетите наш Учебник CSS.
Элемент HTML <meta>
Элемент <meta> используется для указания, какой набор символов используется, описание страницы, ключевые слова, автор и другие метаданные.
Метаданные используются браузерами (как отображать содержимое), поисковыми системами (ключевыми словами) и другими веб-службами.
Определите используемый набор символов:
Определите описание веб-страницы:
<meta name=»description» content=»Free Web tutorials»>
Определите ключевые слова для поисковых систем:
<meta name=»keywords» content=»HTML, CSS, XML, JavaScript»>
Определите автора страницы:
<meta name=»author» content=»html5css.ru»>
Обновлять документ каждые 30 секунд:
<meta http-equiv=»refresh» content=»30″>
Пример <meta> тегов:
Теги HTML, HEAD, TITLE.
Для создания страниц в интернете используется специальный язык, который носит название HTML (HiperText Markup Language – язык гипертекстовой разметки). В этом языке основным элементом является тег, который заключается в угловые скобки <тег>. В большинстве случаев, тег должен иметь закрывающий тег, который также заключается в угловые скобки, кроме того, перед названием тега ставится слеш (косая черта) .
Например, тег <i> говорит о том, что текст, находящийся внутри этого тега, должен иметь курсивное начертание. Запись имеет вид: <i>Текст.</i> В результате такой записи, браузер выведет на экран слово «Текст» курсивом.
Теги могут иметь атрибуты, которые позволяют сделать внешний вид страницы более разнообразным. Все теги и их атрибуты мы разберем в процессе изучения языка HTML.
Для создания WEB-страниц нам понадобится обычный текстовый редактор, например Notepad (блокнот), который присутствует, по умолчанию, во всех операционных системах семейства Windows. Я в своих примерах буду использовать текстовый редактор AkelPad, который имеет подсветку синтаксиса. Вы можете скачать его здесь.
Теги HTML, HEAD, TITLE.
Наберем в текстовом редактере несколько строк, чтобы на примере увидеть синтаксис языка HTML.
<html>
<head>
<title>WEB-страница<title/>
</head>
</html>
Тег <html> является главным тегом любой WEB-страницы. Каждая WEB-страница начинается этим тегом и заканчивается закрывающим тегом </html>.
Тег <head> открывает заголовочную часть WEB-страницы. Данный тег требует закрывающего тега </head>. Внутри этих тегов располагается служебная информация, которая не отображается на экране, но играет важную роль при индексирования страницы поисковыми системами, а также помогает браузеру при обработке страницы.
Одним из тегов, находящихся внутри тега, является тег
. Внутри этого тега находится название страницы. Это название отображается на вкладке браузера (при использовании Internet Explorer название отображается на вкладке и вверху окна браузера). Тег<title>помимо своей основной функции (показать посетителю сайта название вашей страницы) имеет вспомогательные функции. Например, при сохранении данной страницы в раздел «Закладки» вашего браузера в качестве ссылки будет использоваться текст, заключенный в теги<title><title><title>. Данный тег используется вместе с закрывающим тегом </title>. Внутри тегов <title><title/> помещается название страницы. Это название отображается на вкладке браузера (при использовании Internet Explorer название отображается на вкладке и вверху окна браузера). Тег <title> помимо своей основной функции (показать посетителю сайта название вашей страницы) имеет вспомогательные функции. Например, при сохранении данной страницы в раздел «Закладки» вашего браузера в качестве ссылки будет использоваться текст, заключенный в теги <title><title/>. Кроме того, поисковые системы (Yandex, Google и др.), выводя на экран результаты поиска по тому или иному запросу, используют этот текст в качестве заголовка результата поиска. Поэтому посетители, прежде всего, видят текст, заключенный в теги <title><title/> и решают, заходить на данный сайт или зайти на другой сайт, где название страницы более соответствует их запросу.После этого запустим данный файл с помощью любого браузера, установленного на вашем компьютере. Например, откроем данную страницу с помощью браузера Opera.
Как видите, на вкладке браузера отобразилось название нашей странички. Использование тега <title> носит характер настоятельной рекомендации. Вы можете не применять его при создании своей WEB-страницы. Причем браузеры все равно отобразят эту страницу. В браузере на вкладке будет отображаться полный URL-адрес страницы (Opera, IE, Mozilla Firefox). Если Вы желаете создайть свой сайт, воспользуйтесь услугами профессионалов, которые делают профессиональное создание сайтов в Ростове-на-Дону по оптимальным и доступным ценам.
Тег <title>имеет важное значение при поисковой оптимизации Вашего сайта. Если Вы продвигаете какую-либо страницу своего сайта по определенному поисковому запросу, то название этой страницы должно полностью соответствовать этому поисковому запросу.
носит характер настоятельной рекомендации. Вы можете не применять его при создании своей WEB-страницы. Причем браузеры все равно отобразят её. В браузере на вкладке будет отображаться полный URL-адрес страницы (Opera, IE, Mozilla FireТег HTML заголовок страницы как правильно заполнять
Тег <title> определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег <title> с глобальным атрибутом title — это разные вещи.
Элемент находится в <head> области страницы (подробнее про раздел head). Можно использовать только один тег title на странице.
Синтаксис
<title>Заголовок HTML документа</title>Содержимое тега заголовка <title> используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования <title> в HTML коде
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<!-- контент страницы -->
</body>
</html>Поддержка браузерами
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег <title> нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег <title> поспособствует поднятию позиции страницы сайта при ранжировании.
Многие CMS поддерживают автогенерацию <title> заголовка. Обычно при этом используется заголовок страницы <h2> и название раздела сайта (например, для страницы товара интернет магазина: название товара из h2 и категория товара). Хотя эта схема не является идеальной, ее использование оправдано во многих случаях.
Вот пример тега title для этой страницы (один из вариантов):
<title>Тег title HTML заголовок страницы - справочник HTML тегов Guru Weba</title>Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Определяет заголовок документа. Элемент <title> не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 1). Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Рис. 1. Вид заголовка в браузере Firefox
Синтаксис
<head>
<title>Заголовок</title>
</head>Закрывающий тег
Обязателен.
Атрибуты
Нет.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>htmlbook.ru - Как правильно писать заголовок страницы</title>
</head>
<body>
<p>...</p>
</body>
</html>Примечание
Тег <title> выполняет множество задач, как прямо, так и косвенно. Ниже описано какую роль выполняет заголовок страницы.
- По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
- Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? » < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
- При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
- В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.