HTML з нуля: як створюються вебсторінки та як навчитися писати HTML-код

Вступ

Коли ми відкриваємо будь-який сайт, то бачимо готову вебсторінку: текст, заголовки, зображення, кнопки, меню та інші елементи. Але браузер не отримує цю сторінку у вигляді готової картинки. Він отримує спеціальний код, аналізує його та перетворює на те, що ми бачимо на екрані.

Однією з основних технологій, які використовуються для створення вебсторінок, є HTML.

У цій статті розглянемо HTML із самого початку: з'ясуємо, як він працює, навчимося розуміти його синтаксис, розберемо основні теги й створимо власну просту вебсторінку.

1. Що таке HTML?

HTML — це мова розмітки гіпертексту (HyperText Markup Language).

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

Наприклад, за допомогою HTML ми можемо повідомити браузеру:

• цей текст є головним заголовком;

• цей текст є звичайним абзацом;

• тут потрібно показати зображення;

• цей елемент є посиланням;

• тут розташований список;

• нижче знаходиться форма для введення інформації.

• HTML — це конструкція будинку: стіни, кімнати, двері та вікна.

• CSS — це зовнішній вигляд: кольори, оздоблення, розміри та розташування меблів.

• JavaScript — це функціональність: освітлення, автоматичні двері, керування обладнанням та інші інтерактивні можливості.

HTML створює основу, CSS оформлює її, а JavaScript додає поведінку та інтерактивність.

2. Як браузер працює з HTML?

Коли браузер отримує HTML-документ, він аналізує його код і поступово створює внутрішнє представлення сторінки.

Цей процес називається розбором HTML (HTML parsing).

DOM можна уявити як дерево, у якому кожен HTML-елемент є окремим вузлом.

Наприклад, маємо такий HTML-код:

<!DOCTYPE html>

<html>

  <head>

    <title>Моя сторінка</title>

  </head>

  <body>

    <h1>Привіт, світе!</h1>

    <p>Це моя перша вебсторінка.</p>

  </body>

</html>

Браузер сприймає його приблизно так:

html

├── head

│   └── title

│       └── "Моя сторінка"

│

└── body

    ├── h1

    │   └── "Привіт, світе!"

    │

    └── p

        └── "Це моя перша вебсторінка."

Це дерево показує взаємозв'язки між елементами документа.

Наприклад, body містить заголовок h1 та абзац p. Вони є дочірніми елементами body.

Отже, HTML створює початкову структуру, а браузер перетворює її на DOM, з яким можуть працювати інші вебтехнології.

3. Що таке HTML-теги, елементи та атрибути?

Щоб навчитися писати HTML, потрібно розібратися з трьома основними поняттями: тегами, елементами й атрибутами.

3.1. HTML-теги

Наприклад:

<h1>Головний заголовок</h1>

<p>Звичайний текстовий абзац.</p>

У першому прикладі:

• <h1> — відкривальний тег;

• Головний заголовок — вміст;

• </h1> — закривальний тег.

У другому прикладі використовується тег <p>, який позначає абзац.

Більшість HTML-тегів мають відкривальну та закривальну частини.

3.2. HTML-елементи

Елемент — це повна конструкція, яка складається з тегів і вмісту між ними.

Наприклад:

<p>Я вивчаю HTML.</p>

Увесь цей запис є HTML-елементом.

Різниця проста:

• тег — це окрема конструкція на кшталт <p>;

• елемент — це вся структура, включно з текстом та тегами.

3.3. Елементи без закривального тегу

Не всі HTML-елементи мають відкривальний і закривальний теги.

Наприклад:

<img src="photo.jpg" alt="Опис фотографії">

<br>

<hr>

Тут:

• <img> додає зображення;

• <br> створює перенесення рядка;

• <hr> позначає тематичний роздільник.

Для цих елементів не потрібні окремі закривальні теги.

3.4. Атрибути HTML

Наприклад:

<a href="https://example.com">Перейти на сайт</a>

Тут href — атрибут, який визначає адресу посилання.

Інший приклад:

