HTML Заголовки
В этой теме:
HTML Заголовки
Заголовки определяются с помощью тегов от <h1> до <h6>.
Тег <h1> определяет наиболее важный заголовок. Тег <h6> определяет наименее важный заголовок.
Пример
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Попробуйте сами »
Примечание: Браузеры автоматически добавляют отступ (margin) до и после заголовка.
Заголовки важны
Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц.
Пользователи часто просматривают страницу по её заголовкам. Важно использовать заголовки, чтобы показать структуру документа.
<h1> заголовки следует использовать для основных заголовков, а затем <h2> заголовок, менее важный <h3> и т.д.
Примечание: Используйте HTML-заголовки только для заголовков. Не используйте заголовки, чтобы сделать текст БОЛЬШИМ или жирным.
Большие заголовки
Каждый HTML заголовок имеет размер по умолчанию. Однако, вы можете указать размер для любого заголовка с атрибутом style, используя свойство CSS font-size:
HTML Горизонтальный разделитель
Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается как горизонтальный разделитель (горизонтальная линия).
Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML странице.
Пример
<h1>Это заголовок 1</h1>
<p>Это какой-то текст.</p>
<hr>
<h2>Это заголовок 2</h2>
<p>Это какой-то другой текст.</p>
<hr>
Попробуйте сами »
HTML элемент <head>
HTML элемент <head> (голова) - это контейнер для метаданных. Метаданные HTML - это данные о документе HTML. Метаданные не отображаются на странице, они нужны для служебных целей (поисковых роботов и веб-приложений).
Элемент <head> находится между тегом <html> и тегом <body>:
Пример
<!DOCTYPE html>
<html>
<head>
<title>Мой первый HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Попробуйте сами »
Примечание: Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
Как просмотреть исходный код HTML?
Вы когда-нибудь видели веб-страницу и задавались вопросом "Эй! Как они это сделали?!"
Просмотр исходного кода HTML:
Кликните правой кнопкой мыши страницу HTML и выберите "Просмотреть источник страницы" (в Chrome) или "Просмотреть источник" (в Edge), или "Исходный код страницы" (в Firefox), или "Источник страницы" (в Opera) или похожее в других браузерах. Откроется окно, содержащее исходный код HTML страницы.
Исследовать HTML элемент:
Кликните правой кнопкой мыши элемент (или пустую область на странице) и выберите "Просмотреть код" или "Исследовать элемент" чтобы увидеть, из каких элементов состоит страница (вы увидите и HTML, и CSS). Вы также можете редактировать HTML или CSS код на лету в открывшейся панели "Элементы или стили".
HTML Упражнения
HTML Справочник тегов
Справочник тегов W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.
Подробнее о тегах и атрибутах HTML вы узнаете в следующих главах этого учебника.
| Тег | Описание |
|---|---|
| <html> | Определяет начало загрузки HTML документа |
| <body> | Определяет тело документа |
| <head> | Контейнер для всех элементов головы страницы (название, скрипты, стили, метаинформация и др.) |
| <h1> до <h6> | Определяет HTML заголовки |
| <hr> | Определяет тематическое изменение в содержании |
Для получения полного списка всех доступных тегов HTML, посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Что такое HTML-заголовки?
- Зачем нужны HTML-заголовки?
- Какие бывают заголовки на HTML-страницах?
- Какой тег определяет самый большой и самый маленький заголовок?
- Что такое горизонтальный разделитель на HTML-странице?
- Какой тег определяет горизонтальный разделитель на HTML-странице?
- Для чего необходим HTML-элемент head?
- Где на веб-странице находится элемент head?
- Как посмотреть исходный HTML-код в браузере?
- Как исследовать HTML-элемент с помощью браузера?
