HTML-код: як знайти, змінити й зберегти свою сторінку

Щоб змінити HTML-код, спершу треба знайти місце, де він зберігається. Для власної навчальної сторінки це може бути файл index.html. На сайті з WordPress — запис, блок або шаблон. А правка в інструментах розробника зазвичай змінює лише сторінку, відкриту у вашому браузері.

Пройдемо весь шлях: подивимося вихідний HTML сайту, знайдемо потрібний елемент, створимо власний файл, змінимо заголовок, абзац і посилання. Наприкінці перевіримо результат і з’ясуємо, чому правки часом не відображаються. Приклади розраховані на Windows, Chrome або Microsoft Edge та Visual Studio Code.

Що таке HTML-код і як він виглядає

HTML — мова гіпертекстової розмітки. Вона описує структуру та зміст вебсторінки: де заголовок, де абзац, яке зображення показати й куди веде посилання. Браузер читає документ, будує його структуру та відображає сторінку.

<h1>Мій перший сайт</h1>
<p>Це приклад HTML-коду.</p>
<a href="https://example.com/">Перейти за посиланням</a>

Перший рядок створює головний заголовок, другий — абзац, третій — посилання. Щоб читати такі фрагменти, достатньо розрізняти три поняття:

• Тег — позначення в кутових дужках, наприклад <p> або </p>.
• Елемент — частина документа. У прикладі абзац складається з відкривального тега, тексту й закривального тега.
• Атрибут — додаткова властивість елемента. Атрибут href задає адресу посилання.

HTML описує документ. За його оформлення відповідає CSS, а за інтерактивну поведінку часто відповідає JavaScript. Наприклад, заголовок задають у HTML, колір змінюють у CSS, а оновлення тексту після натискання кнопки можна реалізувати через JavaScript.

Розмітку не обов’язково пишуть вручну для кожної сторінки. Системи керування вмістом, зокрема WordPress, формують її з шаблонів, записів і компонентів. Докладніше про ролі цих технологій — у матеріалі про основи веброзробки з HTML, CSS і Python.

Як подивитися вихідний HTML-код сайту

Для перегляду HTML доступної сторінки достатньо браузера. У Chrome та Edge для Windows:

1. Відкрийте потрібну сторінку.
2. Натисніть Ctrl + U. У новій вкладці з’явиться її вихідний текст.
3. Натисніть Ctrl + F і введіть слово, адресу посилання або назву тега.
4. Перегляньте знайдений фрагмент у контексті сусідніх елементів.

Інший шлях — натиснути правою кнопкою миші на сторінці та вибрати «Переглянути джерело сторінки» або View page source. Назва пункту залежить від мови браузера. Також можна ввести в адресний рядок:

view-source:https://example.com/

Вихідний HTML показує початкову розмітку документа. Якщо JavaScript додає текст уже після завантаження, у цьому поданні його може не бути. Для пошуку елемента, який ви зараз бачите на екрані, зручніша панель Elements.

Серверний код PHP чи Python так не відкриється: браузер отримує результат його роботи. Перегляд джерела також не дає доступу до редагування файлів на сервері.

Як знайти потрібний елемент через DevTools

Інструменти розробника допомагають зіставити видимий фрагмент сторінки з її структурою. Найпростіше почати з конкретного заголовка або абзацу:

1. Натисніть на ньому правою кнопкою миші.
2. Виберіть «Перевірити» або Inspect.
3. У панелі Elements знайдіть виділений елемент. Браузер може вибрати вкладений фрагмент — тоді перегляньте його батьківський елемент.
4. У панелі Styles подивіться, які CSS-правила впливають на вигляд.

DevTools також відкриваються через F12 або Ctrl + Shift + I. Якщо активувати панель Elements і натиснути Ctrl + F, можна шукати текст, CSS-селектор або XPath. Наприклад, для такого заголовка підійде пошук за словами «Наші послуги» або селектором .services-title:

<h2 class="services-title">Наші послуги</h2>

Elements показує DOM — поточне дерево елементів сторінки. Воно може відрізнятися від вихідного HTML через роботу JavaScript або виправлення структури під час розбору документа браузером.

Для проби двічі клацніть текст усередині елемента в Elements, змініть його й натисніть Enter. Результат одразу з’явиться на сторінці. За звичайних налаштувань після перезавантаження така правка зникне: файл сайту ви не змінювали. Окремі можливості збереження локальних правок потребують додаткового налаштування.

Більше прикладів пошуку й редагування є в інструкції Chrome DevTools для роботи з DOM.

Як створити HTML-файл і написати перший код

Для першої вправи я б почав із власного локального файла: так видно, де зберігається код і що саме змінюється. Створіть на комп’ютері папку html-practice, відкрийте її у Visual Studio Code, а всередині створіть файл index.html. Вставте весь цей документ:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Моя перша сторінка</title>
</head>
<body>
  <h1>Моя перша сторінка</h1>
  <p>Я вчуся працювати з HTML-кодом.</p>
  <a href="https://example.com/">Корисний сайт</a>
</body>
</html>

Збережіть файл через Ctrl + S у кодуванні UTF-8. Потім відкрийте його браузером: через контекстне меню файла «Відкрити за допомогою» або перетягуванням у вікно браузера. В адресному рядку буде локальна адреса, що починається з file:///.