<img src="photo.jpg" alt="Мій автомобіль">

У цьому випадку:

• src вказує шлях до зображення;

• alt містить текстовий опис зображення.

Інші приклади атрибутів:

• id — унікальний ідентифікатор елемента;

• class — клас для групування елементів і застосування стилів;

• title — додаткова інформація про елемент;

• width — ширина;

• height — висота.

Приклад:

<img

  src="images/cat.jpg"

  alt="Кіт на дивані"

  width="400"

  height="300"

>

Цей запис додає зображення, задає його опис і розміри.

4. Основні HTML-елементи

Тепер розглянемо елементи, які найчастіше використовуються під час створення вебсторінок.

4.1. Заголовки

HTML має шість рівнів заголовків: від <h1> до <h6>.

<h1>Головний заголовок</h1>

<h2>Заголовок другого рівня</h2>

<h3>Заголовок третього рівня</h3>

<h4>Заголовок четвертого рівня</h4>

<h5>Заголовок п'ятого рівня</h5>

<h6>Заголовок шостого рівня</h6>

<h1> — заголовок найвищого рівня, а <h6> — найнижчого.

Заголовки потрібні не лише для зміни розміру тексту. Вони формують логічну ієрархію документа.

Наприклад:

<h1>Мій блог</h1>

<h2>Технології</h2>

<p>Статті про сучасні технології.</p>

<h2>Навчання</h2>

<p>Матеріали для самостійного навчання.</p>

У цьому прикладі h1 позначає головну тему сторінки, а h2 — окремі тематичні розділи.

Не варто використовувати заголовки лише тому, що вони мають потрібний розмір. Для оформлення тексту існує CSS.

4.2. Абзаци

Тег <p> використовується для створення текстових абзаців.

<p>Це перший абзац.</p>

<p>Це другий абзац.</p>

Браузер зазвичай відображає кожен абзац окремим блоком із відступами.

4.3. Виділення тексту

Для виділення важливого тексту використовуються різні елементи.

<strong>Важливий текст</strong>

<em>Текст із наголосом</em>

<b>Візуально виділений текст</b>




<i>Текст, виділений курсивом</i>

Між ними є відмінності.

• <strong> позначає важливість або значущість тексту.

• <em> позначає логічний наголос.

• <b> привертає увагу до тексту без додавання особливої важливості.

• <i> позначає текст, який відрізняється від основного за певним змістовим призначенням, наприклад іншомовний термін.

Для семантичного виділення важливості зазвичай доречніші <strong> та <em>.

4.4. Списки

HTML підтримує кілька типів списків.

• Невпорядкований список

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

<ul>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

<ul> створює список, а <li> позначає окремий пункт.

• Впорядкований список

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

<ol>

  <li>Відкрити редактор коду.</li>

  <li>Створити HTML-файл.</li>

  <li>Написати код.</li>

  <li>Відкрити файл у браузері.</li>

</ol>

Браузер автоматично нумерує такі пункти.

Список визначень

Для термінів та їхніх пояснень можна використовувати:

• <dl> — список визначень;

• <dt> — термін;

• <dd> — його опис.

<dl>

  <dt>HTML</dt>

  <dd>Мова розмітки гіпертексту.</dd>


  <dt>CSS</dt>

  <dd>Мова стилів для оформлення вебсторінок.</dd>

</dl>

4.5. Посилання

Посилання створюються за допомогою тегу <a>.

<a href="https://www.google.com">Відкрити Google</a>

Атрибут href визначає адресу, на яку перейде користувач після натискання.

Наприклад, перехід до іншого HTML-файлу:

<a href="about.html">Про нас</a>

Відкриття зовнішнього сайту в новій вкладці:

<a

  href="https://example.com"

  target="_blank"

  rel="noopener noreferrer"

>

  Відкрити сайт

</a>

target="_blank" відкриває посилання в новій вкладці або вікні браузера. 

rel="noopener noreferrer" додає захист під час відкриття зовнішньої сторінки в новій вкладці.

4.6. Зображення

Для додавання зображень використовується тег <img>.

<img src="photo.jpg" alt="Опис фотографії">

Основні атрибути:

• src — шлях до зображення;

• alt — текстовий опис;

• width — ширина;

• height — висота.

Наприклад:

<img

  src="images/computer.jpg"

  alt="Комп'ютер на робочому столі"

  width="500"

>

Атрибут alt особливо важливий для доступності. Його можуть використовувати програми читання з екрана, а також він допомагає зрозуміти призначення зображення, якщо воно не завантажилося.

<img src="decoration.png" alt="">

4.7. Таблиці

HTML дозволяє створювати таблиці для представлення структурованих даних.

Основні елементи:

• <table> — таблиця;

• <tr> — рядок;

• <th> — заголовкова комірка;

• <td> — звичайна комірка;

• <thead> — група заголовкових рядків;

• <tbody> — основна частина таблиці;

• <tfoot> — нижня частина таблиці.

Приклад:

<table>

  <thead>

    <tr>

      <th>Технологія</th>

      <th>Призначення</th>

    </tr>

  </thead>




  <tbody>

    <tr>

      <td>HTML</td>

      <td>Структура сторінки</td>

    </tr>




    <tr>

      <td>CSS</td>

      <td>Оформлення сторінки</td>

    </tr>




    <tr>

      <td>JavaScript</td>

      <td>Інтерактивність</td>

    </tr>

  </tbody>

</table>

Таблиці варто використовувати саме для табличних даних, а не для побудови загального макета сторінки. Для розташування елементів сьогодні застосовують CSS.

4.8. Форми та поля введення

Форми дозволяють користувачам передавати інформацію вебсайту.

Наприклад, через форму можна:

• увійти в обліковий запис;

• зареєструватися;

• залишити коментар;

• виконати пошук;

• надіслати повідомлення.

Основний елемент форми — <form>.

Приклад:

<form>

  <label for="username">Ваше ім'я:</label>

  <input

    type="text"

    id="username"

    name="username"

  >




  <button type="submit">Надіслати</button>

</form>

Тут:

• <form> створює форму;

• <label> задає назву поля;

• <input> створює поле введення;

• <button> створює кнопку.

Атрибут type визначає тип поля.

Наприклад:

<input type="text">

<input type="email">

<input type="password">

<input type="number">

<input type="date">

<input type="checkbox">

<input type="radio">

Кожен тип має своє призначення.

Важливо: HTML-форми можуть надсилати дані стандартними засобами браузера, навіть без JavaScript. Для цього використовуються атрибути action і method.

Щоб обробити та зберегти отриману інформацію, зазвичай потрібна серверна частина сайту. JavaScript може додатково керувати поведінкою форми та її обробкою.

5. Структура повноцінного HTML-документа

Тепер, коли ми розглянули основні елементи, потрібно навчитися правильно організовувати їх у документі.

Практично кожна звичайна 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>Це моя перша вебсторінка.</p>

</body>

</html>

Розглянемо кожну частину.

5.1. <!DOCTYPE html>

Цей запис повідомляє браузеру, що документ потрібно обробляти відповідно до сучасних правил HTML, використовуючи режим стандартів. Він допомагає уникнути застарілого режиму сумісності (Quirks Mode). 

Його потрібно розміщувати на початку HTML-файлу.

5.2. <html>

Це кореневий елемент документа. Усередині нього розташовується весь HTML-код сторінки.

• Атрибут lang визначає мову документа:

<html lang="uk">

У цьому випадку вказано українську мову.

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

5.3. <head>

Елемент <head> містить службову інформацію про документ.

Зазвичай тут розміщують:

• назву сторінки;

• кодування символів;

• налаштування відображення на мобільних пристроях;

• підключення CSS;

• інші метадані.

5.4. Кодування символів — charset

<meta charset="UTF-8">

Цей запис визначає кодування документа.

UTF-8 підтримує українські літери, латиницю, більшість інших мовних символів і спеціальні знаки.

5.5. Налаштування viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

width=device-width

встановлює ширину області перегляду відповідно до ширини пристрою.

