Язык HTML и создание сайтов на языке разметки гипертекста
10.03.2025
#COURSE##INNER#
Чтобы создать любой сайт, необходимо освоить язык разметки гипертекста HTML. Он определяет структуру и содержание веб-страниц. Знание основных тегов и их применения – ключ к пониманию отображения информации в браузере.
Начните с фундаментальных концепций: тегов заголовков (
). Понимание семантических тегов (например, Освоение атрибутов тегов – важный шаг. Например, использование src атрибута в теге href в
Практика – ваше лучшее оружие . Создайте свои собственные простые веб-страницы. Попробуйте реализовать разные элементы. Изучение на реальных практических примерах - один из самых эффективных способов усвоения.
Язык HTML и создание сайтов
Для создания сайта начинайте с структуры. Используйте теги , , , , , для организации контента. Каждому блоку соответствует функциональная роль. Чёткое структурирование обеспечивает удобство разработки и последующей поддержки.
Следующий шаг – семантическая разметка. Используйте теги
- для заголовков, для параграфов,
и для списков. Эти теги не только определяют вид, но и дают информацию поисковым системам.
Не забывайте про атрибуты `alt` для изображений (текст_ссылки ). Это – важная часть SEO.
Для оформления используйте внешние стили CSS. Не пишите стили внутри тегов HTML, это создаёт проблемы при поддержании.
Проверяйте валидность кода. Используйте инструменты валидации HTML, чтобы убедиться, что Ваш код соответствует стандартам HTML5.
Оптимизируйте. Убедитесь, что сайт загружается быстро. Это важно для пользователей и ранжирования в поисковых системах. Используйте сжатие изображений, кэширование и оптимизируйте код.
Основные понятия языка HTML
Для начала, запомните: HTML – язык разметки, а не программирования. Он описывает структуру веб-страницы, но не задаёт поведение.
Элементы: HTML состоит из элементов, имеющих открывающий и закрывающий теги. Например,
– это абзац,
– заголовок первого уровня. Важно правильно задавать вложенность.
Теги: Теги - ключевые слова в угловых скобках. Они определяют тип содержимого и его оформление. Например, гиперссылка .
Атрибуты: Атрибуты добавляют дополнительную информацию к тегам, например, href – адрес ссылки, src – путь к картинке. Они указываются внутри открывающего тега.
Структура документа: Каждый HTML документ должен содержать обертку с обязательными секциями
(заголовок) и (тело страницы). Следите за правильным структурированием.
Семантика: Используйте смысловые теги (, , , ) для описания структуры контента. Это улучшает SEO и читаемость кода.
Использование: Практика создания простых страниц даст лучшее понимание. Пробуйте, экспериментируйте и изучайте примеры.
Создание простой веб-страницы
Создайте текстовый файл с расширением .html (например, index.html).
Вставьте в него следующий код:
Моя страница
Раздел 1
Текст раздела 1.
Раздел 2
Список 1
Список 2
Список 3
Элемент списка 1
Элемент списка 2
Элемент списка 3
Откройте этот файл в браузере.
Объяснение кода:
</code>).</li>
<li><code><body></code> - основной контент страницы. Используйте <code><header>, <main>, <footer></code> для структуры.</li>
<li><code><ul></code> - неупорядоченный список (маркированный).<code><ol></code> - упорядоченный список.</li>
<li>Отступы и правильный вложенный тег (например, <code><ul></code> внутри <code><section></code> ) обеспечивают правильное отображение страницы в браузере.</li>
</ul>
<h2>Работа с изображениями и ссылками</h2>
<p>Для добавления изображений на сайт используйте тег <code><img></code>. Атрибут <code>src</code> указывает путь к изображению на сервере.</p>
<p>Пример: <code><img src="image.jpg" alt="Описание изображения"></code></p>
<p>Атрибут <code>alt</code> необходим для описания изображения и важен для доступности сайта. Без него изображение не отобразится в некоторых браузерах или при использовании скриншотов.</p>
<p>Для добавления ссылок на другие страницы или внешние ресурсы используйте тег <code><a></code>. Атрибут <code>href</code> указывает путь к ресурсу.</p>
<p>Пример: <code><a href="https://example.com">Перейти на пример сайта</a></code></p>
<p>Для создания ссылки на другую страницу сайта, укажите полный путь страницы. Направляйте пользователей к полезной и релевантной информации.</p>
<h2>Структура и форматирование текста</h2>
<p>Для создания читабельного и структурированного веб-контента используйте заголовки различного уровня (<h1> до <h6>). Используйте абзацы (<p>) для разбиения текста на смысловые блоки.</p>
<p>Для форматирования текста применяйте теги: <b> (жирный), <i> (курсив), <u> (подчёркнутый), <mark> (выделенный). Например, <b>ключевые слова</b> можно выделить жирным шрифтом, а <i> вспомогательную информацию </i> – курсивом.</p>
<ul>
<li><b>Заголовки</b>: Используйте <h1> для главного заголовка, <h2> для подзаголовков, и так далее. Это важно для понимания структуры страницы посетителями.</li>
<li><b>Список элементов:</b> При необходимости структурируйте информацию с помощью маркированных (<ul>) и нумерованных (<ol>) списков. Используйте теги <li> для каждого пункта списка.</li>
<li><b>Цитирование:</b> Используйте теги <blockquote> для цитирования текста и <q> для коротких цитат.</li>
</ul>
<p>Применяйте таблицы <table> для представления данных в виде таблиц с ячейками <td> и строками <tr>. При этом, не забывайте о заголовках таблицы <th>.</p>
<ol>
<li><b>Оптимизация:</b> Разбивайте большие тексты на более мелкие, логично структурированные блоки. Это облегчит восприятие информации пользователями.</li>
<li><b>Ключевые слова:</b> Выделяйте ключевые слова (например, с помощью тега <strong>) для лучшего поискового ранжирования.</li>
<li><b>Актуальность:</b> Заголовки должны наиболее точно отражать содержание последующего текста.</li>
</ol>
<p>Запоминайте эти рекомендации и применяйте их для создания качественного контента, эффективно структурированного с точки зрения читаемости и удобства восприятия.</p>
<h2>Основы семантики HTML</h2>
<table>
<tr>
<th>Тег</th>
<th>Назначение</th>
<th>Пример</th>
</tr>
<tr>
<td><code><article></code></td>
<td>Самостоятельная, законченная публикация (статья, пост, раздел).</td>
<td><code><article>Это самостоятельный раздел.</article></code></td>
</tr>
<tr>
<td><code><aside></code></td>
<td>Дополняющая информация, не связанная напрямую со статьёй.</td>
<td><code><aside>Справочная информация.</aside></code></td>
</tr>
<tr>
<td><code><nav></code></td>
<td>Навигационное меню.</td>
<td><code><nav>Меню сайта.</nav></code></td>
</tr>
<tr>
<td><code><header></code></td>
<td>Заголовок страницы или раздела.</td>
<td><code><header>Заголовок</header></code></td>
</tr>
<tr>
<td><code><footer></code></td>
<td>Футер, нижняя часть страницы, контакты, авторство.</td>
<td><code><footer>Контакты, авторство.</footer></code></td>
</tr>
<tr>
<td><code><section></code></td>
<td>Логически выделенный раздел, содержащий внутри информацию.</td>
<td><code><section>Преимущества продукта.</section></code></td>
</tr>
<tr>
<td><code><h1> - <h6></code></td>
<td>Используйте заголовки разной иерархии ().</td>
<td><code></code></td>
</tr>
<tr>
<td><code><p></code></td>
<td>Параграф.</td>
<td><code><p>Текст параграфа.</p></code></td>
</tr>
</table>
<p>Правильное применение семантических тегов улучшает SEO и доступность сайта.</p>
<p>Не используйте <code><div></code> и <code><span></code> для элементов, имеющих конкретное назначение. Используйте теги, описывающие содержание.</p>
<h2>Публикация и тестирование сайта</h2>
<p>Для публикации сайта используйте хостинг-провайдер. Загрузите все файлы вашего проекта в корневой каталог.</p>
<p>После загрузки, сразу же проведите <strong>тестирование</strong> вашего сайта. Проверьте отображение всех элементов на разных устройствах (десктоп, мобильный) и браузерах (Chrome, Firefox, Safari). Обратите внимание на корректность работы ссылок, форм и изображений. Проверьте валидность кода HTML. При некорректном отображении, исправляйте ошибки.</p>
<p>Проверьте <strong>доступность</strong> сайта для посетителей. Убедитесь, что страницы подгружаются быстро. Проверьте работоспособность всех важных элементов сайта: кнопки, формы, меню. Проверьте корректность отображения сайта с разными разрешениями экрана.</p>
<p>Проверьте <strong>функционал</strong>: все ли формы отправляют данные, работают ли скрипты корректно. Протестируйте работу при разных объемах загружаемых данных. Особое внимание следует уделить обработке ошибок.</p>
<p>Не забывайте проверять работу <strong>реакции сайта</strong> на разные действия пользователя.</p>
<p>Проверьте работу <strong>обратной связи</strong> и отправку писем с формы. Убедитесь, что электронные письма отсылаются корректно и по назначению.</p>
<p>Важно: <strong>регулярно проверяйте</strong> сайт после внесения изменений для предотвращения неожиданных проблем.</p>
<h2>Вопрос-ответ:</h2>
<h4>Как выбрать подходящий редактор кода для работы с HTML?</h4>
<p>Выбор редактора зависит от ваших предпочтений и опыта. Для начинающих подойдут простые текстовые редакторы, такие как Блокнот (Windows), TextEdit (macOS). Они позволяют сосредоточиться на синтаксисе, не отвлекаясь на сложные функции. По мере развития навыков можно перейти к более продвинутым редакторам, например, Sublime Text или VS Code. Эти программы имеют подсветку синтаксиса, автодополнение, отладку и другие полезные инструменты, которые ускоряют и облегчают разработку. Важно подобрать редактор, который вам удобен в использовании. Ознакомьтесь с возможностями разных редакторов и выберите тот, который наилучшим образом подходит под ваши потребности и стиль работы.</p>
<h4>Какие основные теги HTML используются для структурирования веб-страницы?</h4>
<p>Для структурирования веб-страницы применяются блокирующие теги, разделяющие контент на логические части. Наиболее важные из них: `<header>`, содержащий заголовок и верхнюю часть сайта; `<nav>`, описывающий навигационную часть; `<main>`, определяющий основную область контента; `<article>` – для размещения отдельных статей или блоков контента; `<aside>` – для боковой панели или дополнительной информации; `<footer>`, заключающий нижнюю часть сайта с информацией и контактами. Правильное использование этих тегов позволяет поисковым системам лучше понимать структуру страницы и улучшать ее ранжирование. Важно также использовать semantically correct теги для семантического смысла данных.</p>
<h4>Какую роль играют атрибуты тегов в HTML?</h4>
<p>Атрибуты тегов предоставляют дополнительную информацию о содержании и поведении элементов страницы. Например, атрибут `src` в теге `<img>` указывает адрес изображения, а `href` в теге `<a>` - адрес ссылки. Атрибуты помогают определить поведение элементов, стиль их отображения, размер и другие характеристики. Благодаря атрибутам код становится более информативным и гибким, что улучшает его читаемость и возможности дальнейшей модификации. Кроме того, атрибуты позволяют связывать элементы страницы с внешними ресурсами (например, стилями CSS или скриптами JavaScript).</p>
<h4>Нужно ли мне изучать CSS, если я работаю только с HTML?</h4>
<p>Хотя HTML отвечает за структуру страницы, CSS отвечает за её внешний вид. Без CSS страница будет выглядеть просто как набор текста и элементов, без оформления, цвета, размера шрифтов и так далее. Поэтому, даже если вы только начинаете создавать сайты с помощью HTML, ознакомление с CSS крайне полезно. CSS позволяет влиять на отображение элементов, создавая визуально привлекательный и удобный для пользователя интерфейс. Понимание CSS позволит вам более творчески подойти к проектированию страниц и улучшить взаимодействие пользователя с сайтом.</p>
<h4>Какие инструменты помогают проверить правильность кода HTML?</h4>
<p>Для проверки кода HTML можно использовать инструменты онлайн-валидаторов. Они анализируют код и выявляют ошибки синтаксиса, несоответствия стандартам и другие проблемы. Некоторые валидаторы предоставляют подробные сообщения об обнаруженных ошибках, помогая их быстро исправить. У разных браузеров также есть встроенные инструменты для проверки HTML-кода. Используйте их для просмотра отображения страниц в разных браузерах. Эти инструменты позволяют проверить, как страница отображается и функционирует с помощью разных браузеров и найти ошибки. Эти инструменты полезны для избежания распространённых проблем с отображением веб-страницы.</p> </div>
<div class="article-footer">
<div class="tags">
<a href="/blog/veb-razrabotka/">Веб-разработка</a>
</div>
<div class="blog-share">
<span>Поделиться:</span>
<div class="ya-share2" data-curtain data-shape="round" data-services="vkontakte,telegram,viber,whatsapp">
<div class="ya-share2__container ya-share2__container_size_m ya-share2__container_color-scheme_normal ya-share2__container_shape_round">
<ul class="ya-share2__list ya-share2__list_direction_horizontal">
<li class="ya-share2__item ya-share2__item_service_vkontakte">
<a class="ya-share2__link" href="https://vk.com/share.php?url=https://kimgid.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/&title=Язык HTML и создание сайтов на языке разметки гипертекста&utm_source=share2" rel="nofollow noopener" target="_blank" title="ВКонтакте">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">ВКонтакте</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_telegram">
<a class="ya-share2__link" href="https://t.me/share/url?url=https://kimgid.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/&text=Язык HTML и создание сайтов на языке разметки гипертекста&utm_source=share2" target="_blank" rel="nofollow noopener">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">Telegram</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_viber">
<a class="ya-share2__link" href="viber://forward?text=Блог kimgid https://kimgid.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/&utm_source=share2" rel="nofollow" target="_blank" title="Viber">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">Viber</span>
</a>
</li>
<li class="ya-share2__item ya-share2__item_service_whatsapp">
<a class="ya-share2__link" href="https://api.whatsapp.com/send?text=Язык HTML и создание сайтов на языке разметки гипертекста https://kimgid.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/&utm_source=share2" rel="nofollow noopener" target="_blank" title="WhatsApp">
<span class="ya-share2__badge">
<span class="ya-share2__icon"></span>
</span>
<span class="ya-share2__title">WhatsApp</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<meta property="og:type" content="website">
<meta property="og:site_name" content="arenaseo.ru">
<meta property="og:type" content="article" />
<meta name="author" content="" />
<meta property="article:published_time" content="24.02.2025 03:02:41" />
<meta property="article:modified_time" content="10.03.2025 10:03:43" />
<meta property="og:url" content="https://arenaseo.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/">
<meta property="og:locale" content="ru">
<meta property="og:title" content="Блог \ Язык HTML и создание сайтов на языке разметки гипертекста | arenaseo.ru - блог">
<meta property="og:description" content="Изучите основы HTML и создавайте собственные сайты. Практическое руководство по языку разметки гипертекста.">
<meta property="og:image" content="https://arenaseo.ru/upload/iblock/8e8/9l4ulnwg09mk32t2gh5wlp5vy51ahkqa/yazyk_html_i_sozdanie_saytov_na_yazyke_razmetki_giperteksta.png"> <div class="pane related-posts">
<h4 class="decored-title">Похожие статьи</h4>
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/5-shagov-sozdaniya-stranitsi-sajta-na-html-v-bloknote-s-nulya/"><img src="/upload/iblock/774/jawgykd2sb08zh57m6cgzint0pl1lopr/5_shagov_sozdaniya_stranicy_sayta_na_html_v_bloknote_s_nulya.png" alt="5 шагов создания страницы сайта на html в блокноте с нуля"></a></div>
<div class="post-preview-title"><a href="/blog/5-shagov-sozdaniya-stranitsi-sajta-na-html-v-bloknote-s-nulya/">5 шагов создания страницы сайта на html в блокноте с нуля</a></div>
<span>01/12/2025</span>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/professiya-verstalshik-ili-kto-zastavlyaet-dizajn-rabotat/"><img src="/upload/iblock/dd4/c9o280hs4fhcpo7dv42nseh6u38uz3ly/vazhnye_faktory_pri_ustroystve_na_rabotu_dlya_dizaynerov.png" alt="Профессия верстальщик, или Кто заставляет дизайн работать"></a></div>
<div class="post-preview-title"><a href="/blog/professiya-verstalshik-ili-kto-zastavlyaet-dizajn-rabotat/">Профессия верстальщик, или Кто заставляет дизайн работать</a></div>
<span>01/21/2025</span>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="post-preview">
<div class="post-preview-cover"><a href="/blog/veb-razrabotchik-eto-chem-on-zanimaetsya-i-skolko-poluchaet/"><img src="/upload/iblock/07b/9h0o0ujvwhr43xm3ldnr27jtrels1rfi/veb_razrabotchik_eto_chem_on_zanimaetsya_i_skolko_poluchaet.png" alt="Веб разработчик это - чем он занимается и сколько получает"></a></div>
<div class="post-preview-title"><a href="/blog/veb-razrabotchik-eto-chem-on-zanimaetsya-i-skolko-poluchaet/">Веб разработчик это - чем он занимается и сколько получает</a></div>
<span>12/17/2024</span>
</div>
</div>
</div>
</div>
<div class="pane pe-0 ps-0">
<div class="decored-title">0 Комментариев</div>
<div class="comm-list">
</div>
</div>
<div class="pane">
<div>Комментариев на модерации: 0</div>
<div class="decored-title">Оставьте комментарий</div>
<div class="comm-form">
<form method="post" enctype="multipart/form-data" class="comment form">
<div class="row">
<div class="col-lg-12 mb-3">
<div class="rate-block">
<label>Ваша оценка</label>
<div class="rating">
<div class="votes_block with-text">
<div class="ratings">
<div class="item-rating" data-message="Очень плохо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Плохо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Нормально"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Хорошо"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
<div class="item-rating" data-message="Отлично"><i class="svg inline svg-inline-star" aria-hidden="true">
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_172_19507)">
<path d="M8.56997 7.63003L1.89997 8.60003H1.77997C1.60144 8.64504 1.4388 8.73847 1.30997 8.87003C1.15884 9.00184 1.05084 9.17605 0.999975 9.37003C0.955087 9.55061 0.955087 9.73944 0.999975 9.92003C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9682 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.7958 22.9448 18.9759 22.9641 19.1517 22.936C19.3275 22.9078 19.4926 22.8333 19.63 22.72C19.7753 22.6058 19.886 22.4534 19.95 22.28C20.0213 22.106 20.0421 21.9154 20.01 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.9831 24 9.80003C24.0302 9.61794 24.0094 9.43104 23.94 9.26003C23.8694 9.08756 23.7558 8.93607 23.61 8.82003C23.467 8.70171 23.2938 8.62554 23.11 8.60003L16.43 7.60003L13.43 1.60003C13.3414 1.42657 13.2064 1.28115 13.04 1.18003C12.8812 1.06898 12.6936 1.00645 12.5 1.00003C12.305 0.99859 12.1138 1.0542 11.95 1.16003C11.7835 1.26115 11.6485 1.40657 11.56 1.58003L8.56997 7.63003Z" fill="#E5C45B"></path>
<path d="M23.93 9.25997C23.8594 9.08751 23.7458 8.93602 23.6 8.81997C23.457 8.70166 23.2838 8.62548 23.1 8.59997L16.42 7.59997L13.42 1.59997C13.3314 1.42651 13.1964 1.2811 13.03 1.17997C12.8667 1.07244 12.6755 1.01514 12.48 1.01514C12.2845 1.01514 12.0933 1.07244 11.93 1.17997C11.7635 1.2811 11.6285 1.42651 11.54 1.59997L8.53997 7.64997L1.89997 8.59997H1.77997C1.60144 8.64499 1.4388 8.73842 1.30997 8.86997C1.15884 9.00179 1.05084 9.17599 0.999975 9.36997C0.955087 9.55056 0.955087 9.73939 0.999975 9.91997C1.04781 10.0996 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0531 5.02891 22.2355 5.10997 22.4C5.19238 22.5687 5.3206 22.7107 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.18433 23.0097 6.36777 22.9681 6.52997 22.88L12.53 19.74L18.53 22.88H18.63C18.801 22.9494 18.9879 22.9702 19.17 22.94C19.3552 22.9196 19.5298 22.8428 19.67 22.72C19.8153 22.6057 19.926 22.4534 19.99 22.28C20.0613 22.1059 20.0821 21.9153 20.05 21.73L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1548 23.9657 9.98305 24 9.79997C24.027 9.61696 24.0028 9.43003 23.93 9.25997Z" fill="#DDDDDD"></path>
<path opacity="0.07" d="M12.5 2.00002L15.5 8.05002C15.5723 8.19372 15.6783 8.31785 15.8089 8.41186C15.9394 8.50586 16.0907 8.56698 16.25 8.59002L23 9.60002C23 9.60002 23 9.60002 23.05 9.60002C23.1 9.60002 23 9.66002 23 9.66002L18.18 14.35C18.0627 14.4635 17.975 14.6039 17.9244 14.759C17.8739 14.9141 17.862 15.0793 17.89 15.24L19 22L13 18.83C12.8596 18.7508 12.7011 18.7095 12.54 18.71C12.3758 18.7108 12.2144 18.752 12.07 18.83L5.99997 22V21.95L7.13997 15.33C7.16791 15.1693 7.15609 15.0041 7.10554 14.849C7.05499 14.6939 6.96725 14.5535 6.84997 14.44L1.99997 9.65002V9.60002L8.64997 8.60002C8.80921 8.57698 8.96053 8.51586 9.0911 8.42186C9.22167 8.32785 9.32762 8.20372 9.39997 8.06002L12.4 1.99002M12.4 0.990017C12.205 0.98858 12.0138 1.0442 11.85 1.15002C11.6835 1.25114 11.5485 1.39656 11.46 1.57002L8.45997 7.62002L1.89997 8.60002H1.77997C1.60144 8.64503 1.4388 8.73846 1.30997 8.87002C1.15884 9.00183 1.05084 9.17604 0.999975 9.37002C0.955087 9.5506 0.955087 9.73943 0.999975 9.92002C1.04781 10.0997 1.14477 10.2624 1.27997 10.39L6.15997 15.1L4.99997 21.75V21.87C4.99106 22.0532 5.02891 22.2356 5.10997 22.4C5.19238 22.5687 5.3206 22.7108 5.47997 22.81C5.6303 22.9241 5.8115 22.9903 5.99997 23C6.16837 22.9978 6.33347 22.9531 6.47997 22.87L12.48 19.73L18.48 22.87H18.58C18.7086 22.944 18.8521 22.9884 19 23H19.16C19.3452 22.9796 19.5198 22.9028 19.66 22.78C19.8053 22.6657 19.916 22.5134 19.98 22.34C20.0513 22.166 20.0721 21.9753 20.04 21.79L18.84 15.1L23.68 10.39L23.77 10.3C23.8867 10.1549 23.9657 9.98309 24 9.80002C24.0302 9.61793 24.0094 9.43103 23.94 9.26002C23.8694 9.08755 23.7558 8.93606 23.61 8.82002C23.467 8.7017 23.2938 8.62553 23.11 8.60002L16.43 7.60002L13.43 1.60002C13.3414 1.42656 13.2064 1.28114 13.04 1.18002C12.8812 1.06897 12.6936 1.00644 12.5 1.00002L12.4 0.990017Z" fill="black"></path>
</g>
<defs>
<clipPath id="clip0_172_19507">
<rect width="25" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</i></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="">Ваше имя</label>
<div class="input-box" required>
<i class="far fa-user"></i>
<input type="text" class="form-control" required name="name">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="">Ваша почта</label>
<div class="input-box" required>
<i class="far fa-envelope"></i>
<input type="email" class="form-control" required name="email">
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="input-box">
<i class="far fa-comment-alt"></i>
<textarea name="comment" id="" class="form-control"></textarea>
</div>
</div>
<input type="hidden" name="article" value="92036">
<input type="hidden" name="rating" value="5" class="rating_form">
<input type="hidden" name="link" value="https://arenaseo.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/">
<input type="hidden" name="ip" value="3.145.149.120">
<input type="hidden" name="sid" value="50">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Прикрепите фото</label>
<input type="file" class="form-control" name="file">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree2" name="agreement" checked>
<label class="form-check-label" for="agree2">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-4">
<button type="submit" class="btn btn-full">Отправить</button>
</div>
</div>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваш комментарий добавлен! <br>Он будет размещен после модерации</p>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="widget">
<h3>Популярные статьи</h3>
<div class="wiget-grp">
</div>
</div>
<div class="widget">
<h3>Categories</h3>
<ul class="cat-nav">
<li><a href="/blog/adobe-illustrator/">Adobe Illustrator</a></li>
<li><a href="/blog/autocad/">AutoCad</a></li>
<li><a href="/blog/blender-i-3d-grafika/">Blender и 3D-графика</a></li>
<li><a href="/blog/ceo/">CEO</a></li>
<li><a href="/blog/chief-technical-officer/">Chief Technical Officer</a></li>
<li><a href="/blog/crm-sistemy/">CRM-системы</a></li>
<li><a href="/blog/digital-marketing/">Digital-маркетинг</a></li>
<li><a href="/blog/digital-prodvizhenie/">Digital-продвижение</a></li>
<li><a href="/blog/erp/">ERP</a></li>
<li><a href="/blog/figma/">Figma</a></li>
<li><a href="/blog/google-sheets/">Google Sheets</a></li>
<li><a href="/blog/it/">IT</a></li>
<li><a href="/blog/microsoft-excel/">Microsoft Excel</a></li>
<li><a href="/blog/microsoft-powerpoint/">Microsoft Powerpoint</a></li>
<li><a href="/blog/microsoft-word/">Microsoft Word</a></li>
<li><a href="/blog/pdf-redaktor/">PDF редактор</a></li>
<li><a href="/blog/pr-menedzher/">PR-менеджер</a></li>
<li><a href="/blog/python-i-programmirovanie/">Python и программирование</a></li>
<li><a href="/blog/seo/">SEO</a></li>
<li><a href="/blog/smm/">SMM</a></li>
<li><a href="/blog/soft-skills/">Soft Skills</a></li>
<li><a href="/blog/unity-i-igrovye-dvizhki/">Unity и игровые движки</a></li>
<li><a href="/blog/vr-i-metavselennye/">VR и метавселенные</a></li>
<li><a href="/blog/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li>
<li><a href="/blog/akademicheskie-issledovaniya/">Академические исследования</a></li>
<li><a href="/blog/analitika/">Аналитика</a></li>
<li><a href="/blog/auditor/">Аудитор</a></li>
<li><a href="/blog/biznes/">Бизнес</a></li>
<li><a href="/blog/biznes-analitika/">Бизнес-аналитика</a></li>
<li><a href="/blog/bukhgalterskiy-uchet/">Бухгалтерский учет</a></li>
<li><a href="/blog/veb-razrabotka/">Веб-разработка</a></li>
<li><a href="/blog/vostrebovannye-professii/">Востребованные профессии</a></li>
<li><a href="/blog/vstupitelnye-ekzameny/">Вступительные экзамены</a></li>
<li><a href="/blog/vysshee-obrazovanie/">Высшее образование</a></li>
<li><a href="/blog/gost/">ГОСТ</a></li>
<li><a href="/blog/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li>
<li><a href="/blog/dizayn-i-tvorchestvo/">Дизайн и творчество</a></li>
<li><a href="/blog/dizayn-interera/">Дизайн интерьера</a></li>
<li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li>
<li><a href="/blog/dolzhnostnye-instruktsii/">Должностные инструкции</a></li>
<li><a href="/blog/eda-i-kulinariya/">Еда и кулинария</a></li>
<li><a href="/blog/zdorove-i-meditsina/">Здоровье и медицина</a></li>
<li><a href="/blog/igrovye-metodiki-v-obuchenii/">Игровые методики в обучении</a></li>
<li><a href="/blog/inzhener-pto/">инженер ПТО</a></li>
<li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li>
<li><a href="/blog/iskusstvo-i-kultura/">Искусство и культура</a></li>
<li><a href="/blog/karernoe-razvitie/">Карьерное развитие</a></li>
<li><a href="/blog/konvertor-izobrazheniy/">Конвертор изображений</a></li>
<li><a href="/blog/korporativnoe-obuchenie/">Корпоративное обучение</a></li>
<li><a href="/blog/krasota-i-ukhod/">Красота и уход</a></li>
<li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li>
<li><a href="/blog/lichnoe-razvitie-i-psikhologiya/">Личное развитие и психология</a></li>
<li><a href="/blog/logistika-i-biznes/">Логистика и бизнес</a></li>
<li><a href="/blog/logistika-i-upravlenie/">Логистика и управление</a></li>
<li><a href="/blog/marketing/">Маркетинг</a></li>
<li><a href="/blog/massazh-i-kosmetologiya/">Массаж и косметология</a></li>
<li><a href="/blog/mediagramotnost/">Медиаграмотность</a></li>
<li><a href="/blog/meditsina-i-zdorove/">Медицина и здоровье</a></li>
<li><a href="/blog/metodologiya-obucheniya/">Методология обучения</a></li>
<li><a href="/blog/metody-obucheniya/">Методы обучения</a></li>
<li><a href="/blog/motivatsiya-studentov/">Мотивация студентов</a></li>
<li><a href="/blog/nalogi/">Налоги</a></li>
<li><a href="/blog/ne-opredeleno/">Не определено</a></li>
<li><a href="/blog/neyroseti/">Нейросети</a></li>
<li><a href="/blog/obrazovanie/">Образование</a></li>
<li><a href="/blog/obrazovanie-i-kursy/">Образование и курсы</a></li>
<li><a href="/blog/obrazovanie-i-obuchenie/">Образование и обучение</a></li>
<li><a href="/blog/obuchenie/">Обучение</a></li>
<li><a href="/blog/obuchenie-sotrudnikov/">Обучение сотрудников</a></li>
<li><a href="/blog/onlayn-kursy/">Онлайн-курсы</a></li>
<li><a href="/blog/oshibka-nekorrektnyy-otvet-ot-ii/">ОШИБКА Некорректный ответ от ИИ</a></li>
<li><a href="/blog/pedagogika/">Педагогика</a></li>
<li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li>
<li><a href="/blog/programmirovanie/">Программирование</a></li>
<li><a href="/blog/prodazhi/">Продажи</a></li>
<li><a href="/blog/produktovyy-menedzhment/">Продуктовый менеджмент</a></li>
<li><a href="/blog/professii-i-karera/">Профессии и карьера</a></li>
<li><a href="/blog/professionalnye-navyki/">Профессиональные навыки</a></li>
<li><a href="/blog/professionalnye-navyki-i-kvalifikatsii/">Профессиональные навыки и квалификации</a></li>
<li><a href="/blog/psikhologiya/">Психология</a></li>
<li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li>
<li><a href="/blog/razrabotka-igr/">Разработка игр</a></li>
<li><a href="/blog/rukovodstva-i-gaydy/">Руководства и гайды</a></li>
<li><a href="/blog/saund-dizayn-i-muzyka-v-igrakh/">Саунд-дизайн и музыка в играх</a></li>
<li><a href="/blog/sdelki-s-nedvizhimostyu/">Сделки с недвижимостью</a></li>
<li><a href="/blog/sotsialnye-aspekty-obrazovaniya/">Социальные аспекты образования</a></li>
<li><a href="/blog/spetsialnosti/">Специальности</a></li>
<li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li>
<li><a href="/blog/tekhnicheskie-distsipliny/">Технические дисциплины</a></li>
<li><a href="/blog/tekhnolog/">Технолог</a></li>
<li><a href="/blog/tekhnologii-i-instrumenty/">Технологии и инструменты</a></li>
<li><a href="/blog/trudovoe-zakonodatelstvo-i-pravo/">Трудовое законодательство и право</a></li>
<li><a href="/blog/universitetskie-programmy/">Университетские программы</a></li>
<li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li>
<li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li>
<li><a href="/blog/finansovye-aspekty-igrovoy-industrii/">Финансовые аспекты игровой индустрии</a></li>
<li><a href="/blog/finansy/">Финансы</a></li>
<li><a href="/blog/fotografiya-i-redaktirovanie-foto/">Фотография и редактирование фото</a></li>
<li><a href="/blog/frilans/">Фриланс</a></li>
<li><a href="/blog/tsifrovye-navyki/">Цифровые навыки</a></li>
<li><a href="/blog/tsifrovye-tekhnologii/">Цифровые технологии</a></li>
<li><a href="/blog/shakhmaty-i-nastolnye-igry/">Шахматы и настольные игры</a></li>
<li><a href="/blog/elektronnye-knigi/">Электронные книги</a></li>
<li><a href="/">Главная</a></li>
<li><a href="/blog/" class="selected">Блог</a></li>
</ul>
</div>
</div>
</div>
</div>
</main>
<!-- Modal 1 -->
<div class="modal modal-wide fade" id="modal-1" tabindex="-1" aria-labelledby="modal-1Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-help">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-help-lft">
<span>Поможем подобрать курс</span>
чтобы вы получили повышение <br> или новую профессию.
</div>
<div class="modal-help-rht">
<div class="modal-form-title">Оставьте заявку, и мы перезвоним</div>
<form method="post" enctype="multipart/form-data" class="help">
<div class="form-group">
<input type="text" placeholder="Имя" class="form-control" name="name">
</div>
<div class="form-group">
<input type="text" placeholder="Телефон" class="form-control" name="tel">
</div>
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" name="email">
</div>
<div class="form-group">
<input type="hidden" placeholder="Статья" class="form-control" name="article" value="92036">
<input type="hidden" name="link" value="https://arenaseo.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/">
<input type="hidden" name="ip" value="3.145.149.120">
<input type="hidden" name="sid" value="50">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree" name="agreement" checked>
<label class="form-check-label" for="agree">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
<button type="submit" class="btn btn-primary btn-full">Оставить заявку</button>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div class="modal modal-simple fade" id="modal-2" tabindex="-1" aria-labelledby="modal-2Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-title">Узнайте какая профессия вам подходит</div>
<p class="text-center">Пройдите тест - это займет не больше 10 минут</p>
<form method="post" enctype="multipart/form-data" class="profession">
<div class="form-group">
<input type="text" placeholder="Имя" class="form-control" name="name">
</div>
<div class="form-group">
<input type="email" placeholder="Email" class="form-control" name="email">
</div>
<div class="form-group">
<input type="hidden" placeholder="Статья" class="form-control" name="article" value="92036">
<input type="hidden" name="link" value="https://arenaseo.ru/blog/yazik-html-i-sozdanie-sajtov-na-yazike-razmetki-giperteksta/">
<input type="hidden" name="ip" value="3.145.149.120">
<input type="hidden" name="sid" value="50">
</div>
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="agree1" name="agreement" checked>
<label class="form-check-label" for="agree1">
Я соглашаюсь на <a href="#">обработку персональных данных</a>
</label>
</div>
<button type="submit" class="btn btn-primary btn-full">Пройти тест</button>
</form>
<div class="modal-content inline_success">
<div class="modal-body">
<div class="thank-ico">
<img src="/local/templates/kimgid/img/check.svg" width="93" alt="">
</div>
<p>Ваша заявка отправлена! <br>Мы скоро с Вами свяжемся!</p>
</div>
</div>
</div>
</div>
</div><footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-xl-4">
<a href="/" class="logo-brand">
<span><img src="/favicon.ico" alt=""></span>
ArenaBoost
</a>
</div>
<div class="col-6 col-sm-4 col-md-4 col-xl-4">
</div>
<div class="col-6 col-sm-4 col-md-4 col-xl-4">
</div>
</div>
</div>
</div>
<div class="footer-btm">
<div class="container">
<span>© 2024</span> <span>Edtech Seo</span>
<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(100042202, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/100042202" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </div>
</div>
</footer>
<svg width="0" height="0" style="display: none;">
<symbol id="prev" viewBox="0 0 24 24" fill="none">
<path d="M15 6L9 12L15 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
<symbol id="next" viewBox="0 0 24 24" fill="none">
<path d="M9 6L15 12L9 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
</svg>
</body>
</html>
