�� Не пропускайте заголовки разных уровней: после может быть только , но не .

�� Уровень заголовка выбирайте по иерархии, а не по внешнему виду. Для уменьшения или увеличения шрифта используйте CSS-свойство font — size , а не уровень заголовка.

�� С помощью тегов . можно автоматически создавать оглавления для документов.

�� Для создания заголовка используют и обычные текстовые блоки. Но информация из . легче попадает в поисковики, поэтому для заголовков лучше использовать именно эти теги.

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

 
Каталог тортов  У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных тартов.  
Свадебные торты
Выберите начинку и внешний вид для торта своей мечты.
Мы выполним торт любой сложности и любой тематики по вашему эскизу или по фотографии. h1>Каталог тортовh1> p> У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных тартов. p> h2>Свадебные тортыh2> p>Выберите начинку и внешний вид для торта своей мечты.p> p>Мы выполним торт любой сложности и любой тематики по вашему эскизу или по фотографии.p>    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

�� Используй на странице не больше одного раза; — не больше двух, максимум трёх раз; — можно 4-5 раз и так далее.

Как вообще эти теги работают? Допустим, есть сайт «Ели от дяди Васи», который рассказывает про голубые сибирские ели. Если ты вводишь запрос в Яндексе «как ухаживать за голубыми елями», а на сайте дяди Васи есть заголовок Как ухаживать за голубыми елями < / h3>, то в Яндексе этот заголовок добавится к названию страницы и будет выдаваться в поиске не просто, как «Ели от дяди Васи», а вот так:

 Ели от дяди Васи — Как ухаживать за голубыми елями Ели от дяди Васи — Как ухаживать за голубыми елями   Скопировать Скопировано Не удалось скопировать   

Теги . должны соответствовать ключевым запросам, вопросу пользователя. Через них сайт настраивается для выдачи в поисковиках.

�� Часто у тебя в проекте есть боковое меню и второстепенный баннер о партнёрах или график работы — это то, что люди не гуглят и что не является семантически важным на странице. Помещать такую информацию в теги . не стоит.

Обычно я прописываю стили для . , а следом задаю точно такие классы: class = «h1» , class = «h2» и так далее с точно такими же параметрами. Когда мне нужно графически отобразить тег заголовка, например, h4 над второстепенным блоком, который не несёт семантической ценности, то я пишу не тег , а беру тег

или , добавляю ему класс h4 :

— он внешне выглядит, как заголовок h4, но не индексируется, как нечто важное. Тогда вспомогательные блоки не мешают основному контенту сайта.

�� У любого тега есть стандартный набор стилей, который стоит по умолчанию в браузере. Иногда бывает, что начинающие ставят тег , , , задают им какой-нибудь шрифт, например, font — family : Arial , начинают их использовать — и вроде всё красиво отображается по размеру. Но может быть так, что в одном браузере стандартный размер шрифта — 18px, а в другом — 16px для того же тега. И, если ты не пропишешь сам в CSS размер для этих тегов, то в разных браузерах заголовки будут отображаться по-разному. Впрочем, это касается не только заголовков, но любых тегов. Просто с заголовками чаще всего много проблем.

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Важно соблюдать порядок заголовков не только из-за их внешнего вида, но и ради удобства людей с ограниченными возможностями.

Такие люди часто используют так называемые скринридеры — программы чтения с экрана — для навигации по сайтам.

Если заголовки расставлены правильно и логично, то скринридер составит карту навигации по заголовкам и пользователю будет удобно на вашем сайте.

�� Если углубиться в интернеты, то можно найти следующее: внутри каждого блока section может быть заголовок h1 . Это немного сбивает с толку, потому что все кругом твердят, что на странице сайта должен быть только один заголовок первого уровня.

Но в этом утверждении описаны технические возможности разметки. Ваше тело, например, может обходиться без воды три дня, а без еды вообще все семь. Это технические возможности. Но это не значит, что нужно пить раз в три дня, а есть раз в неделю.

Также с заголовками. Технически допустимо вставлять по заголовку первого уровня в каждую секцию. Но делать это не нужно. Причина в поисковых роботах. Они берут заголовок первого уровня для поисковых сниппетов. Если заголовков будет много, то робот не сможет сам понять, какой из них взять в сниппет и понизит рейтинг вашего сайта. Просто так, на всякий случай.

