Текстові елементи веб-сторінки, теги та їх атрибути. Гіперпосилання.

Інформатика 11 клас. Модуль: Веб-технології

🔁 Пригадаймо: структура HTML-документа

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

Будь-який HTML-документ має обов’язковий каркас:

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8">
    <title>Моя перша сторінка</title>
  </head>
  <body>
    <h1>Привіт, світ!</h1>
  </body>
</html>

Розберімо кожен елемент цього каркаса окремо.

<head>

Службовий розділ. Усе, що тут записано, не відображається на сторінці. Це інформація про документ: кодування, назва, підключення стилів.

<body>

Тіло документа. Усе, що тут записано, відображається на сторінці: заголовки, текст, зображення, посилання.

Також пригадаймо три ключові поняття.

Тег

Команда в кутових дужках, наприклад <h1>.

Елемент

Тег разом зі своїм вмістом, наприклад <h1>Привіт</h1>.

Атрибут

Уточнення до тега, яке записується всередині відкриваючого тега, наприклад lang="uk".

На першому уроці ми наповнили <body> лише заголовком і абзацом. Сьогодні ми розширимо цей набір і навчимося оформлювати текст та створювати гіперпосилання.

📌 Заголовки <h1>–<h6>

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

У HTML існує шість рівнів заголовків. Позначаються вони тегами <h1>–<h6>, де цифра вказує рівень: <h1> — найвищий, <h6> — найнижчий.

Як це працює:

<h1> — головний заголовок сторінки. На одній сторінці має бути лише один <h1>. Це як назва книги.
<h2> — заголовок великого розділу. Їх може бути кілька на сторінці. Це як назви глав.
<h3> — підрозділ усередині <h2>.
<h4>–<h6> — ще дрібніші рівні, використовуються рідко, але існують для повноти ієрархії.

Приклад коду:

📄 index.html

<h1>Моя перша сторінка</h1>
<h2>Про мене</h2>
<p>Тут текст про мене...</p>
<h2>Мої захоплення</h2>
<p>Тут текст про захоплення...</p>
<h3>Програмування</h3>
<p>Тут текст про програмування...</p>

У цьому прикладі:

<h1> — один, головний;
<h2> — два, для розділів «Про мене» та «Мої захоплення»;
<h3> — один, вкладений у розділ «Мої захоплення».

Як це виглядає у браузері:

Браузер автоматично робить заголовки більшими й жирнішими за звичайний текст. Чим менша цифра рівня — тим більший шрифт: <h1> найбільший, <h6> найменший. Відступи зверху й знизу браузер також додає сам.

📌 Важливо: кожен рівень заголовка має смислове значення: він показує, наскільки важлива ця частина тексту та як вона співвідноситься з іншими. <h1> — головне на сторінці, <h2> — розділ, <h3> — підрозділ.

Тому не варто використовувати <h2> лише для того, щоб «зробити текст більшим». Якщо це справді новий розділ — тоді <h2> доречний. Якщо ж просто потрібен великий текст, але за змістом це не заголовок, — для цього використовують CSS. Саме CSS відповідає за те, як виглядає текст, а HTML — за те, чим він є.

📄 Абзаци <p>

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

Для створення абзацу використовують парний тег <p> (від англ. paragraph — абзац).

Приклад коду:

<p>Це перший абзац тексту. Браузер покаже його окремо.</p>
<p>Це другий абзац. Між ним і першим буде відступ.</p>

Як це виглядає у браузері:

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

📌 Важливо: переноси рядків у коді (натискання Enter у редакторі) браузер ігнорує. Якщо ви напишете текст у кілька рядків без тега <p>, на сторінці він усе одно відобразиться як один суцільний абзац. Щоб розділити текст, потрібно обов’язково використовувати <p> або <br> (про нього — далі).

❌ Приклад — як НЕ працює:

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

✅ Як зробити правильно:

✏️ Форматування тексту

Іноді в тексті потрібно виділити окремі слова або фрази: зробити їх жирними, курсивом, підкреслити, додати індекси тощо. Для цього в HTML є набір тегів форматування.

Усі теги форматування можна умовно поділити на дві групи: семантичні та візуальні.