initial-scale=1.0

задає початковий масштаб.

5.6. Назва сторінки — <title>

<title>Моя перша вебсторінка</title>

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

5.7. <body>

Усередині <body> розташовується основний вміст сторінки — усе те, що користувач зазвичай бачить у браузері.

Наприклад:

<body>

  <h1>Мій сайт</h1>

  <p>Ласкаво просимо!</p>

  <img src="photo.jpg" alt="Фотографія">

</body>

Саме тут створюється видима частина вебсторінки.

6. Вкладеність HTML-елементів

HTML-елементи можуть розміщуватися всередині інших елементів. Це називається вкладеністю.

Наприклад:

<div>

  <h2>Мій розділ</h2>

  <p>Тут розташований текст.</p>

</div>

У цьому випадку h2 та p вкладені всередину div.

Вкладеність дозволяє групувати пов'язані елементи та створювати складнішу структуру сторінки.

Важливо дотримуватися правильного порядку відкривання та закривання тегів.

<p>

  Це текст із <strong>важливим фрагментом</strong>.

</p>

<p>

  Це текст із <strong>важливим фрагментом.

</p>

</strong>

У другому прикладі елементи закриваються не в тому порядку, у якому відкривалися.

Також не всі елементи дозволено вкладати один в одного. HTML має правила, які визначають допустимі взаємозв'язки між елементами.

7. Що таке div і навіщо він потрібен?

<div> — це універсальний блоковий елемент, який використовують для групування інших елементів.

Наприклад:

<div>

  <h2>Про мене</h2>

  <p>Я вивчаю веброзробку.</p>

</div>

Сам по собі div не повідомляє браузеру, що саме означає його вміст. Він просто створює контейнер.

Зазвичай div використовують разом із CSS, щоб оформлювати групи елементів або керувати їхнім розташуванням.

Наприклад:

<div class="card">

  <h2>HTML</h2>

  <p>Мова розмітки вебсторінок.</p>

</div>

Атрибут class дозволяє надалі звернутися до цього контейнера через CSS або JavaScript.

Однак не варто використовувати div для всього підряд. Якщо для певної частини сторінки існує спеціальний семантичний елемент, краще застосувати його.

8. Семантичний HTML

Семантика — це значення або зміст, який має певний елемент.

Наприклад, якщо на сторінці є головне меню, для нього доречно використати <nav>, а не просто <div>.

Основні семантичні елементи:

• <header> — вступна частина сторінки або окремого розділу;

• <nav> — блок навігації;

• <main> — основний унікальний вміст сторінки;

• <article> — самостійний матеріал, наприклад стаття або допис;

• <section> — тематичний розділ документа;

• <aside> — додатковий або побічний вміст;

• <footer> — завершальна частина сторінки або розділу.

Приклад структури:

<body>




  <header>

    <h1>Мій блог</h1>




    <nav>

      <a href="index.html">Головна</a>

      <a href="about.html">Про мене</a>

      <a href="contacts.html">Контакти</a>

    </nav>

  </header>




  <main>




    <article>

      <h2>Що таке HTML?</h2>

      <p>HTML використовується для створення структури вебсторінок.</p>

    </article>




    <section>

      <h2>Інші матеріали</h2>

      <p>Тут розміщені додаткові навчальні матеріали.</p>

    </section>




    <aside>

      <h2>Корисне посилання</h2>

      <a href="https://developer.mozilla.org/">MDN Web Docs</a>

    </aside>




  </main>




  <footer>

    <p>© 2026 Мій блог</p>

  </footer>




</body>

Чому семантика важлива?

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

По-друге, для пошукових систем. Семантично зрозуміла структура допомагає правильно інтерпретувати зміст сторінки.

По-третє, для розробників. Код стає зрозумілішим, його легше читати, підтримувати та змінювати.

9. Практика: створюємо власну HTML-сторінку

Тепер перейдемо від теорії до практики.

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

Можна використовувати звичайний «Блокнот», але зручніше працювати у спеціальному редакторі коду, наприклад Visual Studio Code.

Крок 1. Створюємо папку проєкту

