HTML — главный элемент
Элемент HTML <head>является контейнером для следующих элементов:
<title>, <style>,
<meta>, <link>, <script>и <base>.
HTML-элемент <head>
Элемент <head>является контейнером для метаданных (данных о данных) и размещается между <html>тегом и <body>тегом.
Метаданные HTML — это данные о HTML-документе. Метаданные не отображаются.
Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
HTML-элемент <title>
Элемент <title>определяет заголовок документа. Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или на вкладке страницы.
Элемент <title>обязателен в документах HTML!
Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка отображения страниц в результатах поиска.
Элемент <title>:
- определяет заголовок на панели инструментов браузера
- предоставляет заголовок для страницы, когда она добавляется в избранное
- отображает заголовок страницы в результатах поиска
Итак, постарайтесь сделать заголовок максимально точным и осмысленным!
Простой HTML-документ:
Пример
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML-элемент <style>
Элемент <style>используется для определения информации о стиле для одной HTML-страницы:
Пример
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
HTML-элемент <link>
Элемент <link>определяет связь между текущим документом и внешним ресурсом.
Тег <link>
чаще всего используется для ссылки на внешние таблицы стилей:
Пример
<link rel="stylesheet" href="mystyle.css">
Совет. Чтобы узнать все о CSS, посетите наш учебник по CSS .
HTML-элемент <meta>
Элемент <meta>обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра.
Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент или перезагружать страницу), поисковыми системами (ключевые слова) и другими веб-сервисами.
Примеры
Определите используемый набор символов:
<meta charset="UTF-8">
Определите ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, JavaScript">
Определите описание вашей веб-страницы:
<meta name="description" content="Free Web tutorials">
Определить автора страницы:
<meta name="author" content="John Doe">
Обновлять документ каждые 30 секунд:
<meta http-equiv="refresh" content="30">
Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Пример <meta>тегов:
Пример
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Настройка области просмотра
Область просмотра — это видимая пользователем область веб-страницы. Оно зависит от устройства — на мобильном телефоне оно будет меньше, чем на экране компьютера.
Вы должны включить следующий <meta>элемент на все свои веб-страницы:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Это дает браузеру инструкции о том, как управлять размерами и масштабированием страницы.
Эта width=device-widthчасть устанавливает ширину страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).
Эта initial-scale=1.0часть устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра:
Совет: Если вы просматриваете эту страницу с телефона или планшета, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
HTML-элемент <script>
Элемент <script>используется для определения сценариев JavaScript на стороне клиента.
Следующий JavaScript пишет «Hello JavaScript!» в элемент HTML с id="demo":
Пример
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Совет. Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript .
HTML-элемент <base>
Элемент <base>указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.
Тег <base>должен иметь либо атрибут href, либо целевой атрибут, либо оба.
В документе может быть только один единственный <base>
элемент!
Пример
Укажите URL-адрес по умолчанию и цель по умолчанию для всех ссылок на странице:
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Краткое содержание главы
- Элемент
<head>является контейнером для метаданных (данные о данных) - Элемент
<head>помещается между<html>тегом и<body>тегом - Элемент
<title>является обязательным и определяет заголовок документа. - Элемент
<style>используется для определения информации о стиле для одного документа. - Тег
<link>чаще всего используется для ссылки на внешние таблицы стилей . - Элемент
<meta>обычно используется для указания набора символов, описания страницы, ключевых слов, автора документа и настроек области просмотра. - Элемент
<script>используется для определения сценариев JavaScript на стороне клиента . - Элемент
<base>указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.
Элементы заголовка HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .