Тег HTML заголовок страницы
Тег определяет заголовок HTML страницы. Этот тег не отображается на самой веб странице. Браузеры обычно выводят его как название вкладки. Также тег title используется поисковыми системами как заголовок сайта в выдаче.
Не путайте HTML тег с глобальным атрибутом title — это разные вещи.
Элемент находится в области страницы (подробнее про раздел head). Можно использовать только один тег title на странице.
Синтаксис
Содержимое тега заголовка используется:
- как название вкладки в браузере;
- как название страницы при добавлении в Избранные или Закладки;
- как заголовок сниппета сайта в поисковой выдаче.
Атрибуты у тега title отсутствуют.
Пример использования в HTML коде
Поддержка браузерами
| Тег | |||||
| Да | Да | Да | Да | Да |
Тег title в поисковых системах
Поисковые системы используют содержимое тега title страницы для построения заголовка сниппета сайта в выдаче.
Чтобы правильно заполнять тег нужно учитывать следующие правила:
- Пишите внутри title только то, что соответствует содержанию страницы.
- Не пишите слишком длинные заголовки.
- Не стоит делать из заголовка перечисление ключевых слов.
- Ставьте наиболее важную информацию в начало заголовка.
Правильный тег поспособствует поднятию позиции страницы сайта при ранжировании.
и название раздела сайта (например, для страницы товара интернет магазина: название товара из h1 и категория товара). Хотя эта схема не является идеальной, ее использование оправдано во многих случаях.
Вот пример тега title для этой страницы (один из вариантов):
Источник статьи: http://guruweba.com/html/teg-title-html-zagolovok-stranitsy/
Урок 3. Заголовки и форматирование текста
Заголовки в HTML
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1, h2, h3, h4, h5, h6. Они идут в порядке от самого большого, до самого маленького: h1 — самый большой заголовок, h2 — чуть меньше, ну а h6, последний из них, соответственно самый маленький.
| Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту! |
Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
Как выделить текст полужирным в html?
strong — стандартное выделение текста жирным.
b — выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные — это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i — выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em — стандартное выделение курсивом. Нет ограничений в использовании.
cite — данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn — для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
Как выделить текст подчёркиванием в html?
u — стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins — так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike
Как выделить текст в верхнем и нижнем индексах в html?
sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face — название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size — активные значения от 1 до 7. Шрифт по молчанию равен 3.
color — цвет текста. Если не задать параметр, то текст будет чёрным.
Демонстрация Скачать исходники
Повторюсь, данный способ устарел, поэтому советую не привыкать его использовать.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
Источник статьи: http://tradebenefit.ru/zagolovki-i-tekst-html
Как правильно писать HTML заголовки для сайта
Правильно расставленные HTML заголовки
и т.д. — это важный пункт оптимизации страниц для поисковой системы. У вебмастеров есть разные мнение относительно правильности использования HTML заголовков. В этой статье я изложу свою точку зрения как правильно заполнять HTML заголовки для страниц сайта. На мой взгляд такой подход является оптимальным.
Учимся понимать иерархию HTML заголовков
Чтобы визуализировать для себя суть структуры заголовков, представим, что у нас есть книга. Она разделена на 2 раздела, каждый раздел имеет по 3 главы.
Получается такая структура:
Книга
— Раздел 1
— — Глава 1
— — Глава 2
— — Глава 3
— Раздел 2
— — Глава 4
— — Глава 5
— — Глава 6
Представление такой структуры в виде иерархии HTML заголовков будет выглядеть следующим образом:
Как вы видите, глава имеет меньший охват, чем раздел, соответственно имеет меньший по значимости уровень заголовка. Однако, «Раздел 1» и «Раздел 2» — это две последовательные структуры (Раздел 2 не является подразделом Раздела 1) — соответственно они имеют одинаковый уровень HTML заголовка.
Обратите внимание, что разделов и глав в книге может быть сколько угодно, но ни один из них не будет по значимости равен или выше названию книги. Равносильной книге может быть только другая книга, а соответственно уровня главного заголовка веб-страницы может быть только заголовок другой веб-страницы (который находится в другом HTML документе).
На одной HTML странице должен быть один заголовок
Правильная структура HTML заголовков страницы
Структура заголовков должна отражать смысл контента в них. Подзаголовки
должны конкретизировать суть обозначенную в HTML заголовке
, а два заголовка одного уровня — продолжать друг друга либо раскрывать другую грань содержимого страницы.
И помните: указание заголовка
после
укажет что предыдущий раздел
закончен и начат новый, а не подчеркнет значимость подраздела.
В глазах поисковой системы заголовки имеют собственный вес в зависимости уровня. Наибольший вес имеет заголовок
, меньше него
, наименьший
. Таким образом, названия разделов имеют больший вес, чем названия подразделов.
Сколько уровней заголовков использовать
Основное, на что нужно ориентироваться — заголовки должны отражать структуру содержимого.
На сколько частей разбивать материал и на сколько подразделов его дробить — решать вам, и во многом это зависит от специфики вашей ниши.
Из практики скажу, что редко когда есть необходимость опускаться ниже третьего уровня. Обычно заголовков
вполне достаточно, но, повторюсь: на первом месте правильное отражение структуры контента.
Не следует пытаться намеренно увеличить количество подзаголовков в статье. Слишком большое количество выделенных элементов может негативно сказаться на позициях вашего сайта в поисковых системах.
В любом случае, рекомендую посмотреть как расставляют заголовки авторитетные сайты в вашей нише. Возможно, вы подчеркнете для себя несколько полезных пунктов.
Заголовки дополнительных блоков сайта
Практически все блоги имеют блок ссылок на похожие статьи, блок опроса, подписки; интернет-магазины — блок фильтров, похожих товаров, популярных, ранее просмотренных, хитов продаж. Все это не является основным контентом страницы, но структура у этих блоков также есть. Так что, стоит озаглавливать такие блоки заголовком
или каким-то другим?
Я бы не рекомендовал. Для поисковых систем важна та уникальная информация, которую несет ваша страница, либо не уникальная, но преподнесенная удобнее всего среди конкурентов.
Структурируйте заголовками основной контент страницы, для всех дополнительных элементов достаточно выделения названия блоков стилями CSS.
Заголовки на сайте интернет-магазина
Со статейными страницами все просто — есть основная статья, у нее есть структура. Но как писать HTML заголовки на сайте интернет-магазина?
Стоит выделить 2 типа страниц: страница каталога и страница товара.
Страница каталога
Что действительно стоит сделать — так это вынести в заголовок
название подборки: «Холодильники SAMSUNG», «Горные велосипеды Ardis», «Все для отдыха», «Женские платья и сарафаны» — это все может быть заголовком
Во многих случаях этого будет достаточно. Вам не обязательно использовать несколько уровней HTML заголовков на каждой странице.
В некоторых магазинах есть общие страницы, показывающие названия категорий и несколько товаров этих категорий. Тогда вы можете сделать названия категорий заголовками. HTML допускает использование заголовков — ссылок.
Смысла в добавлении заголовков на каждый товар из каталога скорее нет. Однако, если вы используете текст — описание страницы каталога и оно достаточно длинное, чтобы разделить его на подзаголовки — сделайте это.
Страница товара
Думаю, ни кого не возникнет сомнений, что заголовок
должен содержать название товара. Хорошей практикой для некоторых ниш является добавление слов, конкретизирующих товар, например, бренда или какой-то характеристики.
У магазина одежды, мало шансов попасть в топ по запросу «Белая футболка», но куда больше по запросу «Белая футболка Trussardi». Если вы продаете телефоны, вместо указания в названии «iPhone 8» и указания вариантов цвета и объема памяти в списке характеристик создайте несколько страниц и сделайте у них
: «iPhone 8 256Gb Белый», «Apple iPhone 8 64Gb Space Gray» и так далее.
Перейдем к подзаголовкам. Большинство страниц товаров имеют похожую структуру и одинаковые элементы: фото, описание, характеристики, отзывы. Сами же блоки могут быть показаны на странице все сразу, либо страница имеет вкладки, по клику на названия которых открывается нужный блок.
И в первом и во втором случаях стоит присвоить этим блокам заголовки HTML (обычно
). В данном случае блоки относятся к основному контенту и не являются обверткой, о чем говорили выше.
Также, достойным решением является конкретизация таких заголовков. В пример приведу один популярный магазин электроники.
Обратите внимание, вкладка имеет короткое название «Характеристики», при нажатии открывается блок с заголовком
: «Технические характеристики Apple iPhone X 256GB Silver».
Пожалуй, на этом все. Я надеюсь эта статья была для вас полезной. Ниже оставляю несколько рекомендаций, на которые следует ориентироваться при составлении заголовков.
Выводы. Рекомендации по использованию заголовков HTML
1) На странице должен быть только один заголовок уровня
2) Строго сохраняем иерархию:
внутри
внутри
и т.д. Никаких
сразу после
3) Заголовки должны передавать смысл содержимого.
4) Не стоит использовать заголовки на постоянно меняющихся / дополнительных элементах страницы.
Источник статьи: http://guruweba.com/web/kak-pravilno-pisat-html-zagolovki-dlya-sayta/