Створи на комп'ютері папку з назвою:

• MyFirstWebsite

У ній зберігатимуться всі файли нашого першого сайту.

Крок 2. Створюємо HTML-файл

Відкрий редактор коду та створи новий файл.

Назви його:

• index.html

Розширення .html повідомляє системі та програмам, що це HTML-документ.

Назва index.html традиційно використовується як основний файл вебсайту.

Крок 3. Додаємо базову структуру

Встав у файл такий код:

<!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>




  <h2>Що я вже знаю?</h2>




  <ul>

    <li>HTML створює структуру сторінки.</li>

    <li>Теги визначають елементи.</li>

    <li>Атрибути додають елементам параметри.</li>

  </ul>




  <a href="https://developer.mozilla.org/">

    Перейти до документації MDN

  </a>




</body>

</html>

Збережи файл.

Крок 4. Відкриваємо сторінку в браузері

Знайди файл index.html у папці проєкту та відкрий його подвійним натисканням.

Він відкриється у браузері.

Ти побачиш:

• головний заголовок;

• текстовий абзац;

• підзаголовок;

• список;

• посилання.

Це вже повноцінна проста HTML-сторінка.

Вона поки що не має складного дизайну, але її структура вже створена.

Крок 5. Змінюємо сторінку

Повернися до редактора коду.

Заміни текст:

<h1>Привіт! Це мій перший сайт.</h1>

на:

<h1>Ласкаво просимо на мій навчальний сайт!</h1>

Збережи файл і повернися до браузера.

Онови сторінку клавішею F5.

Заголовок зміниться.

Так можна експериментувати з HTML: додавати нові елементи, змінювати текст, створювати списки, додавати посилання та зображення.

10. Організація файлів вебсайту

Коли сайт стає більшим, зберігати всі файли в одній папці незручно.

Тому проєкти зазвичай мають певну структуру.

Наприклад:

MyFirstWebsite/

│

├── index.html

├── about.html

│

├── css/

│   └── style.css

│

├── js/

│   └── script.js

│

└── images/

    ├── logo.png

    └── photo.jpg

Призначення папок:

• css — файли стилів;

• js — файли JavaScript;

• images — зображення;

• HTML-файли — сторінки сайту.

Така організація допомагає підтримувати порядок і полегшує роботу над проєктом.

10.1. Як підключити CSS до HTML?

Усередині <head> додаємо:

<link rel="stylesheet" href="css/style.css">

Цей запис повідомляє браузеру, де знаходиться файл стилів.

10.2. Як підключити JavaScript?

Перед закривальним тегом </body> можна додати:

<script src="js/script.js"></script>

Це підключає зовнішній JavaScript-файл.

Існують й інші способи підключення скриптів, наприклад використання атрибута defer у <head>. До цього ми повернемося під час вивчення JavaScript.

11. Відносні та абсолютні шляхи

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

Для цього використовуються шляхи.

Відносний шлях визначає розташування файлу відносно поточного документа.

Наприклад:

<img src="images/photo.jpg" alt="Фотографія">

Якщо HTML-файл розташований у кореневій папці проєкту, браузер шукатиме зображення в папці images.

Ще один приклад:

<a href="about.html">Про мене</a>

Тут браузер шукатиме файл about.html у тій самій папці, що й поточна сторінка.

Якщо потрібно перейти на рівень вище, можна використати ../:

<img src="../images/photo.jpg" alt="Фотографія">

Абсолютний URL містить повну адресу ресурсу.

Наприклад:

<img

  src="https://example.com/images/photo.jpg"

  alt="Фотографія"

>

У цьому випадку браузер завантажує зображення з іншого вебсайту.

Важливо розрізняти абсолютні URL та абсолютні шляхи у файловій системі. Для вебсторінок найчастіше ми працюватимемо з відносними шляхами та повними URL-адресами ресурсів.

12. Типові помилки початківців

Під час першого знайомства з HTML легко припуститися помилок. Це нормальна частина навчання.

Розглянемо найпоширеніші випадки.

12.1. Забутий закривальний тег

