Заголовок в HTML
HTML-элемент <head>
Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.
Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.
К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.
HTML-элемент <title>
Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.
Элемент <title>:
- Задаёт заголовок вкладки в браузере;
- Задаёт заголовок страницы, добавленной в «Избранное»;
- Выводит заголовок страницы в выдаче поисковой системы.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Содержимое документа…
</body>
</html>HTML-элемент <style>
Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:
Пример:
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>HTML-элемент <link>
Элемент <link> предназначен для указания ссылок на внешние файлы CSS.
Пример:
<link rel="stylesheet" href="mystyle.css">HTML-элемент <meta>
Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.
Метаданные используются браузерами как инструкция по выводу данных, поисковыми системами (ключевые слова), а также другими веб-сервисами.
Определяем используемую кодировку:
<meta charset="UTF-8">Вносим описание веб-страницы:
<meta name="description" content="Free Web tutorials">Указываем ключевые слова для поисковых систем:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">Указываем автора материала:
<meta name="author" content="John Doe">С помощью шапки сайта и ее HTML кода устанавливаем обновление страницы каждые 30 секунд:
<meta http-equiv="refresh" content="30">Пример метатегов:
Пример:
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">Настройка области просмотра
В HTML5 с помощью тега <meta> можно контролировать область просмотра (viewport) в окне браузера.
Область просмотра – это часть веб-страницы, видимая для пользователей. Она может отличаться в зависимости от используемого устройства – то есть, на мобильных устройствах она будет меньше, чем на ПК:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Этот элемент шапки сайта HTML даёт браузеру инструкции о размерах области просмотра.
Фрагмент width=device-width отвечает за ширину страницы, которая должна соответствовать ширине экрана устройства.
Фрагмент initial-scale=1.0 устанавливает исходный уровень увеличения при загрузке страницы в браузере.
Взгляните на пример веб-страницы без метатега viewport, и той же страницы с указанным тегом viewport.
Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:
HTML-элемент <script>
Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит "Hello JavaScript!" в HTML-элемент через id="demo":
Пример:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>HTML-элемент <base>
Элемент определяет базовый URL и цель для всех ссылок на странице:
Пример:
<base href="https://www.w3schools.com/images/" target="_blank">Опускаем <html>, <head> и <body>?
Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.
Пример, как сделать шапку сайта HTML
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).
Элементы HTML Head
- <head> Предоставляет информацию о документе.
- <title> Задаёт заголовок документа.
- <base> Определяет основной адрес и цель для всех ссылок на странице.
- <link> Отвечает за связь между документом и внешними ресурсами.
- <meta> Определяет метаданные документа.
- <script> Позволяет использовать скрипты на стороне клиента.
- <style> Определяет стилизацию документа.