Ось за що відповідають основні частини документа:

• <!DOCTYPE html> дає браузеру змогу використовувати стандартний режим відображення.
• <html lang="uk"> позначає українську як основну мову сторінки.
• <head> містить метадані: кодування, назву вкладки та налаштування області перегляду.
• <meta charset="UTF-8"> оголошує кодування документа. Воно має відповідати кодуванню збереженого файла.
• <title> задає назву вкладки, а <h1> — видимий заголовок сторінки.
• <body> містить вміст, який браузер показує користувачеві.

Цей приклад відображається без хостингу й інтернету. Для переходу за зовнішнім посиланням інтернет уже потрібен. Складніші проєкти можуть потребувати локального сервера, але для цієї вправи він зайвий.

Якщо користуєтеся Блокнотом, під час збереження виберіть тип «Усі файли», ім’я index.html і кодування UTF-8. Перевірте розширення: файл index.html.txt залишиться текстовим документом.

Як відредагувати HTML і зберегти результат

Поверніться до index.html у редакторі. Замініть вміст <body> таким фрагментом:

<h1>Мій навчальний HTML-проєкт</h1>
<p>Я змінив заголовок і зберіг файл.</p>
<p>Тепер додаю ще один абзац.</p>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">Довідник HTML на MDN</a>

Збережіть файл через Ctrl + S, перейдіть у браузер і натисніть Ctrl + R або F5. Без окремо налаштованого автоматичного оновлення браузер не зобов’язаний одразу показувати збережені правки.

Перевірте три речі: на сторінці з’явився новий заголовок, під ним є два абзаци, а посилання відкриває довідник MDN. Назва вкладки залишиться попередньою, доки ви окремо не зміните текст у <title>.

Якщо щось випадково видалили, поверніться до редактора й скористайтеся Ctrl + Z. Для великих змін зручно попередньо зробити копію навчального файла.

Visual Studio Code допомагає з автодоповненням, закривальними тегами й форматуванням. Його можливості описані в документації підтримки HTML. Підказки редактора корисні, але не замінюють перевірку розмітки.

Зміна локального файла не публікує його в інтернеті. Для оновлення робочого сайту треба змінити відповідне джерело в його проєкті або CMS і виконати передбачений там процес публікації.

Як додати звичайний текст і показати код на сторінці

Для нового абзацу створюйте окремий елемент <p>. За звичайних CSS-налаштувань кілька пробілів і переносів рядка у вихідному тексті згортаються: клавіша Enter у редакторі сама собою не створює нового абзацу в браузері.

<p>Перший абзац.</p>
<p>Другий абзац.</p>

Для показу прикладу розмітки на самій сторінці кутові дужки потрібно екранувати. Запис <p> відобразиться як <p>, а не створить абзац. Блок <pre> за типовими налаштуваннями зберігає пробіли й переноси; <code> позначає фрагмент коду:

<pre><code>&lt;p&gt;Приклад абзацу&lt;/p&gt;</code></pre>

Для кольору, розміру шрифту та відступів потрібен CSS. Ці прийоми й текстові теги докладніше розібрані в матеріалі про додавання та форматування тексту в HTML.

Як перевірити HTML-код і знайти помилки

Спершу відкрийте сторінку в браузері. Прочитайте текст, натисніть посилання, перевірте зображення, якщо додавали їх, і звірте результат із задумом. Те, що сторінка відкрилася, ще не означає, що розмітка правильна: браузери можуть виправляти частину помилок під час побудови DOM.

Для окремої перевірки скористайтеся Nu HTML Checker. Можна вказати адресу опублікованої сторінки, завантажити файл або вставити код. Почніть із першої помилки: неправильно закритий елемент іноді спричиняє кілька наступних повідомлень.

Валідатор перевіряє розмітку, але не підтверджує правильність змісту, працездатність усіх посилань чи зручність сторінки. Це потрібно перевіряти окремо.

Чому зміни HTML не відображаються

Для локальної вправи почніть із простого: чи збережений файл, чи саме його відкрито в браузері та чи оновлено вкладку. Порівняйте шлях до файла в редакторі й адресному рядку. Дві копії index.html у різних папках легко переплутати.

Якщо звичайне оновлення не допомогло, спробуйте Ctrl + F5 або Ctrl + Shift + R, щоб перезавантажити сторінку без використання звичайного кешу браузера. Для опублікованого сайту цього може бути недостатньо: попередню версію також може зберігати сервер, плагін кешування або CDN.

Далі перевірте, де зроблено правку. Зміна в Elements зазвичай тимчасова. У WordPress текст запису варто шукати в редакторі записів, а структуру сторінки — у відповідному шаблоні чи компоненті. Окремого HTML-файла з усією готовою сторінкою там може не бути.

Якщо потрібний елемент є в DOM, але його не видно, перегляньте CSS. Якщо вміст змінюється після завантаження, перевірте JavaScript або компонент, який його створює. Перед редагуванням шаблонів робочого сайту зробіть резервну копію та визначте джерело потрібної розмітки.

Починайте з файла й збереження, потім перевіряйте браузер, а вже далі — шаблони, скрипти та кеш сайту. Така послідовність допомагає знайти причину без випадкових правок у різних місцях.