Главная » Готовые решения » Программа Parser » Справка по программе Parser » Основы HTML для настройки парсера

Основы HTML для настройки парсера

Эта инструкция предназначена для тех, кто только начинает работать с парсингом веб-страниц. Для настройки программы парсера вам потребуется минимальное понимание HTML — языка разметки, который используется для создания структуры веб-страниц. Мы разберём, как выглядит HTML, что такое теги и атрибуты, и как к ним "привязываться" при поиске элементов (например, по атрибутам вроде itemprop, id, name или class). Особое внимание уделим ссылкам (тег <a>), так как они часто используются в парсерах для извлечения URL.

Что такое HTML и как он выглядит?

HTML (HyperText Markup Language) — это не язык программирования, а система разметки текста, которая определяет структуру страницы. HTML-код состоит из тегов, которые обозначают элементы страницы, такие как заголовки, параграфы, изображения или ссылки.

Теги обычно выглядят так: <тег> содержимое </тег>.
Они бывают открывающими (с угловыми скобками <тег>) и закрывающими (с косой чертой: </тег>).

Пример простого HTML-кода страницы:

<!DOCTYPE html>
<html>
<head>
    <title>Пример страницы</title>
</head>
<body>
    <h1>Заголовок</h1>
    <p>Это параграф текста.</p>
    <a href="https://example.com">Ссылка на сайт</a>
</body>
</html>

Здесь:

  • <html> — корневой тег всей страницы.
  • <head> — содержит метаданные (например, заголовок страницы).
  • <body> — основное содержимое страницы.
  • <h1> — заголовок первого уровня.
  • <p> — параграф.
  • <a> — ссылка (о ней подробнее ниже).

В парсере вы будете искать конкретные теги, чтобы извлекать данные. Для этого используйте действие «HTML: Поиск тегов», где можно искать по имени тега, атрибутам и т.д.
По этому действию есть подробная видеоинструкция, — посмотрите её, если планируете часто настраивать парсеры.

Что такое атрибуты тегов?

Атрибуты — это дополнительные свойства тегов, которые указываются внутри открывающего тега в формате атрибут="значение". Они помогают уточнить поведение или стиль элемента. Атрибуты важны для парсинга, потому что по ним можно точно "привязаться" к нужному тегу, даже если на странице много похожих элементов.

Примеры атрибутов:

  • id: Уникальный идентификатор элемента на странице. Используется для точного поиска одного элемента. Пример:
    <div id="main-content">...</div>

     
    Пример получения содержимого этого тега в программе «Парсер сайтов»:
     

  • class: Класс элемента, который может быть общим для нескольких тегов. Пример:
    <p class="status status-text">Текст</p>

     
    Несколько классов могут быть перечислены через пробел. Берите ТОЛЬКО ОДНО имя класса:

     

  • name: Имя элемента, часто используется в формах (для input-полей). Пример:
    <input name="username">

    Используется редко, но значение обычно уникально (к нему можно привязываться при поиске тегов)
     

  • itemprop: Атрибут микроразметки, используется чтобы роботы поняли, где какой контент на странице сайта. Пример:
    <span itemprop="name">Имя продукта</span>

    К нему также можно привязываться при поиске (например, для взятия цены: itemprop="price").

Другие полезные атрибуты: href (для ссылок), src (для изображений), alt (подпись к картинке).

Парсер позволяет искать один тег внутри другого: сначала ищем div с классом class=product и потом внутри него ищем тег span со значением itemprop="price" (если на странице несколько цен, а нам нужна цена основного продукта)

Особое внимание: Ссылки (тег <a>)

Тег <a> (anchor) используется для создания гиперссылок. Он позволяет переходить на другие страницы сайта. В парсере мы будем извлекать ссылки для получения списка товаров, подкатегорий, и страниц пагинации (страницы результатов: 1 2 3 .. 28).

Как выглядит тег <a>:

<a href="https://example.com" class="link" id="my-link">Текст ссылки</a>

Ключевые атрибуты тега <a>:

  • href: Основной атрибут — указывает URL (адрес), на который ведёт ссылка.
    В большинстве случаев именно это значение (адрес ссылки) нам и нужно извлекать.
  • id: Уникальный ID ссылки, для точного поиска. Присутствует очень редко.
  • class: Класс для оформления ссылок (например, все ссылки меню с class=menu-item выглядят одинаково).
    Обычно ссылки мы ищем, ориентируяь именно на имя класса.
  • itemprop: Если ссылка — это часть микроразметки: например itemprop="url" для ссылки на продукт.

При поиске в парсере:

  • Не ищите все теги a (без указания атрибутов): на странице много разных ссылок, в результаты попадут лишние ссылки.
  • Привязывайтесь по атрибутам: например, a class=product для поиска ссылок с определённым классом.
  • Извлекайте атрибут href (4-й параметр действия «Поиск тегов» ставим равным href_with_prefix): это даст вам URL (адрес ссылки) для дальнейшего парсинга.
  • Использование href_with_prefix вместо href добавляет базовый URL сайта к относительным ссылкам (в HTML коде ссылка имеет вид href="/products/5320", извлекая же href_with_prefix на выходе получим «нормальную» ссылку с адресом сайта вида https://example.com/products/5320)
     

Как узнать, какой тег искать?

В браузере (например, в Google Chrome) щелкните правой кнопкой мыши → в контекстном меню выберите "Просмотреть код", чтобы увидеть теги и атрибуты для текста, который находится под курсором мыши: