Abbr (сокращение от английского слова «abbreviation») — это тег HTML, который используется для указания сокращений или акронимов в тексте. Он позволяет пользователям понять значение сокращений, предлагая расшифровку этих сокращений всплывающей подсказкой при наведении курсора на сокращение.
Основное преимущество использования тега abbr состоит в том, что он повышает удобство использования и понятность текста для пользователей. Например, если в тексте есть сокращение или акроним, которое может быть непонятно для некоторых пользователей или читателей, вы можете использовать abbr для указания полного значения этого сокращения. Это поможет пользователям быстро определить смысл сокращений и прочитать текст без необходимости искать значения сокращений в других источниках.
Пример использования тега abbr:
<p>Добро пожаловать в нашу компанию <strong><abbr title="Международная корпорация по производству качественных товаров">МКТКТ</abbr></strong>!</p>
В данном примере мы использовали abbr для сокращения «Международная корпорация по производству качественных товаров» до «МКТКТ». При наведении курсора на сокращение «МКТКТ», пользователю будет показана всплывающая подсказка с полным значением. Это помогает установить ясное соответствие сокращений и их расшифровок, делая текст более понятным и удобным для чтения.
Abbr html что это: пример объяснения о теге abbr в HTML
Abbr (от англ. аббревиатура) — это тег в HTML, который используется для обозначения и предоставления сокращений или аббревиатур в тексте веб-страницы.
Тег abbr состоит из двух частей: открывающего и закрывающего тега. Внутри тега написано сокращение или аббревиатура, а в атрибуте title указывается полное значение или полное объяснение сокращения или аббревиатуры.
Пример использования тега abbr:
HTML (от англ. HyperText Markup Language) — это язык разметки веб-страниц, используемый для создания структуры и отображения содержимого веб-страницы.
Расшифровка аббревиатуры HTML: HTML.
Когда пользователь наводит курсор мыши на сокращение или аббревиатуру, браузер отобразит полное значение или объяснение, которое было указано в атрибуте title. Это позволяет улучшить понимание сокращений или аббревиатур для пользователей, которые не знакомы с ними.
Можно указывать несколько сокращений или аббревиатур внутри одного тега abbr, разделяя их запятыми. Также можно использовать тег abbr внутри других тегов, таких как li, p, span и других, чтобы предоставить объяснение сокращения или аббревиатуры в определенном контексте.
Определение и использование
HTML-элемент <abbr> используется для создания сокращений и отображения их полного значения при наведении указателя мыши или получении фокуса элементом.
Внутри тега <abbr> должен находиться текст сокращения, а с помощью атрибута title задается полное значение, которое будет отображаться при наведении или фокусировке элемента.
Например:
«`html
Документ создан с использованием HTML.
«`
Браузеры, которые поддерживают элемент <abbr>, будут отображать текст «HTML» с подсказкой «HyperText Markup Language» при наведении на него указателя мыши.
Создавая сокращения с использованием <abbr>, мы делаем контент более доступным, поскольку пользователь может узнать полное значение сокращения, даже если оно ему не знаком.
Когда используется множество сокращений на странице, рекомендуется включать список сокращений внизу страницы, чтобы пользователь мог с легкостью ознакомиться с их значениями.
Например:
«`html
Список сокращений
| Сокращение |
Значение |
| CSS |
Каскадные таблицы стилей |
| JS |
JavaScript |
| HTTP |
Протокол передачи гипертекста |
«`
В этом примере используется таблица, чтобы предоставить пользователю удобный способ просмотра всех сокращений и их значений.
Использование элемента <abbr> помогает улучшить доступность и понимание контента для всех пользователей.
Зачем нужен тег abbr?
Тег abbr используется для определения сокращений или аббревиатур в тексте. Он обозначает, что указанное слово или фраза являются сокращенными и имеют полное значение.
При наличии тега abbr, возможна следующая визуальная и смысловая интерпретация:
- Браузеры могут отобразить сокращение в виде всплывающей подсказки при наведении курсора на сокращенное слово или фразу.
- Скринридеры и другие инструменты ассистивной технологии могут прочитать полное значение сокращения.
- Поисковые системы могут использовать информацию из тега abbr для определения релевантности страницы к запросам пользователей.
Для использования тега abbr необходимо указать атрибут title, который содержит полное значение сокращения:
| Пример |
Описание |
| <p>Москва — столица Российской Федерации</p> |
Обычный текст без использования тега abbr. |
| <p>Москва — <abbr title=»Российская Федерация»>РФ</abbr>.</p> |
Текст с использованием тега abbr, где «РФ» является сокращением, а всплывающая подсказка содержит полное значение «Российская Федерация». |
Как использовать тег abbr в HTML?
<abbr> — это тег HTML, который используется для создания сокращений или аббревиатур с пояснениями веб-страницы. Он позволяет веб-разработчикам добавлять сокращения, которые будут автоматически расшифрованы для пользователей.
Использование тега <abbr> состоит из двух основных частей: сокращение и расшифровка. Сокращение пишется в атрибуте title, который показывает пользователю, что скрывается за этим сокращением.
Например, чтобы добавить сокращение «HTML» с расшифровкой «HyperText Markup Language», вы можете использовать следующий код:
<abbr title="HyperText Markup Language">HTML</abbr>
Здесь тег <abbr> является контейнером для сокращения «HTML» и атрибута title с расшифровкой «HyperText Markup Language».
При просмотре страницы пользователи могут навести курсор на сокращение, и им будет показано соответствующее пояснение в виде всплывающей подсказки.
Вот пример кода, демонстрирующий использование тега <abbr>:
<p>HTML означает <abbr title="HyperText Markup Language">HTML</abbr>, который используется для создания веб-страниц.</p>
Этот код создает абзац, в котором слово «HTML» является сокращением, а расшифровка «HyperText Markup Language» будет показана во всплывающей подсказке.
Примеры использования тега abbr
Тег abbr (от англ. «abbreviation» — сокращение) используется для указания сокращений или аббревиатур на веб-странице. Он позволяет добавить полный текст сокращения в атрибут title, чтобы пользователь мог узнать расшифровку сокращения при наведении курсора на него.
Вот несколько примеров использования тега abbr:
-
Сокращение для HTML. Код:
<abbr title="HyperText Markup Language">HTML</abbr>
Результат: HTML
-
Сокращение для CSS. Код:
<abbr title="Cascading Style Sheets">CSS</abbr>
Результат: CSS
-
Сокращение для JavaScript. Код:
<abbr title="JavaScript">JS</abbr>
Результат: JS
Тег abbr особенно полезен, когда на странице встречаются множество сокращений или терминов, требующих пояснения. Он позволяет пользователю быстро получить информацию о смысле сокращения без необходимости покидать страницу и искать объяснение в другом месте.
Пример использования тега abbr в таблице
| Сокращение |
Расшифровка |
| CSS |
Cascading Style Sheets |
| HTTP |
Hypertext Transfer Protocol |
| XML |
Extensible Markup Language |
В приведенном выше примере тег abbr использован внутри таблицы для отображения сокращений и их расшифровок. При наведении курсора на сокращение, пользователь видит полный текст в атрибуте title.
Используйте тег abbr, чтобы сделать вашу веб-страницу более информативной и удобной для пользователей.
Выводы
В данной статье мы рассмотрели тег в HTML и его применение. Он используется для указания сокращений и акронимов, которые могут быть непонятны для пользователя. Тег позволяет добавить дополнительную информацию и разъяснения к таким сокращениям.
Мы также разобрали примеры использования тега . Он может быть полезен для описания сокращений в тексте, например, в научных или технических статьях. Тег позволяет пользователю быстро понять значение сокращений и продолжить чтение без лишних прерываний.
Кроме того, мы узнали, что тег поддерживает атрибуты и <data>. Атрибут <title> позволяет добавить всплывающую подсказку с дополнительной информацией о сокращении, когда пользователь наводит курсор на него. Атрибут <data> позволяет добавить пользовательские данные, которые могут быть использованы для различных целей, например, для поиска или обработки сокращений.</p>
<p>Тег <abbr> является важным элементом для создания доступных и понятных веб-страниц. Он помогает пользователям быстро и легко понять сокращения, даже если они не знакомы с данной терминологией. При использовании тега <abbr> рекомендуется также указывать полное значение сокращения в тексте, чтобы помочь пользователям освоить новую терминологию.</p>
<p>В целом, тег <abbr> является полезным инструментом для улучшения понимания содержимого веб-страницы. Он помогает сделать сайт более доступным и полезным для широкой аудитории пользователей.</p>
<h2 id="vopros-otvet">Вопрос-ответ</h2>
<h3 id="chto-takoe-abbreviatura-v-html">Что такое аббревиатура в HTML?</h3>
<blockquote class="question"><p>Аббревиатура (abbr) в HTML — это элемент, который используется для представления сокращений или акронимов. Он позволяет добавить пояснение к аббревиатуре, чтобы пользователь мог лучше понять ее значение.</p></blockquote>
<h3 id="kakoy-sintaksis-ispolzuetsya-dlya-ispolzovaniya">Какой синтаксис используется для использования элемента abbr в HTML?</h3>
<blockquote class="question"><p>Для использования элемента abbr в HTML используется следующий синтаксис: <abbr title="полное значение">сокращение</abbr>. Здесь в атрибуте title указывается полное значение аббревиатуры, которое будет отображаться при наведении курсора.</p></blockquote>
<h3 id="kakoy-osnovnoy-tselyu-ispolzovaniya-elementa">Какой основной целью использования элемента abbr в HTML?</h3>
<blockquote class="question"><p>Основная цель использования элемента abbr в HTML — предоставление более подробной информации о сокращении или акрониме. Это помогает пользователям, особенно тем, которые не знакомы с данной аббревиатурой, лучше понять ее значение и контекст использования.</p></blockquote>
<h3></h3>
<blockquote class="question"></blockquote>
<div class="fpm_end"></div> </div><!-- .entry-content -->
</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="15555" 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://kompter.ru/atribut-abbr-v-html-naznacenie-i-ispolzovanie/" data-title="Атрибут abbr в HTML: назначение и использование" data-description="Abbr (сокращение от английского слова «abbreviation») — это тег HTML, который используется для указания сокращений или акронимов в тексте. Он позволяет пользователям понять значение сокращений, предлагая расшифровку этих сокращений всплывающей подсказкой при наведении курсора на сокращение. Основное преимущество использования тега abbr состоит в том, что он повышает удобство использования и понятность текста для пользователей. Например, […]" data-image=""></span></div> </div>
<meta itemprop="author" content="">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://kompter.ru/atribut-abbr-v-html-naznacenie-i-ispolzovanie/" content="Атрибут abbr в HTML: назначение и использование">
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="kompter.ru" data-lazy-src="https://kompter.ru/wp-content/uploads/2023/08/monitor.png"><noscript><img itemprop="url image" src="https://kompter.ru/wp-content/uploads/2023/08/monitor.png" alt="kompter.ru"></noscript></div><meta itemprop="name" content="kompter.ru"><meta itemprop="telephone" content="kompter.ru"><meta itemprop="address" content="https://kompter.ru"></div>
<div id="comments" class="comments-area">
<div id="respond" class="comment-respond">
<div id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/atribut-abbr-v-html-naznacenie-i-ispolzovanie/#respond" style="display:none;">Отменить ответ</a></small></div><form action="https://kompter.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-form-author"><label class="screen-reader-text" for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' placeholder="Имя" /></p>
<p class="comment-form-email"><label class="screen-reader-text" for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" required='required' placeholder="Email" /></p>
<p class="comment-form-comment"><label class="screen-reader-text" for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required" placeholder="Комментарий" ></textarea></p><p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='15555' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="d84502ccb2" /></p><p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="194"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p></form> </div><!-- #respond -->
</div><!-- #comments -->
</main><!-- #main -->
</div><!-- #primary -->
<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://kompter.ru/ispolzovanie-sistemnyx-kollekcii-c-generic-cto-eto/">Использование системных коллекций C# Generic: что это?</a></div><div class="post-card__description">System.Collections.Generic представляет собой набор</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div>
</div>
<div class="post-card post-card--related post-card--thumbnail-no">
<div class="post-card__title"><a href="https://kompter.ru/ispolzovanie-namespace-std-cto-eto/">Использование namespace std: что это?</a></div><div class="post-card__description">Using namespace std — это директива в C++, которая</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div>
</div>
<div class="post-card post-card--related post-card--thumbnail-no">
<div class="post-card__title"><a href="https://kompter.ru/ispolzovanie-s-cto-eto/">Использование с что это</a></div><div class="post-card__description">Судя по названию, вам, вероятно, будет интересно узнать</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div>
</div>
<div class="post-card post-card--related post-card--thumbnail-no">
<div class="post-card__title"><a href="https://kompter.ru/cto-takoe-users-i-kak-im-polzovatsya/">Что такое Users и как им пользоваться</a></div><div class="post-card__description">Пользователи — это основная целевая аудитория</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div>
</div>
</div></div>
</div><!--.site-content-inner-->
</div><!--.site-content-->
<div class="site-footer-container ">
<div class="footer-navigation full" itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="main-navigation-inner fixed">
<div class="menu-footer_menu-container"><ul id="footer_menu" class="menu"><li id="menu-item-15054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15054"><a href="https://kompter.ru/kontakty/">Обратная связь</a></li>
<li id="menu-item-15055" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15055"><a href="https://kompter.ru/privacy-policy/">Политика конфиденциальности</a></li>
<li id="menu-item-15056" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15056"><a href="https://kompter.ru/soglashenie/">Пользовательское соглашение</a></li>
</ul></div> </div>
</div><!--footer-navigation-->
<footer id="colophon" class="site-footer site-footer--style-gray full">
<div class="site-footer-inner fixed">
<div class="footer-bottom">
<div class="footer-info">
© 2024 Портал о технике.
</div>
</div>
</div>
</footer><!--.site-footer-->
</div>
</div><!-- #page -->
<script>var pseudo_links = document.querySelectorAll(".pseudo-clearfy-link");for (var i=0;i<pseudo_links.length;i++ ) { pseudo_links[i].addEventListener("click", function(e){ window.open( e.target.getAttribute("data-uri") ); }); }</script><script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://kompter.ru/atribut-abbr-v-html-naznacenie-i-ispolzovanie";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type='text/javascript' id='reboot-scripts-js-extra'>
/* <![CDATA[ */
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:\/\/kompter.ru\/wp-admin\/admin-ajax.php","nonce":"5a967be197"};
/* ]]> */
</script>
<script src='https://kompter.ru/wp-content/themes/reboot/assets/js/scripts.min.js' id='reboot-scripts-js'></script>
<script src='https://kompter.ru/wp-includes/js/comment-reply.min.js' id='comment-reply-js'></script>
<script defer src='https://kompter.ru/wp-content/plugins/akismet/_inc/akismet-frontend.js' id='akismet-frontend-js'></script>
<script>!function(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e)}catch(t){}return t}()||function(i){var o=!0,s=!1;EventTarget.prototype.addEventListener=function(t,e,n){var r="object"==typeof n,a=r?n.capture:n;n=r?n:{},"touchstart"!=t&&"scroll"!=t&&"wheel"!=t||(n.passive=void 0!==n.passive?n.passive:o),n.capture=void 0!==a?a:s,i.call(this,t,e,n)}}(EventTarget.prototype.addEventListener);</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://kompter.ru/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>
</body>
</html>