Семантичні теги

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

📘 <strong> — вказує на важливість. Браузер зазвичай показує такий текст жирним.

📘 <em> — вказує на наголос (від англ. emphasis). Браузер зазвичай показує такий текст курсивом.

Візуальні теги

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

📘 <b> — жирний текст (від англ. bold).

📘 <i> — курсив (від англ. italic).

📘 <u> — підкреслений текст (від англ. underline).

У чому різниця?

Візуально <strong> і <b> виглядають однаково — обидва роблять текст жирним. Так само <em> і <i> — обидва роблять текст курсивом. Але смислове навантаження в них різне.

Коли ми пишемо <strong>, ми кажемо браузеру та пошуковим системам: «це справді важливо». Коли пишемо <b> — лише «зроби це жирним, бо так треба візуально».

У сучасному HTML прийнято використовувати семантичні теги (<strong>, <em>), бо вони несуть зміст. Візуальні (<b>, <i>) залишились для випадків, коли потрібно просто виділити текст без смислового підтексту.

Теги для спеціальних випадків

📘 <sub> — нижній індекс. Наприклад, у хімічних формулах: H₂O.

📘 <sup> — верхній індекс. Наприклад, у математиці: x².

📘 <br> — перенесення рядка. Одиночний тег, який каже браузеру почати новий рядок у тому ж місці.

📘 <hr> — горизонтальна лінія. Одиночний тег, який малює розділювальну лінію на всю ширину сторінки. Використовується, щоб візуально відокремити один смисловий блок від іншого.

📘 <pre> — текст із збереженням форматування. Усередині <pre> браузер зберігає всі пробіли та переноси рядків так, як вони записані в коді. Використовується для фрагментів коду, схем, таблиць ASCII.

Приклад

📄 index.html

<p>Це звичайний текст, а це <strong>важлива частина</strong>.</p>
<p>А тут <em>наголос</em> на слові.</p>
<p>Формула води: H<sub>2</sub>O.</p>
<p>Площа квадрата: a<sup>2</sup>.</p>
<hr>
<pre>
  функція hello() {
    console.log("Привіт!");
  }
</pre>

Як це виглядає у браузері:

📌 Важливо: старі теги <b> і <i> досі працюють у браузерах, але в сучасному HTML для позначення важливості й наголосу використовують <strong> і <em>. Теги <b> і <i> залишаються для суто візуального виділення без смислового підтексту.

Окрім того, існують ще застарілі теги, які офіційно вилучено зі стандарту HTML5 — наприклад, <font> (колір, шрифт, розмір тексту) або <center> (вирівнювання по центру). Їх не можна використовувати для нових сторінок. Замість них використовують CSS — мову стилів, яку ми вивчимо в наступних темах.

❓ А навіщо взагалі теги, якщо є <pre>?

Справді, виникає логічне питання: навіщо вивчати десятки тегів, якщо можна все помістити в <pre> — і писати звичайним текстом із переносами рядків, пробілами й відступами? Браузер же все збереже?

Проблема в тому, що <pre> не описує структуру. Він лише каже браузеру: «покажи цей текст так, як він записаний — зі збереженням пробілів і переносів». Але що саме це за текст — заголовок це чи абзац, важливе це чи ні — браузер не знає.

Порівняймо.

Варіант 1. Усе в <pre>:

У браузері це виглядатиме як звичайний моноширинний текст (як у текстовому редакторі). Жодного заголовка, жодного виділення, жодного смислового поділу. Пошукова система не зрозуміє, що «Про мене» — це заголовок розділу.

Варіант 2. Із тегами:

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

У чому практична різниця:

Пошукові системи (Google, Bing) аналізують структуру сторінки. Вони «читають» заголовки, розуміють, про що сторінка, і показують її в результатах пошуку. Якщо все загорнуто в <pre> — вони не бачать структури й не “розуміють” змісту.
Програми читання з екрана (для людей з вадами зору) орієнтуються на заголовки, щоб озвучити структуру сторінки. Без тегів вони читатимуть суцільний текст.
Стилі CSS застосовуються до конкретних елементів. Можна окремо оформити <h1>, окремо <p>, окремо <strong>. Але якщо все в одному <pre> — оформити окремі частини неможливо.
Сам текст у <pre> відображається моноширинним шрифтом (як у коді), а не звичайним шрифтом із засічками. Це виглядає неприродно для статті чи сторінки.

📌 Головна ідея: HTML — це не «спосіб зробити текст із відступами». Це мова опису структури. Теги кажуть браузеру, пошуковим системам і програмам, чим є кожна частина тексту. А <pre> — це лише окремий інструмент для специфічних випадків (фрагменти коду, ASCII-схеми, таблиці).

🔗 Гіперпосилання <a>

Гіперпосилання — це те, з чого почалася Всесвітня павутина. Саме завдяки їм окремі сторінки з’єднуються в мережу, і користувач може переходити від однієї до іншої одним кліком.

Для створення посилання використовують парний тег <a> (від англ. anchor — якір).

Приклад коду:

<a href="https://www.google.com">Перейти до Google</a>

У цьому прикладі:

<a> — тег посилання;
href="https://www.google.com" — атрибут, який указує адресу (детально про атрибути — у наступному блоці);
Перейти до Google — текст, який бачить користувач і на який він може натиснути.

Як це виглядає у браузері:

Браузер автоматично зробить текст «Перейти до Google» синім підкресленим — це стандартний вигляд посилання. Коли користувач наведе на нього курсор, він побачить «руку», а при натисканні — перейде на Google.

📌 Важливо: тег <a> завжди парний. Якщо забути закриваючий тег </a>, усе, що йде далі, стане частиною посилання.

⚙️ Атрибути тегів

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

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

📘 Атрибут — це додаткова характеристика тега, яка уточнює або доповнює його дію.

Атрибут завжди записується всередині відкриваючого тега — після назви тега, через пробіл, у форматі назва="значення".

Будова атрибута:

<тег назва_атрибута="значення">

Розберімо на знайомому прикладі:

<a href="https://www.google.com">

<a> — тег посилання;
href — назва атрибута;
"https://www.google.com" — значення атрибута;
лапки навколо значення — обов’язкові.

Навіщо потрібні атрибути:

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

Наприклад, тег <a> створює посилання. Але куди воно веде — визначає атрибут href, а як його відкривати — атрибут target.

Додаткові атрибути посилання

📘 target="_blank" — відкриває посилання в новій вкладці браузера. Без цього атрибута посилання відкриється в тій самій вкладці, замінивши поточну сторінку.

📘 title — додає підказку, яка з’являється при наведенні курсора. Підказка не є обов’язковою, але допомагає користувачеві зрозуміти, куди веде посилання.

Кілька атрибутів в одному тегу:

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

<a href="https://www.google.com" target="_blank" title="Пошуковий сервіс">

Тут три атрибути: href, target, title.

Приклад коду з кількома посиланнями:

📄 index.html

<p>Мої улюблені сайти:</p>
<ul>
  <li><a href="https://www.google.com">Google</a></li>
  <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
  <li><a href="https://www.wikipedia.org" title="Вільна енциклопедія">Вікіпедія</a></li>
</ul>

Як це виглядає у браузері:

📌 Важливо:

Атрибути записуються лише у відкриваючому тегу. У закриваючому тегу </a> їх бути не може.
Значення атрибута завжди беруть у лапки.
У різних тегів — різні набори атрибутів. У <a> є href, у <img> буде src, у <p> може бути title.

📋 Шпаргалка: усі теги уроку

Нижче — повний перелік тегів, які ми вивчили. У колонці «Тип» указено, як тег використовується: парний (має відкриваючий і закриваючий тег) чи одиночний (без закриваючого).

Структура документа

Тег	Тип	Призначення	Приклад
`<!DOCTYPE html>`	оголошення	Вказує браузеру, що документ — HTML5	`<!DOCTYPE html>`
`<html>`	парний	Кореневий елемент документа	`<html lang="uk">...</html>`
`<head>`	парний	Службовий розділ (не видно на сторінці)	`<head>...</head>`
`<meta>`	одиночний	Службова інформація (кодування тощо)	`<meta charset="UTF-8">`
`<title>`	парний	Назва документа (вкладка браузера)	`<title>Моя сторінка</title>`
`<body>`	парний	Тіло документа (усе, що видно на сторінці)	`<body>...</body>`

