path: root/files/uk/learn/html/introduction_to_html/debugging_html/index.html

---
title: Дебаґінг HTML
slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
tags:
  - HTML
  - Розмітка
  - валідатор
  - веб-сторінок
  - виправлення
  - дебаґінг
  - для початківців
  - кодинг
  - перевірка
  - помилок
  - уроки
  - як перевірити
translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary"><span id="result_box" lang="uk"><span>Написати HTML добре, але що, якщо щось піде не так, і ви не можете з'ясувати, де помилка в коді?</span> <span>Ця стаття представить вам деякі інструменти, які допоможуть вам знайти та виправити помилки в HTML.</span></span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Передумови:</th>
   <td>Знайомство з HTML, як наведено в прикладі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Початок роботи з HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основи HTML</a> та <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Створення гіперпосилань</a>.</td>
  </tr>
  <tr>
   <th scope="row">Мета:</th>
   <td><span id="result_box" lang="uk"><span>Дізнатись основи використання інструментів налагодження (дебаґінга), щоб знайти проблеми в HTML.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Дебаґінг_не_страшний">Дебаґінг не страшний</h2>

<p><span id="result_box" lang="uk"><span>Коли ви пишете код певного виду, все, як правило, добре, доки не настає страшний момент, коли виникла помилка - ви зробили щось не так, тому ваш код не працює - або взагалі, або не зовсім так, як ви хотіли.</span> <span>Наприклад, наведене нижче показує помилку при спробі </span></span> {{glossary("compile")}} <span lang="uk"><span> просту програму, написану на мові "Rust".</span></span></p>

<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> <span id="result_box" lang="uk"><span>Тут повідомлення про помилку досить легко зрозуміти</span></span> — "неузгоджений подвійний ланцюг кодування". <span id="result_box" lang="uk"><span>Якщо ви подивитеся на цей список, можливо, ви побачите, як це зробити</span></span> <code>println!(Hello, world!");</code> <span id="result_box" lang="uk"><span>може логічно не вистачати подвійної цитати.</span> <span>Проте повідомлення про помилку можуть швидко ускладнюватися і менш легко інтерпретуватися, коли програми стають більшими, і навіть прості випадки можуть трохи налякати того, хто не знає про Руст.</span></span></p>

<p><span id="result_box" lang="uk"><span>Дебаґінг не повинен бути страшним - це ключ до комфортного написання і налагоджування будь-якої мови програмування або коду, знайомство як з мовою так і з інструментами.</span></span></p>

<h2 id="HTML_та_дебаґінг">HTML та дебаґінг</h2>

<p><span id="result_box" lang="uk"><span>HTML не так складно зрозуміти, як Rust.</span> <span>HTML не компілюється в іншу форму, перш ніж браузер проаналізує його та покаже результат</span></span> (він <em>інтерпретується</em>, а не <em>компілюється</em>). І синтаксис HTML {{glossary("element")}} набагато легше зрозуміти, ніж "справжню мову програмування", таку як Rust, {{glossary("JavaScript")}}, або {{glossary("Python")}}. Спосіб, за допомогою якого веб-браузери аналізують HTML є набагато більш <strong>дозвільним, </strong>ніж мови програмування, що є і добре, і погано одночасно.</p>

<h3 id="Дозвільний_код">Дозвільний код</h3>

<p><span id="result_box" lang="uk"><span>Отже, що ми маємо на увазі під дозвільним?</span> <span>Ну, звичайно, коли ви робите щось неправильне в коді, є два основних типи помилок, які ви зустрінете:</span></span></p>

<ul>
 <li><strong>Синтаксичні помилки</strong>: <span id="result_box" lang="uk"><span>Це орфографічні помилки у вашому коді, які фактично спричиняють непрацездатність програми, як-от помилка Rust, показана вище.</span> <span>Зазвичай їх можна легко виправити, якщо ви знайомі з синтаксисом мови та знаєте, що означає повідомлення про помилку.</span></span></li>
 <li><strong>Логічні помилки</strong>: <span id="result_box" lang="uk"><span>Це помилки, коли синтаксис дійсно правильний, але код не є тим, що ви його намірили, а це означає, що програма працює неправильно.</span> <span>Ці помилки важче фіксувати, ніж синтаксичні помилки, тому що немає повідомлення про помилку, яка спрямовує вас до джерела помилки.</span></span></li>
</ul>

<p><span id="result_box" lang="uk"><span>Сам по собі HTML не страждає від синтаксичних помилок, оскільки браузери розуміють його належним чином, що означає, що сторінка все одно відображатиметься, навіть якщо є синтаксичні помилки.</span> <span>Браузери мають вбудовані правила, які визначають, як інтерпретувати неправильно написану розмітку, тому ви все одно щось отримаєте, навіть якщо це не те, що ви очікували.</span> <span>Це, звичайно, може бути проблемою!</span></span></p>

<div class="note">
<p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Розібратись в HTML легко, тому що коли веб-мережа була тільки створена, було вирішено, що надання користувачам можливостей публікувати свій вміст було важливішим, ніж переконатися, що синтаксис абсолютно правильний.</span> <span>Веб-мережа, ймовірно, не була б настільки популярною, як є сьогодні, якщо б вона була більш складною від самого початку.</span></span></p>
</div>

<h3 id="Активне_навчання_вивчення_допустимого_коду"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: вивчення допустимого коду</span></span></h3>

<p><span class="short_text" id="result_box" lang="uk"><span>Настав час вивчити дозвільний характер HTML-коду.</span></span></p>

<ol>
 <li>По-перше, завантажте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> і збережіть його локально. Ця демоверсія спеціально написана, щоб мати деякі помилки <span id="result_box" lang="uk"><span>в ньому, щоб ми могли їх досліджувати (розмітка HTML, як наголошується, <strong>погано сформована</strong>, на відміну від <strong>добре сформованої</strong>)</span></span>.</li>
 <li><span id="result_box" lang="uk"><span>Далі відкрийте його в браузері.</span> <span>Ви побачите щось подібне</span></span>:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
 <li><span id="result_box" lang="uk"><span>Це відразу не виглядає чудово</span></span>; <span id="result_box" lang="uk"><span>давайте подивимося на вихідний код, щоб побачити, чи зможемо ми зрозуміти, чому (показано лише вміст body)</span></span>;
  <pre class="brush: html">&lt;h1&gt;Приклади HTML дебаґінга&lt;/h1&gt;

&lt;p&gt;<span class="short_text" id="result_box" lang="uk"><span>Що викликає помилки в HTML</span></span>?

&lt;ul&gt;
  &lt;li&gt;Незамкнені елементи: <span id="result_box" lang="uk"><span>Якщо елемент &lt;strong&gt; не закрито належним чином,
      його ефект може поширюватися на ті області, які ви не мали наміру ним огортати.</span></span>

  &lt;li&gt;<span id="result_box" lang="uk"><span>Погано вкладені елементи</span></span>:  <span id="result_box" lang="uk"><span>правильне вставлення елементів також дуже важливо
      для правильного кодування</span></span>. &lt;strong&gt;strong &lt;em&gt;виділено strong?&lt;/strong&gt;
      що це таке?&lt;/em&gt;

  &lt;li&gt;Незакриті атрибути: <span id="result_box" lang="uk"><span>Інше поширене джерело HTML-проблем.</span>
      <span>Давайте розглянемо приклад</span></span>: &lt;a href="https://www.mozilla.org/&gt;Посилання
      на домашню сторінку Mozilla&lt;/a&gt;
&lt;/ul&gt;</pre>
 </li>
 <li><span class="short_text" id="result_box" lang="uk"><span>Давайте розглянемо проблеми:</span></span>
  <ul>
   <li>{{htmlelement("p","paragraph")}} та {{htmlelement("li","list item")}} елементи не мають закриваючих тегів. <span id="result_box" lang="uk"><span>Дивлячись на зображення вище, це, здається, не вплинуло на рендеринг розмітки надто погано, оскільки легко визначити, де повинен закінчуватися один елемент, а інший повинен починатися.</span></span></li>
   <li>Перший {{htmlelement("strong")}} елемент не має закриваючого тега. <span id="result_box" lang="uk"><span>Це дещо ускладнює, оскільки важко сказати, де елемент повинен закінчуватися.</span> <span>Фактично, всю решту тексту було виділено.</span></span></li>
   <li><span class="short_text" id="result_box" lang="uk"><span>Цей розділ погано вкладено</span></span>: <code>&lt;strong&gt;strong &lt;em&gt;виділено strong?&lt;/strong&gt; що це таке?&lt;/em&gt;</code>. Складно сказати, як це було інтерпретовано із-за попередньої проблеми.</li>
   <li>{{htmlattrxref("href","a")}} <span id="result_box" lang="uk"><span>Значення атрибута має відсутні подвійні лапки закриття.</span> <span>Це, здається, викликало найбільшу проблему - посилання взагалі не відображається.</span></span></li>
  </ul>
 </li>
 <li><span id="result_box" lang="uk"><span>Тепер давайте подивимось на розмітку браузера, на відміну від розмітки в вихідному коді.</span> <span>Для цього ми можемо використовувати інструменти розробника веб-браузера.</span> <span>Якщо ви не знайомі з використанням інструментів розробника веб-браузера, перегляньте кілька хвилин</span></span> <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li>
 <li><span id="result_box" lang="uk"><span>В інспекторі DOM ви можете дізнатись, як виглядає виділена розмітка</span></span>:<img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
 <li><span id="result_box" lang="uk"><span>Використовуючи інспектора DOM, давайте розглянемо наш код докладно, щоб побачити, як веб-браузер намагався виправити наші помилки HTML (ми зробили огляд у Firefox, інші сучасні браузери повинні дати той самий результат)</span></span>:
  <ul>
   <li><span id="result_box" lang="uk"><span>У параграфах та пунктах списку були додані закриті теги</span></span>.</li>
   <li><span id="result_box" lang="uk"><span>Не зрозуміло, де слід закрити перший елемент </span></span><code>&lt;strong&gt;</code>, <span id="result_box" lang="uk"><span>тому браузер обгорнув кожен окремий блок тексту своїм тегом strong, аж донизу документа!</span></span></li>
   <li><span id="result_box" lang="uk"><span>Неправильне вкладення було виправлено браузером, як це</span></span>:
    <pre class="brush: html">&lt;strong&gt;strong
  &lt;em&gt;виділено strong?&lt;/em&gt;
&lt;/strong&gt;
&lt;em&gt; що це таке?&lt;/em&gt;</pre>
   </li>
   <li><span id="result_box" lang="uk"><span>Посилання з відсутніми подвійними лапками повністю вилучено.</span> <span>Останній елемент списку виглядає так</span></span> :
    <pre class="brush: html">&lt;li&gt;
  &lt;strong&gt;Незакриті атрибути: <span class="short_text" id="result_box" lang="uk"><span>Інше поширене джерело проблем з HTML</span></span>.
  Давайте подивимось на приклад: &lt;/strong&gt;
&lt;/li&gt;</pre>
   </li>
  </ul>
 </li>
</ol>

<h3 id="Валідація_HTML">Валідація HTML</h3>

<p><span id="result_box" lang="uk"><span>Таким чином, ви можете побачити з наведеного вище прикладу, що ви дійсно хочете, щоб ваш HTML був добре сформований!</span> <span>Але як?</span> <span>У невеликому прикладі, подібному до вищенаведенного, легко пройти по строках та знайти помилки, а як при величезному, складному HTML-документі?</span></span></p>

<p><span id="result_box" lang="uk"><span>Найкраща стратегія полягає в тому, щоб запустити HTML-сторінку за допомогою</span></span> <a href="https://validator.w3.org/">Markup Validation Service</a> — <span id="result_box" lang="uk"><span>сервісу, що створений та підтримується W3C, організацією, яка стежить за специфікаціями, що визначають HTML, CSS та інші веб-технології.</span> <span>Ця веб-сторінка приймає HTML-документ у вигляді входу, проходить через нього і дає вам звіт, в якому показує, що неправильно з вашим HTML</span></span>.</p>

<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>

<p><span id="result_box" lang="uk"><span>Щоб вказати HTML для перевірки, ви можете надати цьому сервісу адресу свого сайту, завантажити файл HTML або безпосередньо ввести якийсь HTML-код</span></span>.</p>

<h3 id="Активне_навчання_перевірка_документа_HTML"><span class="short_text" id="result_box" lang="uk"><span>Активне навчання: перевірка документа HTML</span></span></h3>

<p><span class="short_text" id="result_box" lang="uk"><span>Давайте спробуємо це з нашим</span></span> <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p>

<ol>
 <li>По-перше, завантажте <a href="https://validator.w3.org/">Markup Validation Service</a> в одній із вкладок браузера, якщо вона ще не відкрита.</li>
 <li>Перейдіть на вкладку <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> (Перевірити за прямим введенням).</li>
 <li><span id="result_box" lang="uk"><span>Скопіюйте весь приклад коду документу (а не тільки body) і вставте його у велику область тексту, показану в </span></span> Markup Validation Service.</li>
 <li>Натисніть кнопку <em>Check (Перевірити)</em>.</li>
</ol>

<p><span class="short_text" id="result_box" lang="uk"><span>В результаті з'явиться список помилок та інша інформація</span></span>.</p>

<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>

<h4 id="Інтерпретація_повідомлень_про_помилки"><span class="short_text" id="result_box" lang="uk"><span>Інтерпретація повідомлень про помилки</span></span></h4>

<p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p>

<ul>
 <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li>
 <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li>
 <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li>
 <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li>
 <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span>
  <pre>приклад: &lt;a href="https://www.mozilla.org/&gt;Посилання на домашню сторінку Mozilla&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>

  <p><span id="result_box" lang="uk"><span>Повідомлення про помилки зазвичай корисні, але іноді вони не настільки корисні;</span> <span>трохи попрактикувавшись, ви зможете розібратися, як інтерпретувати їх, щоб виправити ваш код.</span> <span>Давайте пройдемось по повідомленням про помилку і що вони означають.</span> <span>Ви побачите, що кожне повідомлення містить номер рядка та стовпчика, які допоможуть легко знайти помилку</span></span>.</p>
 </li>
 <li>"Кінцевий тег <code>li</code> <span class="short_text" id="result_box" lang="uk"><span>мається на увазі, але були відкриті елементи</span></span>" (2 випадки): <span id="result_box" lang="uk"><span>Ці повідомлення вказують на те, що відкритий елемент, який має бути закритим.</span> <span>Кінцевий тег мається на увазі, але насправді не існує.</span> <span>Інформація про строку/стовпчик вказує на перший рядок після рядка, де дійсно повинен бути тег закриття, але це досить хороша підказка, щоб побачити, що не так.</span></span></li>
 <li>"Не закритий елемент <code>strong</code>": Це досить просто зрозуміти — {{htmlelement("strong")}} елемент не є закритим, та інформація про строку/стовпчик вказує на те, де він знаходиться.</li>
 <li>"Кінцевий тег <code>strong</code> порушує правила вкладенності": <span id="result_box" lang="uk"><span>Це вказує на неправильно вкладені елементи, а інформація про строку/стовпець вказує, де вона знаходиться.</span></span></li>
 <li>"<span id="result_box" lang="uk"><span>Кінець файлу досягнуто, коли знаходиться значення атрибута.</span> <span>Ігнорування тегу</span></span>": Це досить загадково; <span id="result_box" lang="uk"><span>це стосується того, що значення атрибута десь неправильно сформовано, можливо, поблизу кінця файлу, тому що кінець файлу з'являється всередині значення атрибута.</span> <span>Той факт, що браузер не відображає посилання, має дати нам хорошу підказку щодо того, який елемент винен</span></span>.</li>
 <li>"Файл переглянуто до кінця і з'явились відкриті елементи": <span id="result_box" lang="uk"><span>Це трохи неоднозначно, але в основному стосується того, що є відкриті елементи, які повинні бути належним чином закриті.</span> <span>Номери рядків вказують на останні кілька рядків файлу, і це повідомлення про помилку поставляється з рядком коду, який вказує на приклад відкритого елемента:</span></span>
  <pre>приклад: &lt;a href="https://www.mozilla.org/&gt;Посилання на домашню сторінк</pre>
 </li>
 <li>
  <div class="note">
  <p><strong>Примітка</strong>: <span id="result_box" lang="uk"><span>Атрибут, який не містить замикаючих </span></span><span lang="uk"><span>лап</span></span>о́<span lang="uk"><span>к, може призвести до відкритого елемента, оскільки решту документа інтерпретують як вміст атрибута.</span></span></p>
  </div>
 </li>
 <li>"Незакритий елемент <code>ul</code>": Це не дуже корисно, як {{htmlelement("ul")}} елемент є закритим правильно. <span class="short_text" id="result_box" lang="uk"><span>Ця помилка виникає через те, що</span></span> {{htmlelement("a")}} елемент є незакритим, через відсутність кінцевих лапо́к.</li>
</ul>

<p><span id="result_box" lang="uk"><span>Якщо ви не можете з'ясувати, що означає кожне повідомлення про помилку, не хвилюйтеся - хороша ідея - спробувати одночасно виправити кілька помилок.</span> <span>Потім спробуйте повторно підтвердити свій HTML, щоб показати, які помилки залишаються.</span> <span>Іноді виправлення попередньої помилки також позбуває інших повідомлень про помилку - деякі помилки часто можуть бути викликані однією проблемою, що тягне інші, як ефект доміно.</span></span></p>

<p><span id="result_box" lang="uk"><span>Ви будете знати, коли всі ваші помилки виправлені, коли ви побачите наступний банер у вашому виводі:</span></span></p>

<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>

<p><span id="result_box" lang="uk"><span>Тобто, "Документ перевірений відповідно до зазначених схем та додаткових обмежень, перевірених валідатором</span></span>".</p>

<h2 id="Резюме">Резюме</h2>

<p><span id="result_box" lang="uk"><span>Отже, у нас є вступ до дебаґінга в HTML, який повинен надати вам деякі корисні навички, щоб розраховувати, коли ви почнете налагоджувати CSS, JavaScript та інші типи коду пізніше в своїй кар'єрі.</span> <span>Це також означає завершення вивчення статей "Введення в модулі HTML" - тепер ви можете продовжувати тестування самостійно з нашими оцінками: перший з них за посиланням нижче.</span></span></p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>