Как сделать заголовок в HTML?
Шапка сайта HTML является контейнером для метаданных, который размещается между тегами <html> и <body>. Метаданные – это информация о HTML-документе. Они не выводятся на страницу.
Метаданные определяют заголовок документа, кодировку, стилизацию, а также используются для размещения ссылок и другой информации.
К метаданным относятся следующие теги: <title>, <style>, <meta>, <link>, <script>, и <base>.
Тег <title> отвечает за заголовок документа, и обязателен для всех документов HTML/XHTML.
Элемент <title>:
- Задаёт заголовок вкладки в браузере;
- Задаёт заголовок страницы, добавленной в «Избранное»;
- Выводит заголовок страницы в выдаче поисковой системы.
Пример:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> Содержимое документа… </body> </html>
Посмотреть демо
Перед тем, как сделать шапку сайта HTML, нужно знать, что тег <style> используется для стилизации отдельной веб-страницы:
Пример:
<style>
body {background-color: powderblue;}
h2 {color: red;}
p {color: blue;}
</style>Посмотреть демо
Элемент <link> предназначен для указания ссылок на внешние файлы CSS.
Пример:
<link rel="stylesheet" href="mystyle.css">
Посмотреть демо
Перед тем, как написать шапку сайта в HTML, помните, что <meta> используется для указания кодировки, описания страницы, перечисления ключевых слов, автора материала и других метаданных.
Метаданные используются браузерами как инструкция по выводу данных, поисковыми системами (ключевые слова), а также другими веб-сервисами.
Определяем используемую кодировку:
Вносим описание веб-страницы:
<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.
Совет: если вы читаете статью на смартфоне или планшете, можете перейти по ссылкам, приведённым под картинками:
Пример без метатега viewport
Пример с метатегом viewport
Тег шапки сайта HTML CSS позволяет выполнять код JavaScript на стороне клиента. В примере ниже Javascript выводит «Hello JavaScript!» в HTML-элемент через id=»demo»:
Пример:
<script>
function myFunction {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>Посмотреть демо
Элемент определяет базовый URL и цель для всех ссылок на странице:
Пример:
<base href="https://www.w3schools.com/images/" target="_blank">
Посмотреть демо
Согласно стандарту HTML5, теги <html>, <body> и <head> можно опустить.
<!DOCTYPE html> <title>Page Title</title> <h2>This is a heading</h2> <p>This is a paragraph.</p>
Посмотреть демо
Примечание: Мы не рекомендуем опускать теги <html> и <body>. Это может негативно сказаться на работе DOM и XML, а также вызвать ошибки отображения веб-страниц в устаревших браузерах (например, IE9).
- <head> Предоставляет информацию о документе.
- <title> Задаёт заголовок документа.
- <base> Определяет основной адрес и цель для всех ссылок на странице.
- <link> Отвечает за связь между документом и внешними ресурсами.
- <meta> Определяет метаданные документа.
- <script> Позволяет использовать скрипты на стороне клиента.
- <style> Определяет стилизацию документа.
Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, дизлайки, подписки!
Пожалуйста, оставьте свои мнения по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!
Валентин Сейидовавтор-переводчик статьи «HTML Head»
HTML элемент title. Заголовок страницы.
Сейчас давайте рассмотрим очень важный элемент, который должен присутствовать на веб-странице – это элемент title.
title – это элемент страницы, который также относится к метаданным.
Начнем с того, что элемент <title> должен располагаться внутри элемента head. Основная его задача это задание заголовка для веб-страницы.
Где вы можете видеть заголовки веб-страниц?
Есть несколько случаев:
1) В имени закладки страницы в браузере.
2) В результатах поисковой выдачи от поисковых машин.
Т.е. заголовок веб-страницы – это ее имя.
Давайте прямо сейчас добавим заголовок для веб-страницы, в заготовку, которую мы создавали в прошлых уроках.
<!doctype html> <html> <head> <title>Пример заголовка страницы</title> </head> </html>
Для того, чтобы увидеть результат, давайте откроем полученную веб-страницу в браузере и убедимся, что все работает.
Пока страница еще пустая, но заголовок в ней уже изменился.
В спецификации сказано, что заголовок у документа должен быть даже тогда, когда у документа нет никакого содержимого.
Этот как раз наш текущий пример.
Кроме того, нужно иметь в виду, что в документе должен быть только один элемент title. Так писать не правильно:
<!doctype html> <html> <head> <title>Пример заголовка страницы</title><title>Пример заголовка страницы2</title></head> </html>
В разных браузерах могут возникнуть конфликты, и ничто не может гарантировать, что у Вас будет отображаться нужный заголовок в нужном месте.
Заголовок веб-страницы– это очень важный элемент, от которого могут зависеть позиции страницы в поисковых системах и удобство для пользователя. Поэтому стоит всегда уделять этому повышенное внимание.
Добавьте элемент title к вашей веб-странице прямо сейчас и проверьте результат в браузере.
Заголовки страниц TITLE страницыПод заголовками страниц (статей) понимается то, что показывается в HTML-теге TITLE (тайтл). Не следует путать заголовок страницы с HTTP-заголовком — это совершенно разные вещи! Поговорим о заголовках: как правильно написать заголовки статей TITLE, какую роль играет хорошо составленный заголовок страницы в поисковом продвижении сайта и почему поисковые системы придают такое большое значение заголовкам статей при ранжировании в выдаче. О заголовках: для чего нужны заголовки страниц TITLE?Тэг title определяет заголовок документа, это элемент HTML-кода страницы, который и создает ту надпись, которая появляется в заголовке окна веб-браузера, когда посетитель просматривает страницу сайта. Заголовочный тэг TITLE страницы и заголовок окна. Элемент TITLE не входит в документ и не отображается напрямую на веб-странице. Разрешено применять только один тег title на страницу и помещать его в контейнер HEAD. В ОС Windows текст заголовка тайтл отображается в верхнем окне браузера (см. пример ниже). Например, для этой статьи виден заголовок страницы, состоящий из четырех фрагментов, разделенных знаком «-«:
Первые три части заголовка окна были указаны при написании страницы в заголовочном HTML-теге тайтл, а последняя сформирована браузером. Типовой формат заголовка страницы на web-сайтах выглядит следующим образом: HTML-тэг TITLE — заголовок страницы, а заголовочный тег h2 — заголовок статьи ХТМЛ-тег тайтл ставится одним из первых в разделе HEAD, за ним обычно следуют мета-тэги DESCRIPTION (описание) и KEYWORDS (ключевые слова). Следует различать заголовки страниц тайтл и заголовки статей h2 (или другие заголовочные теги h3…H6), у них немного разное предназначение. Роль заголовков страниц TITLE для раскрутки сайтаСтрока заголовка TITLE — это самый важный из факторов ранжирования на страницах, позволяющий занять высокие позиции в поисковой выдаче. Однако при интуитивной понятности оформления тега title эффективное
Многие системы управления контентом (CMS) генерируют заголовок раздела, статьи, комментария к ней автоматически, на основании данных, предоставленных веб-мастером. Это мощный инструмент, который при умелом обращении позволяет достичь прекрасных результатов в ранжировании, а при неумелом — больно стукнет веб-мастера по лбу. Дело в том, что с точки зрения поисковых систем функции заголовка сайта, раздела или статьи на странице — максимально точно описывать контент. Нетрудно догадаться, как они проверяют, насколько хорошо заголовок к тексту документа соответствует его содержанию: если в заголовке сообщения использованы слова, которых нет в самом тексте статьи — значит, плохо выполняет свою функцию и его не надо так уж сильно учитывать. Если же текст заголовка без малейших изменений щедро раскидан по странице, и при этом отдельные слова из него встречаются крайне редко — значит, это самый настоящий спам, ибо люди так не пишут, и это достаточный повод наложить пессимизацию на всю страницу. Создание заголовков к тексту: структура заголовкаСоздать заголовок к тексту, который был бы интересен для посетителей и любим поисковиками — занятие сродни хождению по лезвию бритвы. Помимо сказанного выше, существует не меньше десятка подводных камней при создании заголовка для страницы. Ввиду особой важности тайтлов мы посвятили им целый раздел, где в статьях разбираются все тонкости составления TITLE. Задача осложняется тем, что по структуре заголовки могут и должны отличаться, исходя из своего предназначения. Например, главный заголовок сайта разумно оформить несколько иначе, чем, например, заголовок комментария к статье или английские рекламные заголовки-слоганы. Заголовочный тег тайтл и заголовки разделов статьи надо создавать с учетом друг друга. поэтому мы сейчас немного отвлечемся от темы и перечислим примеры видов заголовков, с которыми приходится иметь дело веб-мастерам, и их основные функции. Виды заголовков и основные функции заголовка каждого вида.Как мы уже говорили, структура заголовка во многом определяется теми функциями, для выполнения которых он создается. Пройдемся по заголовкам, часто встречающимся на страницах сайтов Интернета.
Какого бы вида не был HTML-заголовок к странице, важно помнить простое правило: слова в заголовке «оттягивают» на себя вес остальных частей контента, поэтому лучше не создать заголовок для текста внутри страницы вообще, чем написать его совершенно «левыми» словами. Написание HTML-заголовка: не удачные примеры заголовков.Возвращаясь к заголовкам сайта — а это важнейший из всех примеров тайтлов, поскольку характеризует главную на web-ресурсе страницу, — в заключении приведем примеры вопиюще безграмотных с точки зрения поисковой оптимизации HTML-заголовков сайта: «Компания Вася Пупкин LTD: поставка товаров. Доставка по всему миру», или «Главная страница COM-SEO.RU». Скажите, о чем думал веб-мастер, производя на свет такие html заголовки сайта? Ни единого полезного для сайта слова! Во-первых, включать название компании, если это не широко известная торговая марка, по которой будут искать (например, BMW или Sony), бессмысленно. Хотя «Вася Пупкин» — это своего рода тоже бренд … Во-вторых, даже случайно увидя в выдаче поисковика подобный тайтл, потенциальный покупатель вряд ли заинтересуется, что за товары продает этот Вася Пупкин, и доставляются ли они в его родной Урюпинск — скорее, он обратится к сайту конкурента ниже в выдаче, у которого в заголовке написано «Автомобили и запчасти к автомобилям: автосалон в Урюпинске». Что же касается строки заголовка про главную страницу, то осталось добавить на «морду» несколько вхождений слов из тайтла и хорошенько раскрутить сайт по ним — и можно штурмовать ТОП по этому крайне информативному и важному для проекта заголовку сайта. |
Работа с основными HTML тегами
Давайте теперь изучим основные теги, которые
используются на странице. В примерах далее
я для простоты не буду приводить структуру
всей страницы, считайте, что мы всегда работаем
внутри тега body, если не указано иное.
Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега <p> таким образом:
<p>
Это абзац.
</p>
<p>
Это еще один абзац.
</p>
<p>
И еще один абзац.
</p>
Создайте на вашей странице 5 абзацев
с каким-нибудь текстом. Посмотрите, как эти
абзацы будут выглядеть в браузере.
Заголовки страницы
Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги — каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную
степень важности. В заголовке h2 следует
располагать название всей HTML страницы,
в h3 — название блоков страницы, в h4 — название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h5>Заголовок h5</h5>
<h6>Заголовок h6</h6>
Скопируйте приведенный выше код себе и запустите его в браузере. Посмотрите, как отличаются размеры заголовков.
Сделайте заголовок h2. Ниже сделайте
заголовок h3, а под ним — абзац с
текстом. После абзацев сделайте еще один
заголовок h3, а под ним — 2 абзаца с текстом.
Жирный
Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным
и обычный текст — достаточно взять его в
тег <b>. Смотрите пример:
<p>
Это обычный текст, а это <b>жирный</b> текст.
</p>
Проверьте работу тега <b> на вашей
странице.
Курсив
Кроме жирного можно сделать также и курсив с помощью тега <i>:
<p>
Это обычный текст, а это <i>курсивный</i> текст.
</p>
Проверьте работу тега <i> на вашей
странице.
Замечания
Обратите внимание на то, что теги <b> и <i> следует использовать внутри
какого-либо другого тега, например абзаца.
В этом случае абзацы создают общую структуру
страницы (абзацы и заголовки), а указанные
теги делают жирным или курсивом отдельные
кусочки текста.
HTML Заголовки. Уроки для начинающих. W3Schools на русском
HTML Заголовки
Заголовки определяются с помощью тегов от <h2> до <h6>.
Тег <h2> определяет наиболее важный заголовок. Тег <h6> определяет наименее важный заголовок.
Пример
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
Примечание: Браузеры автоматически добавляют отступ (margin) до и после заголовка.
Заголовки важны
Поисковые системы используют заголовки для индексации структуры и содержания ваших веб-страниц.
Пользователи часто просматривают страницу по её заголовкам. Важно использовать заголовки, чтобы показать структуру документа.
<h2> заголовки следует использовать для основных заголовков, а затем <h3> заголовок, менее важный <h4> и т.д.
Примечание: Используйте HTML-заголовки только для заголовков. Не используйте заголовки, чтобы сделать текст БОЛЬШИМ или жирным.
Большие заголовки
Каждый HTML заголовок имеет размер по умолчанию. Однако, вы можете указать размер для любого заголовка с атрибутом style, используя свойство CSS font-size:
HTML Горизонтальный разделитель
Тег <hr> определяет тематический разрыв на HTML странице и чаще всего отображается как горизонтальный разделитель (горизонтальная линия).
Элемент <hr> используется для разделения содержимого (или определения изменения) на HTML странице.
Пример
<h2>Это заголовок 1</h2>
<p>Это какой-то текст.</p>
<hr>
<h3>Это заголовок 2</h3>
<p>Это какой-то другой текст.</p>
<hr>
HTML элемент <head>
HTML элемент <head> (голова) — это контейнер для метаданных. Метаданные HTML — это данные о документе HTML. Метаданные не отображаются на странице, они нужны для служебных целей (поисковых роботов и веб-приложений).
Элемент <head> находится между тегом <html> и тегом <body>:
Примечание: Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
Как просмотреть исходный код HTML?
Вы когда-нибудь видели веб-страницу и задавались вопросом «Эй! Как они это сделали?!»
Просмотр исходного кода HTML:
Кликните правой кнопкой мыши страницу HTML и выберите «Просмотреть источник страницы» (в Chrome) или «Просмотреть источник» (в Edge), или «Исходный код страницы» (в Firefox), или «Источник страницы» (в Opera) или похожее в других браузерах. Откроется окно, содержащее исходный код HTML страницы.
Исследовать HTML элемент:
Кликните правой кнопкой мыши элемент (или пустую область на странице) и выберите «Просмотреть код» или «Исследовать элемент» чтобы увидеть, из каких элементов состоит страница (вы увидите и HTML, и CSS). Вы также можете редактировать HTML или CSS код на лету в открывшейся панели «Элементы или стили».
HTML Упражнения
HTML Справочник тегов
Справочник тегов W3Schools содержит дополнительную информацию об этих тегах и их атрибутах.
Подробнее о тегах и атрибутах HTML вы узнаете в следующих главах этого учебника.
| Тег | Описание |
|---|---|
| <html> | Определяет начало загрузки HTML документа |
| <body> | Определяет тело документа |
| <head> | Контейнер для всех элементов головы страницы (название, скрипты, стили, метаинформация и др.) |
| <h2> до <h6> | Определяет HTML заголовки |
| <hr> | Определяет тематическое изменение в содержании |
Вопросы для самоконтроля
- Что такое HTML-заголовки?
- Зачем нужны HTML-заголовки?
- Какие бывают заголовки на HTML-страницах?
- Какой тег определяет самый большой и самый маленький заголовок?
- Что такое горизонтальный разделитель на HTML-странице?
- Какой тег определяет горизонтальный разделитель на HTML-странице?
- Для чего необходим HTML-элемент head?
- Где на веб-странице находится элемент head?
- Как посмотреть исходный HTML-код в браузере?
- Как исследовать HTML-элемент с помощью браузера?
Заголовки (теги h2, h3, h4) в HTML5 и SEO заблуждения — Примеры
Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (подробнее про тег title). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего (см. исключения) используют в качестве заголовка сниппета.
Второй заголовок находится в теге h2. Далее подзаголовки меньших размеров. Если собрать их все, то должна быть чётко видна структура веб-документа подобно главам школьного учебника. Такая раздробленная на разделы и подразделы информация легко воспринимается, найти необходимый материал на странице не вызывает затруднений.
Важные замечания:
- заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
- заголовок — это слово, фраза, предложение. Он не должен быть длинным.
- заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как
strong,mark,emи др. (посмотреть весь список). - если статья строится в формате «вопрос-ответ» и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов
hправильней использовать тройкуdl,dt,dd.
Проверить
h2 страницыСейчас фразу в любом теге можно сделать заголовком с помощью стилей CSS: увеличить шрифт и/или размер текста. Для того, чтобы проверить количество тегов h2 и их содержимое, достаточно посмотреть код страницы сайта с помощью браузера, никаких дополнительных расширений не требуется. Такой инструмент, можно вывести, если нажать клавишу <F12>:
Разница в использовании
h2, h3, h4, h5, h5, h6 в HTML5 и HTML4Перед дальнейшим чтением желательно ознакомиться с примерами, описанными в стандартах [w3.org] самостоятельно.
Один
h2 на странице (версия HTML4)- Пошаговое решение судоку
- Программа решения судоку с объяснениями (онлайн)
- Правила игры
- Алгоритм заполнения ячеек кроссворда
- Способ 1. «Скрытые одиночки»
- Способ 2. «Одиночки»
- Методы решения судоку
- Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
- Стратегия 2. Группы кандидатов
Иерархия на действительно существующей странице реализуется благодаря тегам h2—h6. h2 — самый главный, имеет самый крупный размер, можно использовать только один h2. h6 — самый незначительный из заголовков, имеет самый маленький размер и самый высокий уровень вложенности. Такой вариант наиболее распространён у SEO оптимизаторов:
<!DOCTYPE html>
<div>
<div>Название сайта</div>
<ul>
<li><a href="/1">Пункт1</a>
<li><a href="/2">Пункт2</a>
</ul>
</div>
<div>
<h2>Пошаговое решение судоку</h2>
<h3>Программа решения судоку с объяснениями (онлайн)</h3>
<h3>Правила игры</h3>
<h3>Алгоритм заполнения ячеек кроссворда</h3>
<h4>Способ 1. «Скрытые одиночки»</h4>
<h4>Способ 2. «Одиночки»</h4>
<h3>Методы решения судоку</h3>
<h4>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h4>
<h4>Стратегия 2. Группы кандидатов</h4>
<b>Комментарии</b>
</div>
<div>
<b>Последние сообщения</b>
<ul>
<li><a href="/1">Пункт1</a>
<li><a href="/2">Пункт2</a>
</ul>
</div>
<div>Футер</div>
Заголовки
h2—h6 в HTML5Каждый пункт дерева заголовков создаёт один из вариантов:
body, когда нетh2—h6перед первыми дочерними тегамиarticle,aside,nav,section.- структурные теги
article,aside,nav,section. Дочерниеh2—h6будут вложены в предшествующий структурному тегу заголовок.
Внимание:header,mainиfooterне являются структурными тегами. h2—h6, которые не имеют родителяblockquote,details,fieldset,figureиtd. Уровень вложенности пункта определяется рангом тегаh.
Важные замечания:
- Документ может содержать несколько заголовков верхнего уровня (в примере ниже пункты 1-3).
- Документ или даже структурный тег могут содержать два и более тега
h2(в примере ниже пункты 2.1-2.3). - Последовательность
hне важна, можно пропускать теги:h2»h3»h5. Если отсутствуетh2, его место займётh3или дажеh6. - Можно изменять порядок тегов:
h4»h5»h2(h2будет иметь тот же уровень вложенности, что первый тегh, в нашем случаеh4). - Так как код перестаёт быть интуитивно понятным, спецификация рекомендует (необязательно):
- каждый структурный тег начинать с
h2. Но на устройствах, не поддерживающих HTML5 или в крайнем случае CSS, будет ужасная картина. - теги
hоборачивать в структурный тег. Но, объём HTML-кода влияет на скорость загрузки веб-страницы. Поэтому не особо хочется его увеличивать, если не требуется внешне (скажем, цветом фона) или семантически отделить границы разделов.
- каждый структурный тег начинать с
<!DOCTYPE html>
<h4>1</h4>
<section>
<h3>1.1</h3>
<h3>1.2</h3>
<h4>1.2.1</h4>
<h2>1.3</h2>
</section>
<section>
<h5>1.4</h5>
</section>
<h5>1.5</h5>
<section>
<h5>1.5.1</h5>
</section>
<h4>2</h4>
<section>
<h2>2.1</h2>
<h2>2.2</h2>
<h2>2.3</h2>
</section>
<h2>3</h2>
Важные замечания:
- Если над или в
article,aside,nav,sectionотсутствует тегh, пункт будет иметь заголовокuntitled. - Теги
article,aside,navне обязательно должны иметь вложенный тегh.
- untitled page
- untitled article
- Заголовок внутри article
- Заголовок верхнего уровня
<!DOCTYPE html>
<section>
<article>
<nav>
<ul>
<li><a href="#1">Перейти к первой части статьи</a>
<li><a href="#2">Перейти ко второй части статьи</a>
</ul>
</nav>
<h2>Заголовок внутри article</h2>
</article>
</section>
<h2>Заголовок верхнего уровня</h2>
Пример вёрстки HTML5
- Название сайта
- Navigation
- Пошаговое решение судоку
- Программа решения судоку с объяснениями (онлайн)
- Правила игры
- Алгоритм заполнения ячеек кроссворда
- Способ 1. «Скрытые одиночки»
- Способ 2. «Одиночки»
- Методы решения судоку
- Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
- Стратегия 2. Группы кандидатов
- Комментарии
- Последние сообщения
<!DOCTYPE html>
<header>
<h2>Название сайта</h2>
<nav>
<ul>
<li><a href="/1">Пункт1</a>
<li><a href="/2">Пункт2</a>
</ul>
</nav>
</header>
<main>
<article>
<h2>Пошаговое решение судоку</h2>
<section>
<h3>Программа решения судоку с объяснениями (онлайн)</h3>
<h3>Правила игры</h3>
<h3>Алгоритм заполнения ячеек кроссворда</h3>
<h4>Способ 1. «Скрытые одиночки»</h4>
<h4>Способ 2. «Одиночки»</h4>
<h3>Методы решения судоку</h3>
<h4>Стратегия 1. Кандидат в двух-трёх клетках одного квадрата</h4>
<h4>Стратегия 2. Группы кандидатов</h4>
</section>
<section>
<h5>Комментарии</h5>
</section>
</article>
<aside>
<h5>Последние сообщения</h5>
<ul>
<li><a href="/1">Пункт1</a>
<li><a href="/2">Пункт2</a>
</ul>
</aside>
</main>
<footer></footer>
Оптимизация структуры заголовков и подзаголовков веб-страницы
Что думают поисковые системы? Они, с одной стороны, не должны наказывать за то, что вебмастер следует стандартам вёрстки, а, с другой стороны, должны ориентироваться на большинство. Реальность такова: с появлением HTML-редакторов, это самое большинство не будет разбираться с тонкостями разметки. Им затруднительно переключиться на вкладку «HTML» чтобы картинке прописать атрибут alt, а секции наверно вообще за гранью понимания (см. меню сайта «грамота.ру»).
Также в алгоритм поисковиков может быть заложено удобство пользования сайтом, например, более эстетично и естественно, когда часть заголовка не является ссылкой.
Официальные сообщения Google:
- допускается наличие нескольких
h2. - довольно старое видео (от 2009 года) о последовательности тегов
h.
Официальные сообщения Яндекса:
Правильное оформление заголовков в тексте помогает … роботу Яндекса проще разобраться со структурой документа. Поэтому следует выделять этими тегами заголовки в соответствии с иерархией документа.
[help.yandex.ru]
SEO заголовок по итогам эксперимента
Эксперимент 1: «Оптимальное количество
h2»Рассматриваются три страницы:
- h2 » h2 (5 лет)
- h2 » h3 (6 лет)
- h2, h2 » h3 (7 лет)
Изначально в статьях учитываются последовательность (чем ближе к началу, тем слово более значимо) и плотность [wikipedia.org] ключевого слова, в частности:
- ключевое слово употребляется только дважды, а именно в тегах
hна одинаковом удалении от начала фразы, - почти одинаковое количество текста,
- одинаковые по длине заголовки,
- первый
h2— это заголовок верхнего уровня (он не имеет родителя article, aside, nav, section). Это важно (см. HTML5)!
7-6-5 лет [google.ru]. Для Google более привлекателен вариант использования двух h2, где первый — имя сайта (Гугл старательно вычленяет название веб-проекта, даже если это ссылка на внутреннюю страницу стороннего блога [google.ru]), второй — название статьи.
6-5-7 лет [yandex.ru]. В Яндексе h2 должен быть единственным. То есть на Главной h2 — это название сайта, а на внутренних страницах — название внутренних страниц.
Примечание: в Гугле индексация молниеносна, поэтому тут было проверено и отсутствие влияния алгоритма «Google Fresh». Позиции сменились после того, как страницы были добавлены в Г+. То есть да, есть разница один h2 или несколько, но этому поисковики придают очень маленькое значение.
Эксперимент 2: «Есть ли толк от
h4»Яндекс и Google не вносят h4 в заголовок сниппета. На экспериментальной странице не были использованы title, h2, h3.
Исключение для Яндекса: когда выделенный абзац содержит от 20 до 200 символов. Здесь не важно в каком теге он будет находиться: хоть в h4, хоть в span.
SEO советы
Утверждение 1: заголовок верхнего уровня должен содержать ключевые фразы, но при этом не быть спамным, то есть слова внутри него должны склонятся согласно правилам русского языка. Плохой пример: «Одежда оптом от производителя недорого».
Утверждение 2: чтобы не писать несколько одинаковых по смыслу статей, в заголовки меньшего уровня желательно включить похожие запросы и синонимы. В большинстве случаев для их нахождения достаточно фантазии, wordstat.yandex.ru и поисковых подсказок. То, что менее востребовано и не помещается в заголовки, можно упоминуть в тексте.
Важно: нет необходимости впихнуть весь перечень wordstat. Текст должен быть интересным, читаемым и «без воды».
В примере с судоку люди ищут одно и тоже, но называют это по разному: «методы», «алгоритм», «способы», «правила», «методика», «приёмы», «секреты», «принципы», «примеры»…
Можно ли внутри тега
h использовать другие теги, например, img, a?Теги h могут содержать phrasing elements! Phrasing elements — это img, a, input и др.
Заблуждение 1: внутри тегов h2—h6 нельзя использовать другие теги.
<h3>Можно ли внутри тега <code>h</code> использовать другие теги, например, <code>img</code>, <code>a</code>?</h3>
Внимание: в ряде CMS (в т.ч. Blogger) есть поле с названием страницы сайта. Его содержимым автоматически заполняется h2 и большая часть title. Остальная часть title или отсутствует, или одинакова для нескольких страниц, например, ей может быть название сайта. Но в теге title может находиться только текст [w3.org]. Поэтому нельзя в поле названия страницы вносить какие-либо теги.
Заблуждение 2: в заголовке не должно быть картинки. Две записи равнозначны для w3.org, Google, но не для Яндекса (не индексирует атрибут alt):
<h2>
<img src="logo.gif" alt="Название сайта">
</h2>
<h2>
Название сайта
</h2>Заблуждение 3: не стоит заключать заголовки в дополнительные контейнеры. Откуда ноги растут у этих утверждений? Нужно, например, выравнять заголовок по вертикали:
<div> <h2>Заголовок</h2> </div>
Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ссылки к определённому участку страницы, так называемые хэш-ссылки). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h4):
<aside>
<h2>Реклама</h2>
<a href="http://ad.com/">
<section>
<h2>Дешёвые кредиты</h2>
<p>Вас удивят скорость выдачи, качество обслуживания и самое главное — цена вопроса!</p>
<p>Процентные ставки от 1% до 5%</p>
</section>
</a>
<a href="http://ad1.com/">
<section>
...
</section>
</a>
</aside>Утверждение 2: есть небольшая разница в том как располагать ссылку: внутри тега h или тег h внутри ссылки. И она заключается в том, что в первом случае ссылкой является только текст, а во-втором — весь блок.
<h3>
<a href="#"> только текст </a>
</h3>
<a href="#">
<h3> весь блок (прямоугольная область) </h3>
</a>Должен ли
title отличаться от h2?«Может ли title быть таким же как h2?» — да, может.
«Различный title и h2 полезны для SEO?» — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).
Примечание: для того, чтобы страница могла присутствовать в Новостях Google [support.google.com] или быстрых ссылках Яндекса [help.yandex.ru], основная часть title и h2 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.
Нужно ли заголовки боковых блоков брать в
h?Если заголовки индексируются (см. что сделать, чтобы поисковик не проиндексировал текст), то пусть лучше будут в теге h. Всё равно они употребляются на каждой странице сайта и вес этих слов («Реклама», «Последние сообщения», «Подписка» и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.
К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled.
Бренд сайта с заголовком и опциями темы—ArcGIS Enterprise Sites
В этом разделе
Брендирование вашего сайта логотипом и цветами вашей организации делает ваши ресурсы достоверными и авторитетными. Это также помогает вашему сайту сочетаться с другим веб-ресурсами вашей организации. В этом разделе описывается, как администраторы и участники основной команды могут выполнять следующие действия:
Для начала работы войдите на Portal for ArcGIS и щелкните Сайты на странице Обзор, чтобы просмотреть список ваших сайтов.
Подсказка:
Вы также можете редактировать сайт при просмотре в браузере. Убедитесь, что вы вошли в систему и найдите кнопку редактирования слева от вашего сайта.
Выберите стиль заголовка
Заголовок вашего сайта – это место, где вы можете пометить свой сайт логотипом, создать навигацию к другим ресурсам с помощью ссылок меню и ссылок на учетные записи социальных сетей.
- Откройте сайт в режиме редактирования.
- Откройте боковую панель, щелкнув переключатель . При необходимости нажмите стрелку назад рядом с Настроить в верхней части панели, чтобы вернуться в корневое меню, пока не появится возможность щелкнуть Заголовок.
- Под Заголовком щелкните Внешний вид, чтобы выбрать стиль для заголовка. Для выбора доступны следующие три опции:
- Стандарт – по умолчанию для каждого нового сайта этот дизайн имеет тонкую компактную панель с местом для логотипа (60 пикселов), социальных сетей и ссылок в меню.
- Заметный – этот дизайн обеспечивает больше места для больших логотипов (120 пикселов) и дополнительных ссылок меню.
- Пользовательский CSS/HTML – используется редактор кода с поддержкой синтаксиса, чтобы настроить заголовок с пользовательским кодом.
Чтобы добавить логотип, выполните действия, описанные в следующем разделе.
- Щелкните меню Бренды. Все поля, представленные в меню, являются необязательными.
- Имя – вводит имя, которое будет отображаться в заголовке вашего сайта. Имя, которое вы указываете в этом поле, отображается только в заголовке и не будет отражено в URL вашего сайта или в вашем списке сайтов.
- Краткое имя – вводит сокращенную версию имени, которое вы добавили в свой заголовок. Это имя будет отображаться только в том случае, если исходное имя заголовка слишком длинное при просмотре на экранах меньшего размера ( например на мобильном телефоне).
Подсказка:
Люди все чаще используют мобильные устройства для доступа в Интернет. Настоятельно рекомендуется добавить короткое имя, чтобы обеспечить качество вашего сайта на любом устройстве.
- Выберите опцию для Компоновки: Box или Wide.
- Если вы хотите брендировать заголовок сайта с помощью HTML или CSS, выберите Использовать пользовательский HTML/CSS.
Заголовок HTML не поддерживает встроенный JavaScript. Теги скриптов будут игнорироваться.
- Измените окно CSS на боковой панели и щелкните Применить изменения, чтобы увидеть эффект.
- Щелкните Сохранить.
Добавить логотип в заголовок
Размер и расположение логотипа вашего сайта зависит от выбранного вами стиля заголовка.
- Щелкните, чтобы развернуть меню Бренды под Заголовком на боковой панели.
- Щелкните кнопку переключателя Логотип, чтобы включить его.
- Добавьте изображение, выбрав URL изображения или загрузив изображение из файла.
Подсказка:
Если вы загружаете изображение из файла, сохраненное как файл PNG изображение работает лучше всего. Вы можете обрезать и увеличить изображение в разделе Настройки изображения на панели Настройка. - Если вы используете заголовок Заметный, вы можете выбрать настройку для Выравнивания изображения.
- Для Дополнительного текста к логотипу, предоставьте текст, соответствующий стандартам доступности.
Подсказка:
Если на логотипе есть текст, альтернативным текстом может быть название компании. Если логотип является логотипом дизайна, вы можете считать его декоративным и ввести “” для всего текста. - Щелкните Сохранить.
Добавление иконок социальных сетей
Добавление иконок социальных сетей в заголовок.
- Щелкните, чтобы развернуть меню Бренды под Заголовком на боковой панели.
- Щелкните меню Значки социальных сетей.
- Щелкните переключатели, чтобы добавить значки социальных сетей для Facebook, Twitter, Instagram или YouTube.
- Укажите URL к своей учетной записи на платформе.
- Щелкните Сохранить.
Создание темы
Подключите тему для своего сайта, выбрав цвета для заголовка сайта, текста и кнопок. Цвета, которые вы выбираете в меню Темы вашего сайта, применяются ко всему сайту. Вы можете переопределить этот выбор, настроив цвета для определенных строк. Для получения дополнительной информации см. Цвета и шрифты.
Подсказка:
При выборе цвета просмотрите рекомендации по брендингу для вашей организации. Многие рекомендации по брендингу предоставляют точные цветовые коды для содержания, такого как веб-сайты и логотипы. Если у вас нет рекомендаций по брендингу, проконсультируйтесь с вашей командой или заинтересованными сторонами, чтобы убедиться, что тема вашего сайта правильно отражает вашу организацию.
- Откройте сайт в режиме редактирования.
- Откройте боковую панель, щелкнув переключатель . При необходимости нажмите стрелку назад рядом с Настроить в верхней части панели, чтобы вернуться в корневое меню, пока не появится возможность щелкнуть Заголовок.
- Чтобы выбрать цвет для любого из следующих параметров, введите шестнадцатеричный код цвета или выберите цвет в палитре цветов рядом с полем кода цвета.
- Цвет фона Global Nav применяет цвет к глобальной панели навигации вашего сайта.
- Цвет текста Global Nav применяет цвет к тексту в глобальной навигационной панели.
- Цвет фона заголовка определяет цвет фона заголовка сайта.
- Цвет текста заголовка определяет цвет всего текста в заголовке.
- Цвет фона определяет цвет фона сайта. Цвет строки и цвет текста также можно настроить для каждой строки, выполнив шаги, описанные в разделе Цвет и шрифт.
- Цвет текста определяет цвет текста сайта.
- Цвет ссылки определяет цвет любых ссылок на сайте.
- Цвет фона для кнопок определяет цвет фона кнопок на сайте.
- Цвет текста для кнопок определяет цвет текста для любых кнопок на сайте.
- После настройки цветов нажмите Применить изменения.
- Вы также можете применить шрифты к тексту в заголовке и теле сайта.
- Чтобы выбрать основной шрифт всего сайта, щелкните кнопку настройки Базовый шрифт.
- Чтобы изменить шрифт для заголовка вашего сайта, щелкните кнопку настройки Шрифт заголовка.
Чтобы начать заново или сбросить все до цветов по умолчанию, нажмите Восстановить по умолчанию внизу меню Тема.
Создать нижний колонтитул
Вы можете использовать собственный HTML, чтобы добавить нижний колонтитул на ваш сайт, который будет постоянным на всех страницах, прикрепленных к вашему сайту.
- Разверните меню Нижний колонтитул на боковой панели.
- Щелкните переключатель рядом с Настроить.
- Измените CSS и HTML на боковой панели и щелкните Применить изменения, чтобы увидеть эффекты HTML.
HTML нижнего колонтитула не поддерживает встроенный JavaScript. Теги скриптов будут игнорироваться.
Что дальше
Чтобы настроить ваш сайт с большим количеством брендинга , вы можете сделать следующее:
- Добавить ссылки в меню и убедиться, что глобальная навигация включена. Для получения дополнительной информации см. Настроить ссылки меню и глобальную навигацию.
- Каждый сайт содержит URL (веб-адрес). Если в вашей организации есть пользовательский домен, вы можете настроить этот URL-адрес для дальнейшего брендирования своего сайта. Для получения дополнительной информации см. Настроить пользовательский URL.
Отзыв по этому разделу?
HTML-тег заголовка
Пример
Определите заголовок для вашего HTML-документа:
Справочник по элементам HTML
Это заголовок
Это абзац.