Поэтому на одной странице сайта должен быть всего один заголовок первого уровня.

На собеседовании

Скопировать ссылку «На собеседовании» Скопировано

Почему важно использовать h1 – h6 и каким пользователям они приносят пользу? Зачем соблюдать иерархию заголовков?

Скопировать ссылку «Почему важно использовать h1–h6 и каким пользователям они приносят пользу? Зачем соблюдать иерархию заголовков?» Скопировано

Скопировать ссылку «Тимур Цеджинов отвечает» Скопировано

Заголовки важно использовать по крайне мере по двум причинам — SEO и доступность.

В первом случае поисковые роботы используют заголовки – , чтобы понять структуру и смысл содержимого на странице. Это один из факторов ранжирования в поисковой выдаче. К примеру, Google может определить, когда уместно отображать страницу в ответ на запрос пользователя, и делать страницу доступной для избранных фрагментов. Избранные фрагменты — это быстрые ответы на поисковые запросы пользователей Google.

Если заглянуть в код страницы, то можно увидеть, что заголовок «Самые кассовые фильмы» обёрнут в тег . Так что правильное структурирование контента на сайте, включая теги заголовков, — это то, что помогает Google с этой задачей.

Во втором случае заголовки – делают удобной навигацию по сайту для пользователей, особенно для тех, кто пользуется скринридерами. Распространённая техника — быстро перемешаться с заголовка к заголовку для общего понимания содержимого страницы.

Важно не пропускать уровни заголовков, так как это запутает пользователя скринридера. Он может даже попытаться найти, где находится отсутствующий заголовок.

Знаете ли вы селекторы?

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

Основные виды селекторов

Основных видов селекторов всего несколько:

• * – любые элементы.
• div – элементы с таким тегом.
• #id – элемент с данным id .
• .class – элементы с таким классом.
• [name=»value»] – селекторы на атрибут (см. далее).
• :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

Селекторы можно комбинировать, записывая последовательно, без пробела:

• .c1.c2 – элементы одновременно с двумя классами c1 и c2
• a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

• div p – элементы p , являющиеся потомками div .
• div > p – только непосредственные потомки

Есть и два более редких:

• div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div .
• div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).

Посмотрим их на примере HTML:

HTML: Микроразметка

Говоря о семантике, был затронут такой формат разметки, как микроразметка, используемая поисковыми роботами для анализа информации на странице. Правильная разметка страницы с помощью микроразметки помогает выводить в результатах поискового запроса не только ссылку на сайт и описание, но и дополнительную информацию:

• Название организации
• Время работы
• Адрес
• Номер телефона

Микроразметка — инструмент, который реализуется с помощью дополнительных атрибутов HTML-тегов.

Schema.org

Разработчики создали несколько вариантов микроразметки, наиболее распространённым из которых является Schema.org с широким выбором «словарей» для описания информации на странице.

Словарь — это набор правил, по которым описываются блоки на странице. Сеансы фильмов в кинотеатре, информация отдела продаж, цены на товары, отзывы о статье — всё это представлено в небольших словарях.

Действия для создания микроразметки:

• Выбор словаря. Узнать о поддержке тех или иных словарей поисковой системой можно с помощью документации. Для поисковой системы Яндекс доступные словари указаны здесь
• Определение блока, который будет размечаться. Это может быть не только блок, а вся страница сайта
• Выделение информации. На примере разметки контактной информации это: название организации, телефон, email, адрес
• Указание атрибутов в зависимости от типа информации и словаря

Полную инструкцию по микроразметке дать в одном уроке невозможно. Это большая тема, со множеством различных нюансов. По мере получения опыта вы научитесь быстро определять необходимую информацию и размечать её. При простой схеме работы, микроразметка даёт огромные возможности — как в плане визуальной выдачи информации в поисковой системе, так и для поискового продвижения.

Микроразметка контактов

Для примера возьмём контактные данные вымышленной компании «Прауд», и разметим контакты, используя Schema.org. Изначально блок с контактами выглядит следующим образом:

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

Первое, нужно выбрать словарь. Поисковая система Яндекс для этого предлагает несколько вариантов. Возьмём словарь Organization. Полное описание этого словаря можно найти на сайте https://schema.org/.

В уроке не ставится цель научить полностью размечать данные. Цель урока — показать пример микроразметки

