Какова базовая структура HTML-документа?

«Какова базовая структура HTML-документа?» — вопрос из категории Веб-тестирование, который задают на 10% собеседований QA Тестировщик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Базовая структура валидного HTML5-документа состоит из обязательных деклараций и вложенных элементов. **Пример минимальной HTML-страницы:** ```html Заголовок страницы в браузере

Главный заголовок страницы (H1)

Это абзац текста, размеченный тегом <p>.

  • Элемент ненумерованного списка
  • Еще один элемент

© 2023

``` **Ключевые элементы и их назначение:** 1. `` — Декларация типа документа для HTML5. 2. `` — Корневой элемент документа. Атрибут `lang` задает язык. 3. `` — Секция с метаданными, не отображаемыми на странице. * `` — Кодировка символов. * `` — Настройки для адаптивного дизайна. * `` — Заголовок страницы (во вкладке браузера). * `<link>` — Подключение внешних ресурсов (CSS). 4. `<body>` — Секция, содержащая все отображаемое содержимое. * Семантические теги: `<header>`, `<main>`, `<footer>`, `<nav>`. * Теги контента: `<h1>`-`<h6>`, `<p>`, `<ul>/<ol>` с `<li>`, `<a>`. 5. `<script>` — Подключение JavaScript (обычно перед закрывающим `</body>`). </div> </div> </div> <div class="obscene-toggle-bar"> <button type="button" class="obscene-toggle-btn" id="obsceneToggleBtn" data-post-id="50851" data-nonce="d42d40dfd8" 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"> Похожие вопросы на собеседовании QA Тестировщик </h2> <div class="related-questions-grid"> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/rasskazhite-o-vashem-professionalnom-opyte-i-navykah-kak-qa-inzhenera/" class="related-question-card"> <span class="related-question-title">Расскажите о вашем профессиональном опыте и навыках как QA-инженера</span> <span class="related-question-meta"> <span class="related-question-chance">99% задают</span> <span class="related-question-type">Софт-скиллы</span> </span> </a> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/opishite-vash-opyt-raboty-v-testirovanii-programmnogo-obespecheniya/" class="related-question-card"> <span class="related-question-title">Опишите ваш опыт работы в тестировании программного обеспечения</span> <span class="related-question-meta"> <span class="related-question-chance">70% задают</span> <span class="related-question-type">Софт-скиллы</span> </span> </a> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/kakie-osnovnye-vidy-testirovaniya-programmnogo-obespecheniya-vy-znaete/" class="related-question-card"> <span class="related-question-title">Какие основные виды тестирования программного обеспечения вы знаете?</span> <span class="related-question-meta"> <span class="related-question-chance">70% задают</span> <span class="related-question-type">Основы тестирования</span> </span> </a> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/kakie-tehniki-test-dizajna-vy-primenyaete-dlya-sozdaniya-testovyh-sczenariev/" class="related-question-card"> <span class="related-question-title">Какие техники тест-дизайна вы применяете для создания тестовых сценариев?</span> <span class="related-question-meta"> <span class="related-question-chance">70% задают</span> <span class="related-question-type">Техники тест-дизайна</span> </span> </a> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/chto-takoe-testirovanie-programmnogo-obespecheniya-i-kakovy-ego-osnovnye-czeli/" class="related-question-card"> <span class="related-question-title">Что такое тестирование программного обеспечения и каковы его основные цели?</span> <span class="related-question-meta"> <span class="related-question-chance">53% задают</span> <span class="related-question-type">Основы тестирования</span> </span> </a> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/pochemu-vy-rassmatrivaete-vozmozhnost-smenit-rabotu-2/" class="related-question-card"> <span class="related-question-title">Почему вы рассматриваете возможность сменить работу?</span> <span class="related-question-meta"> <span class="related-question-chance">52% задают</span> <span class="related-question-type">Софт-скиллы</span> </span> </a> </div> </section> <div class="question-navigation"> <div class="nav-links"> <div class="nav-previous"> <a href="https://hacksobesov.com/questions/qa-aqa-engineer/kak-organizovan-rabochij-den-qa-inzhenera-vo-vremya-sprinta/" 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/qa-aqa-engineer/kakovy-kriterii-kachestvennoj-postanovki-zadachi-na-testirovanie/" 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=1792839522"></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=1792839522"></script> <script id="premium-tooltip-js-extra"> var premiumTooltipData = {"ajaxUrl":"https://hacksobesov.com/wp-admin/admin-ajax.php","nonce":"e4a00ecf69","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=1792839522"></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":"e294d02986"}; //# 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=1792839522"></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-27 23:54:14 by W3 Total Cache -->