HTML Заголовки
Заголовок — это название в начале страницы или раздела книги. Очень важно использовать различные типы заголовков для структурирования контента веб-страницы. Заголовки помогают поисковым системам понимать и индексировать структуру веб-страницы.
Теги заголовков
В HTML существует 6 уровней заголовков: <h1>, <h2>, <h3>, <h4>, <h5>, и <h6>.
Теги <h1> - <h6> используются для обозначения заголовков в зависимости от их важности. Тег <h1> обозначает самый важный заголовок веб-страницы, а <h6> — наименее важный и самый маленький.
Пример использования HTML-тегов заголовков <h1> - <h6>:
Как использовать HTML-теги <h1>-<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Важность заголовков
- HTML-заголовки выделяют важные темы и структуру документа, тем самым повышая вовлеченность пользователей.
- Используйте только один тег
<h1>на любой веб-странице. Тег должен описывать содержание вашей страницы, а также содержать ключевое слово для улучшения позиций в Google. - Поисковые системы используют заголовки для индексации структуры и содержимого веб-страницы.
Размер заголовков
Вы можете изменить размер заголовков по умолчанию. Установите размер любого заголовка с помощью свойства CSS font-size:
Пример изменения размера заголовка с помощью свойства font-size:
Как стилизовать HTML-тег <h1> с помощью свойства CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Важные примечания
- Не используйте теги заголовков для увеличения размера текста или выделения его жирным. Вместо этого используйте свойства CSS, такие как font-weight и font-size. Помните, что поисковые системы используют заголовки для структурирования контента.
- Не пропускайте уровни заголовков. Используйте
<h1>как основной заголовок веб-страницы, за ним следуют заголовки<h2>, затем менее важные<h3>и т. д. - Избегайте использования
<h1>более одного раза на странице.
Горизонтальные линии в HTML
Тег <hr> определяет тематическое изменение между элементами на уровне абзацев в HTML-странице. Элемент <hr> используется для разделения контента на HTML-странице:
Пример заголовков, разделенных элементом <hr>:
Пример использования элемента HTML <hr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h2>This is heading 2</h2>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h3>This is heading 2</h3>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Элемент HTML Head
Элемент HTML <head> содержит метаданные (название документа, набор символов, стили, ссылки, скрипты), специфическую информацию о веб-странице, которая не отображается пользователю.
Метаданные предоставляют браузерам и поисковым системам техническую информацию о веб-странице.
Пример использования элемента <head>:
Пример использования элемента HTML <head>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<p>HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>Что такое Header?
Не путайте тег HTML header с тегом HTML heading, поскольку header — это часть текста, повторяющаяся в верхней части страницы. Heading — это заголовок или подзаголовок, отображаемый на веб-странице.
Практика
Какие из следующих утверждений о заголовках HTML верны?