Для того чтобы подсказать поисковой системе, что данные размечены словарём, указывается два атрибута:

• itemscope — указатель на то, что блок — единая сущность, и данные в нем связаны. Указывается только у главного блока и не имеет своего значения
• itemtype — указывает на то, какой словарь будет использоваться. Например, для описания контактов выбран словарь Organization. Полный вид атрибута: itemtype=»http://schema.org/Organization»

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

Теперь поисковая система будет знать, что внутри этого блока информация об организации. Приступим к разметке адреса. Schema.org позволяет отдельно указывать улицу, дом, строение и так далее, но мы обобщим это и используем только одно значение itemprop=»address» , чтобы обозначить адрес предприятия. Обратите внимание, что элементы разметки указываются с помощью атрибута itemprop.

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

По аналогии с адресом разметим остальные данные: название, телефон, email. Для каждого из них есть своё значение атрибута itemprop. Обратите внимание, что размечаются только данные, оставляя за «бортом» название поля. Для этого нужные данные оборачивают в и для него указывают атрибут.

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

Для проверки корректности микроразметки можно пользоваться инструментами популярных поисковых систем:

Попробуйте вставить тестовый пример в эти инструменты и взгляните на результат. Можете попробовать «сломать» микроразметку и посмотреть на вывод ошибок.

Задание

Создайте разметку организации, в которой укажите:

• Название организации
• Email организации

Теги используются на своё усмотрение. Вся семантика строится на уровне микроразметки. В качестве словаря используйте http://schema.org/Organization

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Определение CSS селекторов

CSS селекторы показывают путь, в каком именно теге содержится нужная нам информация. Для их поиска можно воспользоваться специальными программами для браузера, например, SelectorGadget, но они не гарантируют того, что найденные селекторы будут соответствовать вашим задачам.

Поиск нужного элемента

Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome).

Откроется дополнительная панель браузера, где во вкладке Elements отобразится весь html код страницы, загруженный в данный момент. На скриншоте примера выделен тег, на который как раз был клик правой кнопкой мыши.

Следующий этап работы — определить тег, который нам нужен. Сделать это можно несколькими способами:

• кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
• переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;

• через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).

Основные понятия в html коде

Далее разберем, что можно увидеть в html коде и что из этого необходимо знать для сбора данных.

Тег — это элемент, который может состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например
(перенос текста на новую строку).

Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь style =» font-size: 200%; text-align: center; « является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:

здесь два атрибута у одного тега — class и style.

Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.

Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег ребенок и тега , и тега , а они соответственно его родители:

Правила обозначения CSS селекторов

Использовать для указания на конкретный тег или его содержимое можно практически все элементы html. Далее рассмотрим несколько самых простых вариантов.

Название тега — достаточно просто указать span, div, img, h2 в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h1, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:

Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обозначаются не так, как все остальные. Пример:

Здесь селектор class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).

Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.

Вам повезло, если в нужном вам элементе есть id, так как этого как раз будет достаточно для большинства настроек сбора данных.

Другие атрибуты — все остальные атрибуты записываются по единому правилу: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):

Использования элементов нескольких тегов — иногда атрибуты у нужного тега не уникальны или вовсе отсутствуют. В этих случаях можно использовать атрибуты родителей для определения селектора. Например, мы хотим использовать для сбора данных информацию из тега :

Сначала пробуем ближайшего родителя, то есть тег . Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги , которые находятся в теге . Аналогично будет выглядеть и с родителей : h2 strong.

Мы можем задать и более четкое условие, что нам нужно все теги , которые находятся непосредственно в теге . Для этого используем символ >: span > strong.

Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h2.font-header span span strong.

Несколько CSS селекторов для одной задачи — бывает, что необходимо указать сразу несколько селекторов для сбора одного события или свойства. Для этого необязательно добавлять несколько отдельных настроек в Мастере сбора данных, достаточно прописать через запятую все нужные селекторы. Например, так выглядит настройка клика по элементу, если по факту несколько кнопок на странице обозначают одно и то же, но имеют разные селекторы:

В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги , в которых есть атрибут type=»submit» и они должны являться детьми тега , в котором есть атрибут В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг):

Тут же, через запятую, прописан еще один селектор: все теги с атрибутом >

Проверка уникальности CSS селектора

Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным.

Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.

В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.

Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.

Читать:

Как сделать строку из массива python