Открывающий тег (opening tag). Данные компонент HTML-структуры представляет собой имя элемента обрамленный в угловые скобки. Служит для обозначения начала действия данного тега. Например, <p> указывает на начало нового абзаца.
Закрывающий тег (closing tag). Визуально похож на открывающий тег, но перед именем элемента добавляется слеш. Обозначает завершение действия открывающего тега. К примеру, </p> дает браузеру понять, что действие тега для обозначения нового абзаца закончилось.
Самая частая ошибка у начинающих веб-разработчиков – отсутствие закрывающего тега. Это может полностью нарушить оформление и привести к другим неожиданным эффектам.
Контент (content). Под данным термином понимают непосредственно содержимое элемента, в нашем случае это текст. Контент располагается между закрывающим и открывающим тегом, обычно именно эту информацию и должен извлекать парсер.
Элемент(element). Под данным термином подразумевают базовую единицу структуры HTML-документа – контент, открывающий и закрывающий теги. Позволяет вывести информацию с необходимым оформлением и параметрами.
HTML-тег функционирует как контейнер, в котором хранится указанный контент. Предоставляются инструменты для правильной организации и форматирования на интернет-странице.
Парные и одинарные теги. В одинарных тегах закрывающий элемент не предусмотрен. Пример – <img>, <br>, данные теги не обрамляют контент, поэтому такого формата достаточно. Парные теги используются для вывода контента и были рассмотрены выше.
Элементы также могут иметь дополнительные атрибуты, которые расширяют возможности.
<p class="text">Основной текст страницы</p>
class – имя атрибута
text – значение атрибута
Для парсинга важно понимать особенности структуры HTML-элементов, атрибуты при этом играют ключевую роль. Их можно представить в виде своеобразных «ориентиров» в процессе поиска нужных элементов. Современные страницы могут содержать огромное количество элементов разного типа с большим количеством вложений. Поэтому не всегда сразу очевидно, как выделить нужный объект и не захватить лишнее. В данном случае помогают навыки «чтения» атрибутов в процессе перемещения по дереву DOM.
Пробел между именем элемента и атрибутом должен быть всегда, в противном случае структура страницы будет неизбежно нарушена. При наличии нескольких атрибутов между ними также располагается пробел.
<p class="text" id="123">Основной текст страницы</p>