Текстові елементи

Тег	Тип	Призначення	Приклад
`<h1>`–`<h6>`	парний	Заголовки шести рівнів (від найвищого до найнижчого)	`<h1>Головний заголовок</h1>`
`<p>`	парний	Абзац тексту	`<p>Текст абзацу</p>`

Форматування тексту

Тег	Тип	Призначення	Приклад
`<strong>`	парний	Важливий текст (жирний)	`<strong>Важливо</strong>`
`<em>`	парний	Наголос (курсив)	`<em>Наголос</em>`
`<b>`	парний	Жирний текст (візуально)	`<b>Жирний</b>`
`<i>`	парний	Курсив (візуально)	`<i>Курсив</i>`
`<u>`	парний	Підкреслений текст	`<u>Підкреслений</u>`
`<sub>`	парний	Нижній індекс	`H<sub>2</sub>O`
`<sup>`	парний	Верхній індекс	`a<sup>2</sup>`
`<br>`	одиночний	Перенесення рядка	`<br>`
`<hr>`	одиночний	Горизонтальна розділювальна лінія	`<hr>`
`<pre>`	парний	Текст зі збереженням пробілів і переносів	`<pre>...</pre>`

Гіперпосилання

Тег	Тип	Призначення	Приклад
`<a>`	парний	Гіперпосилання на іншу сторінку	`<a href="https://google.com">Google</a>`

Атрибути

Атрибут	Для якого тега	Призначення	Приклад
`lang`	`<html>`	Мова документа	`lang="uk"`
`charset`	`<meta>`	Кодування символів	`charset="UTF-8"`
`href`	`<a>`	Адреса, куди веде посилання	`href="https://google.com"`
`target`	`<a>`	Як відкривати посилання	`target="_blank"`
`title`	будь-який	Підказка при наведенні курсора	`title="Опис"`

📌 Запам’ятайте: парні теги завжди закриваються. Одиночні — не мають закриваючого тега. Атрибути записуються лише у відкриваючому тегу, значення — у лапках.

✅ Підсумок

На цьому уроці ми розширили знання про HTML і навчилися наповнювати сторінку змістом.

Головні висновки:

Існує шість рівнів заголовків (<h1>–<h6>). <h1> — один на сторінці, це головний заголовок. Заголовки мають смислове значення, а не лише візуальне.
Абзаци <p> розділяють текст на логічні частини. Браузер ігнорує переноси рядків у коді — щоб розділити текст, потрібен тег <p>.
Форматування тексту буває семантичним (<strong>, <em>) і візуальним (<b>, <i>, <u>). Семантичні теги несуть смисл, візуальні — лише вигляд.
Спеціальні теги: <sub>, <sup> (індекси), <br> (перенесення рядка), <hr> (горизонтальна лінія), <pre> (збереження форматування).
Гіперпосилання <a> створює перехід на іншу сторінку. Без атрибута href воно не працює.
Атрибут — це додаткова характеристика тега. Записується у відкриваючому тегу у форматі назва="значення". Один тег може мати кілька атрибутів.

🎯 Практичне завдання

Мета: закріпити знання про текстові елементи, форматування та гіперпосилання.

Хід роботи:

Перейдіть за посиланням на платформу практичних робіт (посилання дасть учитель).
Виконайте теоретичне завдання — дайте відповіді на запитання за темою уроку.
Виконайте практичне завдання — створіть веб-сторінку з використанням вивчених тегів.
Збережіть чернетку та надішліть роботу на перевірку.

Що має бути у вашій роботі:

заголовок <h1> — ваше ім’я та прізвище;
кілька розділів <h2> — наприклад, «Про мене», «Мої захоплення», «Улюблені сайти»;
абзаци <p> з текстом у кожному розділі;
виділення в тексті — <strong> і <em> (хоча б по одному разу);
горизонтальна лінія <hr> між розділами;
посилання <a> — мінімум три, з використанням атрибутів href, target, title;
у посилань має бути текст-підпис, а не просто адреса.