Главная - Вопросы Frontend Разработчик - Какие теги устарели в HTML5
Ответ
В HTML5 некоторые теги были помечены как устаревшие (deprecated) и не рекомендуются к использованию. Вот основные из них:
* `
` - заменён на ``
* `` - заменён на ``
* ``, ``, ``, ``, `` - стилизация теперь через CSS
* ``, `<![CDATA[` - фреймы устарели
* `<dir>` - заменён на `<ul>`
* `<isindex>` - устаревшая форма ввода
Пример устаревшего кода:
```
<font color="red">Текст</font>
```
Современная альтернатива:
```
<p style="color: red;">Текст</p>
```
Эти теги могут ещё работать в браузерах, но их поддержка может быть прекращена в будущем. </div>
</div>
</div>
<div class="obscene-toggle-bar">
<button type="button"
class="obscene-toggle-btn"
id="obsceneToggleBtn"
data-post-id="23786"
data-nonce="343d69e45a"
data-ajax-url="https://hacksobesov.com/wp-admin/admin-ajax.php">
<span class="toggle-icon">🔞</span>
<span class="toggle-label">Показать ответ 18+</span>
<span class="toggle-warning">Нецензурная лексика</span>
</button>
</div>
</div>
<script>
(function() {
var btn = document.getElementById('obsceneToggleBtn');
var container = document.getElementById('answersContainer');
if (!btn || !container) return;
var loaded = false;
var loading = false;
var label = btn.querySelector('.toggle-label');
var defaultLabel = 'Показать ответ 18+';
var openLabel = 'Скрыть ответ 18+';
function setLabel(text) { if (label) label.textContent = text; }
function toggleVisibility() {
var isOpen = container.classList.toggle('obscene-visible');
if (isOpen) {
setLabel(openLabel);
btn.classList.add('active');
} else {
setLabel(defaultLabel);
btn.classList.remove('active');
}
}
function loadObsceneAnswer() {
loading = true;
setLabel('Загрузка...');
var fd = new FormData();
fd.append('action', 'hsb_get_obscene_answer');
fd.append('post_id', btn.dataset.postId);
fd.append('nonce', btn.dataset.nonce);
fetch(btn.dataset.ajaxUrl, {
method: 'POST',
body: fd,
credentials: 'same-origin'
})
.then(function(r) { return r.json(); })
.then(function(res) {
loading = false;
if (res && res.success && res.data && res.data.html) {
var block = document.createElement('div');
block.className = 'answer-column answer-obscene';
block.innerHTML =
'<div class="question-main-answer question-obscene-answer markdown-content">' +
'<h3>Ответ 18+ 🔞</h3>' +
'<div class="main-answer-content obscene-answer-content">' +
res.data.html +
'</div>' +
'</div>';
container.appendChild(block);
loaded = true;
// Подсветка Prism.js инициализируется один раз на DOMContentLoaded
// в functions.php (enqueue_prismjs_syntax_highlighting). AJAX-вставленный
// HTML она не подхватывает — нужно повторно вызвать на новом блоке.
var newCodeBlocks = block.querySelectorAll('pre:not(.wp-block-code-block-pro-code-block) > code:not([class*="language-"])');
newCodeBlocks.forEach(function(el) {
el.classList.add('language-plaintext');
});
if (typeof Prism !== 'undefined' && typeof Prism.highlightAllUnder === 'function') {
Prism.highlightAllUnder(block);
}
setLabel(defaultLabel);
toggleVisibility();
} else {
setLabel('Ошибка загрузки');
setTimeout(function(){ setLabel(defaultLabel); }, 2000);
}
})
.catch(function() {
loading = false;
setLabel('Ошибка соединения');
setTimeout(function(){ setLabel(defaultLabel); }, 2000);
});
}
btn.addEventListener('click', function() {
if (loading) return;
if (loaded) { toggleVisibility(); return; }
loadObsceneAnswer();
});
})();
</script>
</div><!-- .entry-content -->
</div><!-- .inside-article -->
</article><!-- #post-## -->
<section class="related-questions" aria-labelledby="related-questions-title">
<h2 id="related-questions-title" class="related-questions-title">
Похожие вопросы на собеседовании Frontend Разработчик </h2>
<div class="related-questions-grid">
<a href="https://hacksobesov.com/questions/frontend-developer/chto-takoe-event-loop/" class="related-question-card">
<span class="related-question-title">Что такое Event Loop</span>
<span class="related-question-meta">
<span class="related-question-chance">66% задают</span>
<span class="related-question-type">Асинхронность</span>
</span>
</a>
<a href="https://hacksobesov.com/questions/frontend-developer/chto-takoe-zamykanie/" class="related-question-card">
<span class="related-question-title">Что такое замыкание</span>
<span class="related-question-meta">
<span class="related-question-chance">49% задают</span>
<span class="related-question-type">JavaScript</span>
</span>
</a>
<a href="https://hacksobesov.com/questions/frontend-developer/chto-takoe-promise/" class="related-question-card">
<span class="related-question-title">Что такое Promise</span>
<span class="related-question-meta">
<span class="related-question-chance">48% задают</span>
<span class="related-question-type">Асинхронность</span>
</span>
</a>
<a href="https://hacksobesov.com/questions/frontend-developer/chto-takoe-virtual-dom/" class="related-question-card">
<span class="related-question-title">Что такое Virtual DOM</span>
<span class="related-question-meta">
<span class="related-question-chance">43% задают</span>
<span class="related-question-type">React</span>
</span>
</a>
<a href="https://hacksobesov.com/questions/frontend-developer/chto-takoe-cors/" class="related-question-card">
<span class="related-question-title">Что такое CORS</span>
<span class="related-question-meta">
<span class="related-question-chance">39% задают</span>
<span class="related-question-type">Безопасность</span>
</span>
</a>
<a href="https://hacksobesov.com/questions/frontend-developer/v-chem-raznicza-mezhdu-var-let-i-const/" class="related-question-card">
<span class="related-question-title">В чем разница между var, let и const</span>
<span class="related-question-meta">
<span class="related-question-chance">39% задают</span>
<span class="related-question-type">JavaScript</span>
</span>
</a>
</div>
</section>
<div class="question-navigation">
<div class="nav-links">
<div class="nav-previous">
<a href="https://hacksobesov.com/questions/frontend-developer/kakie-tegi-stroyat-zagolovochnuyu-ierarhiyu/" rel="prev">
<span class="nav-subtitle"><i class="fas fa-arrow-left"></i> Предыдущий вопрос</span>
<span class="nav-title">Какие теги строят заголовочную и...</span>
</a>
</div>
<div class="nav-next">
<a href="https://hacksobesov.com/questions/frontend-developer/kakie-tehnologii-vyberesh-pri-sozdanii-internet-magazina/" rel="next">
<span class="nav-subtitle">Следующий вопрос <i
class="fas fa-arrow-right"></i></span>
<span class="nav-title">Какие технологии выберешь при со...</span>
</a>
</div>
</div>
</div>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- #page -->
</div><!-- .site-container -->
<div class="custom-footer-content">
<div class="custom-footer-copyright"> © ХакСобесов, 2026</div>
<div class="custom-footer-center">
<div class="custom-footer-social">
<a href="https://t.me/hacksobesov" target="_blank" class="social-icon tg-icon">
<i class="fab fa-telegram"></i>
</a>
<a href="https://www.youtube.com/@hacksobesovcom" target="_blank" class="social-icon yt-icon">
<i class="fab fa-youtube"></i>
</a>
</div>
<a class="custom-footer-about" href="https://hacksobesov.com/o-proekte/">О проекте</a>
</div><!-- .custom-footer-center -->
<a class="custom-footer-mail" href="mailto:support@hacksobesov.com">
<i class="fas fa-envelope"></i> support@hacksobesov.com
</a>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/generatepress-child/*","/wp-content/themes/generatepress/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script>
(function(){
var ajaxUrl='https://hacksobesov.com/wp-admin/admin-ajax.php';
var pending=null; // общий промис: клик и предзагрузка по наведению не дублируют запрос
function inject(html){
if(window.hsbPaymentModal)return; // уже вставлена
var tmp=document.createElement('div');
tmp.innerHTML=html;
// innerHTML не выполняет <script> — вынимаем и пересоздаём вручную
var codes=[];
Array.prototype.slice.call(tmp.querySelectorAll('script')).forEach(function(s){
codes.push(s.textContent);
s.parentNode.removeChild(s);
});
while(tmp.firstChild){document.body.appendChild(tmp.firstChild);}
codes.forEach(function(code){
var s=document.createElement('script');
s.textContent=code;
document.body.appendChild(s);
});
}
function load(){
if(window.hsbPaymentModal)return Promise.resolve();
if(pending)return pending;
var fd=new FormData();
fd.append('action','hsb_payment_modal');
pending=fetch(ajaxUrl,{method:'POST',body:fd,credentials:'same-origin'})
.then(function(r){if(!r.ok)throw new Error('http '+r.status);return r.text();})
.then(function(html){inject(html);})
.catch(function(err){pending=null;throw err;});
return pending;
}
function btnFrom(e){
return (e.target&&e.target.closest)?e.target.closest('.premium-button'):null;
}
// Предзагрузка по наведению/касанию, чтобы первый клик открывался мгновенно
['mouseover','touchstart'].forEach(function(evt){
document.addEventListener(evt,function(e){
if(btnFrom(e))load().catch(function(){});
},{passive:true});
});
document.addEventListener('click',function(e){
var btn=btnFrom(e);
if(!btn)return;
e.preventDefault();
var href=btn.getAttribute('href')||'/pricing/';
var m=href.match(/category_([a-z0-9_-]+)/i);
var cat=m?m[1]:'';
load().then(function(){
// Не открылась — уводим на /pricing/, где модалка есть в шаблоне
if(window.hsbPaymentModal)window.hsbPaymentModal.open(cat);
else window.location.href=href;
}).catch(function(){
window.location.href=href;
});
});
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Ждем загрузки DOM
setTimeout(function() {
const toggle = document.querySelector('.mobile-menu-toggle');
const nav = document.querySelector('.main-navigation') ||
document.querySelector('#site-navigation');
if (toggle && nav) {
toggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
this.classList.toggle('active');
nav.classList.toggle('active');
// Добавим класс к body для overlay
document.body.classList.toggle('mobile-menu-open');
});
// Закрытие при клике вне меню
document.addEventListener('click', function(e) {
if (!nav.contains(e.target) && !toggle.contains(e.target)) {
toggle.classList.remove('active');
nav.classList.remove('active');
document.body.classList.remove('mobile-menu-open');
}
});
} else {
console.error('Menu elements not found!');
}
}, 100); // Небольшая задержка для гарантии загрузки DOM
});
</script>
<script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><script id="category-filter-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/category-filter.js?ver=1790189196"></script>
<script id="code-sandbox-buttons-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/code-sandbox-buttons.js?ver=1.0.0"></script>
<script id="common-filters-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/common-filters.js?ver=1790189196"></script>
<script id="premium-tooltip-js-extra">
var premiumTooltipData = {"ajaxUrl":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"d6df03fbce","categorySlug":""};
//# sourceURL=premium-tooltip-js-extra
</script>
<script id="premium-tooltip-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/premium-tooltip.js?ver=1790189196"></script>
<script id="question-admin-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/question-admin.js?ver=1.0.0"></script>
<script id="codepen-button-js-extra">
var codeSandboxData = {"postType":"question","ajaxUrl":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"0b587da846"};
//# sourceURL=codepen-button-js-extra
</script>
<script id="codepen-button-js" src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/code-sandbox-buttons.js?ver=1790189196"></script>
<script id="prismjs-core-js" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script id="prismjs-autoloader-js" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script id="prismjs-autoloader-js-after">
document.addEventListener("DOMContentLoaded", function() {
// Пропускаем блоки Code Block Pro (они уже подсвечены сервером)
var codeBlocks = document.querySelectorAll("pre:not(.wp-block-code-block-pro-code-block) > code:not([class*=\"language-\"])");
codeBlocks.forEach(function(el) {
el.classList.add("language-plaintext");
});
if (typeof Prism !== "undefined") {
Prism.highlightAll();
}
});
//# sourceURL=prismjs-autoloader-js-after
</script>
<script id="prismjs-toolbar-js" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script id="prismjs-copy-js" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u0434\u043c\u0435\u043d\u044e","closeSubMenuLabel":"\u0417\u0430\u043a\u0440\u044b\u0442\u044c \u043f\u043e\u0434\u043c\u0435\u043d\u044e"};
//# sourceURL=generate-menu-js-extra
</script>
<script id="generate-menu-js" src="https://hacksobesov.com/wp-content/themes/generatepress/assets/js/menu.min.js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://hacksobesov.com/wp-includes/js/wp-emoji-release.min.js"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://hacksobesov.com/wp-includes/js/wp-emoji-loader.min.js
</script>
<!-- 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(100805433, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
webvisor:true,
ecommerce:"dataLayer"
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/100805433" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
</div></div></div><div class="cookie-consent-banner" id="cookieConsentBanner" style="display: none;">
<div class="cookie-consent-banner-container">
<div class="cookie-consent-text">
Мы используем файлы cookie для улучшения работы сайта.<br> Продолжая использовать сайт, вы соглашаетесь с
<a href="/privacy-policy" target="_blank">Политикой конфиденциальности</a>.
</div>
<div class="cookie-consent-buttons">
<button class="cookie-consent-btn accept" id="acceptCookies">Принимаю</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const cookieBanner = document.getElementById('cookieConsentBanner');
const acceptBtn = document.getElementById('acceptCookies');
// Проверяем, было ли уже принято решение о cookies
if (!localStorage.getItem('cookieConsent')) {
cookieBanner.style.display = 'flex';
}
// Обработчик для кнопки "Принимаю"
acceptBtn.addEventListener('click', function() {
localStorage.setItem('cookieConsent', 'accepted');
cookieBanner.style.display = 'none';
});
});
</script>
</body>
</html>
<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/
Served from: hacksobesov.com @ 2026-10-20 11:30:50 by W3 Total Cache
-->]]>