Главная - Вопросы QA Тестировщик - Для чего используется HTML-тег «?
Ответ
Тег **`
`** — это семантический элемент HTML5, который представляет собой вводный или навигационный контент для своей ближайшей секции (``, ``, ``, ``) или всей страницы.
**Назначение и использование:**
* Задаёт **«шапку»** раздела.
* Содержит заголовки (``-``), логотип, навигацию (``), форму поиска, слоган.
**Пример «шапки» всей страницы:**
```html
Главный заголовок сайта
... основное содержимое ...
```
**Пример `header` внутри статьи:**
```html
Текст статьи...
```
**Важные отличия:**
* **Не путать с ``**: `` — служебный раздел для метаданных (title, links, scripts), не отображается. `` — отображаемый семантический блок.
* **Может использоваться многократно**: На одной странице может быть несколько `` элементов в разных секциях.
**Значение для тестирования:**
* **Доступность (a11y)**: Скринридеры используют семантические теги для навигации. Корректная структура `` улучшает UX для пользователей с ограниченными возможностями.
* **Вёрстка и CSS**: Тег часто является ключевым элементом для стилизации. Необходимо проверять его отображение в разных браузерах и на разных разрешениях экрана.
🔞
Показать ответ 18+
Нецензурная лексика
Ответ 18+ 🔞
Давай разберем эту тему про `
`, а то народ иногда путает его с чем-то другим и потом пиздец, а не вёрстка.
Вот смотри, есть такой тег ``. Это не просто очередной ``, который ты обозвал "шапка" в CSS. Это, блядь, **семантический** элемент. То есть он прямо браузеру и скринридерам заявляет: "Эй, я тут вводную часть или навигацию держу, обращайтесь!".
**Зачем он нужен, этот ваш header?**
Ну, ёпта, чтобы задать **«шапку»** для чего-либо. Не только для всей страницы, а вообще для любого крупного куска: статьи, секции, даже сайдбара. Внутрь ему можно пихать:
* Заголовки всякие (`
` и прочие).
* Логотип, картинку какую.
* Навигацию (``), менюшки.
* Форму поиска или слоган компании.
**Вот пример, когда он — главная шапка всей страницы:**
```html
Главный заголовок сайта
... основное содержимое ...
```
А вот он же, но уже внутри статьи, как её личная мини-шапка:
```html
Текст статьи...
```
**А теперь, внимание, главная путаница, от которой у меня волосы дыбом встают!**
* **``** — это служебный, невидимый раздел. Туда ``, стили, скрипты. Он в рот мне чих-пых, не отображается.
* **`<header>`** — это видимый, отображаемый блок, который ты стилизуешь и видишь на странице.
Это **РАЗНЫЕ, блядь, вещи!** Запомни как "Отче наш": `<head>` — метаданные, `<header>` — видимая шапка.
И да, их может быть **не один** на странице. В каждой крупной секции свой. Это нормально.
**А для тестировщика это вообще святое:**
* **Доступность (a11y):** Скринридеры на семантику молятся. Если ты натыкал `<div>` вместо `<header>`, ты усложнил жизнь незрячему пользователю. Ты мудак? Не будь мудаком.
* **Вёрстка:** На этом элементе часто вся верхняя часть сайта держится. Надо проверять, чтобы он не разъезжался на мобилках, не накладывался на контент и вообще вёл себя прилично во всех браузерах. Иначе — пиздец и крики дизайнера. </div>
</div>
</div>
</div>
<script>
(function() {
var btn = document.getElementById('obsceneToggleBtn');
var container = document.getElementById('answersContainer');
if (!btn || !container) return;
btn.addEventListener('click', function() {
var isOpen = container.classList.toggle('obscene-visible');
var label = btn.querySelector('.toggle-label');
if (isOpen) {
label.textContent = 'Скрыть ответ 18+';
btn.classList.add('active');
} else {
label.textContent = 'Показать ответ 18+';
btn.classList.remove('active');
}
});
})();
</script>
</div><!-- .entry-content -->
</div><!-- .inside-article -->
</article><!-- #post-## -->
<!-- Навигация между вопросами -->
<!-- Навигация между вопросами -->
<!-- Навигация между вопросами -->
<!-- Навигация между вопросами -->
<!-- Навигация между вопросами -->
<div class="question-navigation">
<div class="nav-links">
<div class="nav-previous">
<a href="https://hacksobesov.com/questions/qa-aqa-engineer/chto-takoe-stress-testirovanie-stress-testing/" rel="prev">
<span class="nav-subtitle"><i class="fas fa-arrow-left"></i> Предыдущий вопрос</span>
<span class="nav-title">Что такое стресс-тестирование (Str...</span>
</a>
</div>
<div class="nav-next">
<a href="https://hacksobesov.com/questions/qa-aqa-engineer/chto-takoe-testirovanie-bezopasnosti-v-razrabotke-po/" 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-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-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>
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="telegram-subscription-js-extra">
var telegram_subscription = {"ajax_url":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"f3340b46f0"};
var telegram_subscription = {"ajax_url":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"f3340b46f0","bot_username":"hacksobesov_premium_video_bot"};
//# sourceURL=telegram-subscription-js-extra
</script>
<script src="https://hacksobesov.com/wp-content/plugins/telegram-subscription-checker/js/telegram-subscription.js" id="telegram-subscription-js"></script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/category-filter.js" id="category-filter-js"></script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/code-sandbox-buttons.js" id="code-sandbox-buttons-js"></script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/common-filters.js" id="common-filters-js"></script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/premium-tooltip.js" id="premium-tooltip-js"></script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/question-admin.js" id="question-admin-js"></script>
<script src="https://vk.com/js/api/openapi.js?169" id="vk-openapi-js"></script>
<script id="vk-openapi-js-after">
VK.init({
apiId: 54190724
});
//# sourceURL=vk-openapi-js-after
</script>
<script id="codepen-button-js-extra">
var codeSandboxData = {"postType":"question","ajaxUrl":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"604f9f1cbb"};
//# sourceURL=codepen-button-js-extra
</script>
<script src="https://hacksobesov.com/wp-content/themes/generatepress-child/assets/js/code-sandbox-buttons.js" id="codepen-button-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" id="prismjs-core-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" id="prismjs-autoloader-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 src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js" id="prismjs-toolbar-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" id="prismjs-copy-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 src="https://hacksobesov.com/wp-content/themes/generatepress/assets/js/menu.min.js" id="generate-menu-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 */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,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 a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[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,a){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!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));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(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(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-03-07 21:32:52 by W3 Total Cache
-->