Помилково:

<p>Це мій текст.

<p>А це інший текст.</p>

Краще:

<p>Це мій текст.</p>

<p>А це інший текст.</p>

Деякі HTML-елементи можуть автоматично закриватися браузером за правилами HTML, але покладатися на таку поведінку без потреби не варто.

12.2. Неправильна вкладеність

Помилково:

<p>

  <strong>Важливий текст.

</p>

</strong>

Правильно:

<p>

  <strong>Важливий текст.</strong>

</p>

12.3. Неправильний шлях до зображення

Наприклад:

<img src="photo.jpg" alt="Фото">

Але файл насправді знаходиться в папці images.

Правильний запис:

<img src="images/photo.jpg" alt="Фото">

Якщо браузер не може знайти зображення, варто перевірити назву файлу, розширення та шлях.

12.4. Відсутність alt

Не найкращий варіант:

<img src="cat.jpg">

Краще:

<img src="cat.jpg" alt="Кіт сидить на підвіконні">

12.5. Використання заголовків лише для зміни розміру тексту

Не варто використовувати <h1>, <h2> або інші заголовки просто тому, що вони візуально підходять.

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

12.6. Використання неправильних назв файлів

Наприклад, файл називається Photo.jpg, а в коді зазначено photo.jpg.

На деяких системах це може призвести до помилки, оскільки великі та малі літери в назвах файлів розрізняються.

Тому бажано використовувати зрозумілі назви та дотримуватися однакового стилю написання.

13. Як перевіряти HTML-код?

Навіть досвідчені розробники регулярно перевіряють свій код.

13.1. Інструменти розробника в браузері — DevTools

У більшості сучасних браузерів є вбудовані інструменти розробника.

Щоб відкрити їх, натисни F12 або скористайся комбінацією Ctrl + Shift + I.

Там відображається структура DOM поточної сторінки.

За допомогою DevTools можна:

• переглядати HTML-структуру;

• знаходити конкретні елементи;

• перевіряти атрибути;

• тимчасово змінювати текст і розмітку;

• аналізувати CSS;

• переглядати помилки та попередження.

DevTools — один із найважливіших інструментів веброзробника. З часом ми навчимося використовувати його не лише для HTML, а й для CSS, JavaScript, мережевих запитів та інших завдань.

13.2. HTML Validator

Для перевірки правильності HTML-розмітки існує офіційний сервіс Nu HTML Checker.

Він дозволяє перевірити HTML-код і знайти проблеми, наприклад:

• неправильне використання елементів;

• некоректну вкладеність;

• відсутні або некоректні атрибути;

• інші порушення правил HTML.

Сервіс:

• https://validator.w3.org/nu/

Можна перевірити як HTML-файл, так і сторінку за URL-адресою.

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

14. Що ще можна робити за допомогою HTML?

HTML містить значно більше можливостей, ніж ті, які ми розглянули в цій статті.

Наведемо кілька додаткових прикладів.

14.1. Аудіо

Для вбудовування аудіофайлів використовується <audio>.

<audio controls>

  <source src="music.mp3" type="audio/mpeg">

  Ваш браузер не підтримує відтворення аудіо.

</audio>

Атрибут controls додає елементи керування відтворенням.

14.2. Відео

Для додавання відео використовується <video>.

<video width="640" controls>

  <source src="video.mp4" type="video/mp4">

 Ваш браузер не підтримує відтворення відео.

</video>

Можна вказувати розміри, додавати елементи керування та використовувати інші атрибути.

14.3. Розкривні блоки

Елементи <details> і <summary> дозволяють створювати блоки, які користувач може відкривати та закривати.

<details>

  <summary>Що таке HTML?</summary>

  <p>HTML — це мова розмітки гіпертексту.</p>

</details>

Це зручно для запитань і відповідей, додаткових пояснень та інших елементів інтерфейсу.

14.4. Вбудовування інших сторінок

Елемент <iframe> дозволяє вбудовувати зовнішній документ у поточну сторінку.

Наприклад:

<iframe

  src="https://example.com"

  title="Приклад вбудованої сторінки"

  width="600"

  height="400"

></iframe>

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

14.5. Доступність вебсторінок

Доступність (Web Accessibility) — це підхід до створення сайтів, якими можуть користуватися люди з різними можливостями та способами взаємодії з комп'ютером.

Під час створення доступних сторінок важливо:

• використовувати семантичні HTML-елементи;

• додавати змістовні альтернативні описи зображень;

• пов'язувати підписи з полями форм;

• забезпечувати зрозумілу структуру заголовків;

• не покладатися лише на колір для передачі важливої інформації;

• враховувати навігацію за допомогою клавіатури.

14.6. HTML і SEO

SEO (Search Engine Optimization) — це оптимізація сайту для пошукових систем.

HTML може допомагати пошуковим системам краще розуміти вміст сторінки.

Для цього важливо:

• використовувати зрозумілу структуру заголовків;

• задавати змістовний заголовок сторінки через <title>;

• правильно використовувати семантичні елементи;

• додавати описові тексти для зображень;

• створювати логічну структуру посилань.

Однак правильний HTML сам по собі не гарантує високих позицій у пошуковій видачі.

На SEO впливають також якість і корисність вмісту, швидкість сайту, зовнішні посилання, технічний стан та багато інших чинників.

15. Підсумок: що потрібно запам'ятати?

HTML — фундаментальна технологія веброзробки. Вона визначає структуру та зміст вебсторінок.

Основні поняття, які ми розглянули:

1. HTML — мова розмітки, а не мова програмування.

2. Теги — конструкції, які позначають типи HTML-елементів.

3. Елементи — повні структури, що складаються з тегів і вмісту.

4. Атрибути — додаткові параметри елементів.

5. DOM — деревоподібна модель документа, яку створює браузер під час обробки HTML.

6. head — частина документа зі службовою інформацією.

7. body — частина документа з основним вмістом сторінки.

8. Семантичний HTML — використання елементів відповідно до їхнього змістового призначення.

9. CSS відповідає за оформлення, а JavaScript — за інтерактивність і логіку.

10. DevTools і HTML Validator допомагають перевіряти та аналізувати код.

Не потрібно намагатися одразу запам'ятати всі HTML-теги. Набагато корисніше зрозуміти принцип роботи розмітки та навчитися знаходити потрібну інформацію в документації.

17. Контрольні запитання

Перевір себе після прочитання статті.

1. Що таке HTML?

• А. Мова програмування для створення серверів.

• Б. Мова розмітки для створення структури вебсторінок.

• В. Мова стилів для оформлення сайтів.

2. За що відповідає CSS?

• А. За структуру сторінки.

• Б. За оформлення та зовнішній вигляд сторінки.

• В. За збереження інформації в базі даних.

3. Що таке DOM?

• А. Назва браузера.

• Б. Деревоподібна модель HTML-документа.

• В. Спеціальний формат зображень.

4. Для чого використовується атрибут href?

• А. Для визначення адреси посилання.

• Б. Для зміни кольору тексту.

• В. Для встановлення ширини зображення.

5. Який тег використовується для створення головного заголовка?

• А. <p>

• Б. <h1>

• В. <title>

6. Для чого потрібен атрибут alt у зображеннях?

• А. Для встановлення кольору зображення.

• Б. Для додавання альтернативного текстового опису.

• В. Для зміни формату файлу.

7. Який елемент призначений для основного унікального вмісту сторінки?

• А. <main>

• Б. <footer>

• В. <aside>

8. Який інструмент допомагає перевіряти правильність HTML-розмітки?

• А. Калькулятор.

• Б. Nu HTML Checker.

• В. Графічний редактор.

Відповіді для самоперевірки

• 1 — Б.

• 2 — Б.

• 3 — Б.

• 4 — А.

• 5 — Б.

• 6 — Б.

• 7 — А.

• 8 — Б.

Якщо відповіді правильні, ти засвоїв основні поняття цієї статті. Якщо ні — повернися до відповідних розділів і спробуй пояснити їх власними словами.