используются для создания кнопок, которые выполняют определенные действия при нажатии.С помощью HTML-тегов можно также встроить мультимедийные элементы на веб-страницу. Теги, позволяют воспроизводить видео и аудио файлы прямо на странице, без необходимости перехода на другие сайты или приложения. Это улучшает пользовательский опыт и позволяет разработчикам создавать более интерактивные и привлекательные интерфейсы.
HTML-теги также важны для оптимизации веб-страниц для поисковых систем. Теги
,<meta>,</p><header>,<footer> позволяют указывать важные атрибуты и метаданные страницы, такие как ключевые слова, описание и автор. Это помогает поисковым системам правильно отображать и индексировать страницы, что в свою очередь повышает их видимость и рейтинг в поисковой выдаче.<table><tr><th>Тег</th><th>Описание</th></tr><tr><td><b>h1</b></td><td>Определяет заголовок верхнего уровня</td></tr><tr><td><b>p</b></td><td>Определяет абзац текста</td></tr><tr><td><b>ul</b></td><td>Определяет неупорядоченный список</td></tr><tr><td><b>a</b></td><td>Определяет гиперссылку</td></tr><tr><td><b>nav</b></td><td>Определяет контейнер для навигационных ссылок</td></tr><tr><td><b>input</b></td><td>Определяет поле для ввода данных</td></tr><tr><td><b>video</b></td><td>Определяет видео элемент</td></tr><tr><td><b>title</b></td><td>Определяет заголовок веб-страницы</td></tr></table><h2 id="rabota-s-tekstom">Работа с текстом</h2><p>Веб-разработка не обходится без работы с текстом. HTML предлагает различные способы стилизации и выделения текста.</p><p>Один из самых распространенных способов выделить текст — это использование тега <strong>. Он позволяет сделать текст жирным, чтобы он привлекал внимание читателя.</p><p>Другой способ выделить текст — это использование тега <em>. Он используется для выделения текста курсивом. Он часто используется для выделения важных фраз или цитат.</p><p>Теги <strong> и <em> можно комбинировать, чтобы добиться более сильного визуального эффекта и привлечь внимание к определенным фразам или блокам текста.</p><p>Кроме того, HTML предлагает множество других тегов для работы с текстом, таких как:</p><h1 id="p-dlya-zagolovkov-raznyh-urovney-p-dlya-abzatsev">—<h6> для заголовков разных уровней,<p>для абзацев, <span> для выделения отдельных слов или символов и многие другие.</p><p>Используя сочетание этих тегов, веб-разработчики могут создавать структурированный и стилизованный текст, делая его более читабельным и привлекательным для пользователей.</p><h2 id="ispolzovanie-tegov-dlya-formatirovaniya-teksta">Использование тегов для форматирования текста</h2><p>Теги в HTML позволяют использовать различные способы форматирования текста, делая его более удобочитаемым и привлекательным для пользователей. Они помогают организовать содержимое страницы и выделить важные элементы.</p><p>Один из самых базовых тегов для форматирования текста — тег <strong> <strong>. Он позволяет выделить текст жирным шрифтом, подчеркнув его важность.</p><p>Тег <em> <em> используется для выделения текста курсивом. Таким образом, пользователи могут легко различить выделенные фразы или идеи.</p><p>Тег <u> <u> применяется для подчеркивания текста. У некоторых пользователей подчеркнутый текст вызывает больше внимания, поэтому этот тег может быть полезен для выделения ключевых слов или фраз.</p><table><tr><th>Тег</th><th>Описание</th></tr><tr><td><strong> <strong></td><td>Выделение текста жирным шрифтом</td></tr><tr><td><em> <em></td><td>Выделение текста курсивом</td></tr><tr><td><u> <u></td><td>Подчеркивание текста</td></tr></table><p>Теги для форматирования текста — это мощный способ сделать содержимое страницы более привлекательным и понятным для пользователей. Используйте их с умом и аккуратностью, чтобы достичь желаемого вида и эффекта.</p><h2 id="vstavka-ssylok-i-izobrazheniy">Вставка ссылок и изображений</h2><p>Для создания ссылки используется тег <strong><a></strong>. Атрибут <strong>href</strong> указывает адрес страницы, на которую нужно перейти при клике на ссылку. Например:</p><p><strong><a href=»http://www.example.com»>Это ссылка на example.com</a></strong></p><p>В результате будет отображена ссылка «Это ссылка на example.com», на которую можно будет перейти, кликнув на нее.</p><p>Если нужно открыть ссылку в новом окне или во вкладке браузера, то к тегу <strong><a></strong> добавляется атрибут <strong>target</strong> со значением <strong>_blank</strong>. Например:</p><p><strong><a href=»http://www.example.com» target=»_blank»>Это ссылка, которая откроется в новом окне</a></strong></p><p>Для вставки изображения используется тег <strong><img></strong>. Атрибут <strong>src</strong> указывает путь к изображению. Например:</p><p><strong><img src=»image.jpg» alt=»Описание изображения»></strong></p><p>В результате будет отображено изображение с указанным путем и описанием.</p><p>Также можно добавить ссылку на изображение, чтобы при клике на него открывалась другая страница. Для этого к изображению добавляется тег <strong><a></strong> с атрибутом <strong>href</strong>. Например:</p><p><strong><a href=»http://www.example.com»><img src=»image.jpg» alt=»Описание изображения»></a></strong></p><p>В результате будет отображено изображение с описанием, на которое можно будет кликнуть и перейти по указанной ссылке.</p><p>Однако следует помнить, что при использовании изображений и ссылок необходимо следить за их оптимизацией и проверять, чтобы ссылки были актуальными и не вели на несуществующие страницы.</p><h2 id="struktura-stranitsy">Структура страницы</h2><p>Структура HTML-страницы состоит из нескольких важных элементов.</p><p>Верхняя часть страницы обычно содержит информацию о документе, такую как заголовок, автор, описание и т. д. Эта информация помещается в элемент <strong><head></strong>. Здесь также можно указать стили страницы, подключить скрипты и метаданные.</p><p>Основное содержимое страницы размещается внутри элемента <strong><body></strong>. Здесь размещаются все видимые элементы, такие как текст, изображения, таблицы, ссылки и прочее.</p><p>Страница может быть разделена на логические блоки, каждый из которых обычно помещается в элемент <strong><div></strong>. Это позволяет легко структурировать страницу и применять стили к отдельным блокам.</p><p>Текстовое содержимое страницы обычно разбивается на абзацы, для этого используется тег <strong><p></strong>. Для выделения важных фраз или слов можно использовать теги <strong><strong></strong> или <strong><em></strong> соответственно.</p><p>Кроме того, ссылки на другие страницы или документы создаются с помощью тега <strong><a></strong>, изображения вставляются с помощью тега <strong><img></strong>, а таблицы — с помощью тега <strong><table></strong>.</p><p>Пример структуры страницы:</p><pre>
<code>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Основное содержимое страницы.</p>
<div>
<p>Логический блок 1.</p>
<p>Логический блок 2.</p>
</div>
<a href="https://example.com">Ссылка на другую страницу</a>
<img src="image.jpg" alt="Изображение">
<table>
<tr>
<th>Заголовок таблицы</th>
</tr>
<tr>
<td>Строка таблицы</td>
</tr>
</table>
</body>
</html>
</code>
</pre><h2 id="zagolovki-raznyh-urovney">Заголовки разных уровней</h2><p>Заголовки в HTML используются для выделения основных разделов и подразделов документа. Всего в HTML существует 6 уровней заголовков, начиная с <strong><h1></strong> и заканчивая <strong><h6></strong>.</p><table><tr><td></td><td><p>Основной заголовок страницы. Используется для представления основной темы или названия сайта.</p></td></tr><tr><td><h2 id="zagolovok-2">Заголовок 2</h2></td><td><p>Используется для выделения разделов страницы. Обычно следует за заголовком первого уровня.</p></td></tr><tr><td><h3 id="zagolovok-3">Заголовок 3</h3></td><td><p>Используется для подразделов страницы. Обычно следует за заголовком второго уровня.</p></td></tr><tr><td><h4 id="zagolovok-4">Заголовок 4</h4></td><td><p>Используется для подразделов страницы. Обычно следует за заголовком третьего уровня.</p></td></tr><tr><td><h5>Заголовок 5</h5></td><td><p>Используется для подразделов страницы. Обычно следует за заголовком четвертого уровня.</p></td></tr><tr><td><h6>Заголовок 6</h6></td><td><p>Используется для подразделов страницы. Обычно следует за заголовком пятого уровня.</p></td></tr></table><p>Корректное использование заголовков помогает организовать контент и повышает его структурированность. Помимо этого, поисковые системы также обращают внимание на заголовки при определении релевантности страницы к поисковому запросу.</p><h2 id="spiski-markirovannye-i-numerovannye">Списки: маркированные и нумерованные</h2><p>HTML предлагает несколько способов создания списков на веб-странице. Списки могут быть маркированными или нумерованными и используются для представления информации в виде элементов списка.</p><p>Маркированный список (тег</p><ul>) используется для представления элементов списка без какого-либо порядка или последовательности. Каждый элемент списка представляется маркером, по умолчанию точкой, которая указывает на начало нового элемента списка.<p>Пример маркированного списка:</p><ul><li>Элемент 1</li><li>Элемент 2</li><li>Элемент 3</li></ul><p>Нумерованный список (тег</p><ol>) используется для представления элементов списка с порядком или последовательностью. Каждый элемент списка представляется числом, которое указывает на порядок элемента списка. По умолчанию нумерованный список начинается с 1, но можно изменить это значение с помощью атрибута «start».<p>Пример нумерованного списка:</p><ol><li>Элемент 1</li><li>Элемент 2</li><li>Элемент 3</li></ol><p>Маркированные и нумерованные списки могут также содержать вложенные списки, в которых элементы списка могут быть вложены в другие списки. Это позволяет создавать структурированные списки с несколькими уровнями вложенности.</p><p>Используя маркированные и нумерованные списки, вы можете создавать удобные и структурированные списки на веб-страницах.</p><div class="fpm_end"></div></div></article><div class="rating-box"><div class="rating-box__header">Оцените статью</div><div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="40477" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div></div><div class="entry-social"><div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--pinterest" data-social="pinterest" data-url="https://proogorodik.ru/faq/razbiraemsya-s-html-tegami-kak-oni-rabotayut-i-kak-pravilno-ix-ispolzovat/" data-title="Разбираемся с HTML-тегами — как они работают и как правильно их использовать" data-description="HTML — это язык разметки гипертекста, используемый для создания и структурирования веб-страниц. Каждая веб-страница состоит из различных элементов, называемых тегами. Теги — это инструкции, указывающие браузеру, как отображать содержимое веб-страницы. Каждый тег имеет свою уникальную функцию и использование, а также может иметь свои атрибуты. Наиболее популярные теги в HTML включают, но не ограничиваются, <div>, <p>, […]" data-image=""></span></div></div><meta itemprop="author" content="admin"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://proogorodik.ru/faq/razbiraemsya-s-html-tegami-kak-oni-rabotayut-i-kak-pravilno-ix-ispolzovat/" content="Разбираемся с HTML-тегами — как они работают и как правильно их использовать"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><meta itemprop="name" content="proogorodik.ru"><meta itemprop="telephone" content="proogorodik.ru"><meta itemprop="address" content="https://proogorodik.ru/faq"></div></main></div><aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"><div class="sticky-sidebar js-sticky-sidebar"><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="Q_sidebar"></div></div></div></div></aside><div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://proogorodik.ru/faq/rasstoyanie-i-vremya-v-puti-skolko-kilometrov-ot-moskvy-do-yaxromy-mozno-proexat-na-masine-bez-zaderzek/">Расстояние и время в пути — сколько километров от Москвы до Яхромы можно проехать на машине без задержек</a></div><div class="post-card__description">Яхрома — маленький и уютный городок, расположенный</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://proogorodik.ru/faq/yaroslav-mudryi-i-russkaya-pravda-istoriceskoe-nasledie-i-aktualnost-dlya-sovremennosti/">Ярослав Мудрый и Русская правда — историческое наследие и актуальность для современности</a></div><div class="post-card__description">В истории Руси есть много выдающихся правителей, но</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://proogorodik.ru/faq/yaroslav-dronov-talantlivyi-pevec-s-potryasayushhim-golosom-kotoryi-pokoril-serdca-millionov-slusatelei/">Ярослав Дронов — талантливый певец с потрясающим голосом, который покорил сердца миллионов слушателей</a></div><div class="post-card__description">Ярослав Дронов — молодой и перспективный российский</div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://proogorodik.ru/faq/yaroslav-mudryi-velikii-pravitel-kievskoi-rusi-ego-istoriya-i-znamenitye-dostizeniya/">Ярослав Мудрый — великий правитель Киевской Руси — его история и знаменитые достижения</a></div><div class="post-card__description">Ярослав Мудрый — выдающийся политический деятель</div></div></div></div></div></div><div class="site-footer-container "><footer id="colophon" class="site-footer site-footer--style-gray full"><div class="site-footer-inner fixed"><div class="footer-widgets footer-widgets-3"><div class="footer-widget"><div id="nav_menu-3" class="widget widget_nav_menu"><div class="widget-header">Про сайт</div><div class="menu-about_menu-container"><ul id="menu-about_menu" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://proogorodik.ru/faq/kontakty/">Контакты</a></li><li id="menu-item-65" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-65"><a href="/sitemap_index.xml">Карта сайта</a></li></ul></div></div></div><div class="footer-widget"><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-header">Популярные записи</div><div class="widget-articles"><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://proogorodik.ru/faq/kak-vklyucit-boiler-bez-knopki-vklyuceniya-prostye-i-bezopasnye-sposoby-zapuska/">Как включить бойлер без кнопки включения — простые и безопасные способы запуска</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://proogorodik.ru/faq/no-spa-pri-temperature-cto-nuzno-znat-pered-primeneniem-realnye-otzyvy-podrobnaya-instrukciya-i-vozmoznye-pobocnye-effekty/">Но-шпа при температуре — что нужно знать перед применением, реальные отзывы, подробная инструкция и возможные побочные эффекты</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://proogorodik.ru/faq/vera-nadezda-lyubov-osnovy-celoveceskogo-bytiya-znacenie-30-sentyabrya-v-istorii-i-kulture/">Вера, надежда, любовь — основы человеческого бытия — значение 30 сентября в истории и культуре</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://proogorodik.ru/faq/kak-kontrolirovat-appetit-i-pobedit-pereedanie-effektivnye-strategii-dlya-uspesnoi-borby-s-crezmernym-priemom-pishhi/">Как контролировать аппетит и победить переедание — эффективные стратегии для успешной борьбы с чрезмерным приемом пищи</a></div></div></article></div></div></div><div class="footer-widget"><div id="nav_menu-4" class="widget widget_nav_menu"><div class="widget-header">Cookie</div><div class="menu-cookie_menu-container"><ul id="menu-cookie_menu" class="menu"><li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-66"><a rel="privacy-policy" href="https://proogorodik.ru/faq/privacy-policy/">Политика конфиденциальности</a></li><li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="https://proogorodik.ru/faq/soglashenie/">Соглашение (пользовательское)</a></li></ul></div></div></div></div><div class="footer-bottom"><div class="footer-info"> © 2024 proogorodik.ru</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://proogorodik.ru/faq/razbiraemsya-s-html-tegami-kak-oni-rabotayut-i-kak-pravilno-ix-ispolzovat";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="text/javascript" id="reboot-scripts-js-extra">var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":"1"};
var wps_ajax = {"url":"https:\/\/proogorodik.ru\/faq\/wp-admin\/admin-ajax.php","nonce":"f41aa57e97"};</script> <script>window.lazyLoadOptions = {
elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
data_src: "lazy-src",
data_srcset: "lazy-srcset",
data_sizes: "lazy-sizes",
class_loading: "lazyloading",
class_loaded: "lazyloaded",
threshold: 300,
callback_loaded: function(element) {
if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) {
if (element.classList.contains("lazyloaded") ) {
if (typeof window.jQuery != "undefined") {
if (jQuery.fn.fitVids) {
jQuery(element).parent().fitVids();
}
}
}
}
}};
window.addEventListener('LazyLoad::Initialized', function (e) {
var lazyLoadInstance = e.detail.instance;
if (window.MutationObserver) {
var observer = new MutationObserver(function(mutations) {
var image_count = 0;
var iframe_count = 0;
var rocketlazy_count = 0;
mutations.forEach(function(mutation) {
for (i = 0; i < mutation.addedNodes.length; i++) {
if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') {
return;
}
if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') {
return;
}
images = mutation.addedNodes[i].getElementsByTagName('img');
is_image = mutation.addedNodes[i].tagName == "IMG";
iframes = mutation.addedNodes[i].getElementsByTagName('iframe');
is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');
image_count += images.length;
iframe_count += iframes.length;
rocketlazy_count += rocket_lazy.length;
if(is_image){
image_count += 1;
}
if(is_iframe){
iframe_count += 1;
}
}
} );
if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){
lazyLoadInstance.update();
}
} );
var b = document.getElementsByTagName("body")[0];
var config = { childList: true, subtree: true };
observer.observe(b, config);
}
}, false);</script><script data-no-minify="1" async src="https://proogorodik.ru/faq/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script defer src="https://proogorodik.ru/faq/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html>