Теги та атрибути

Теорія

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

Коли браузер отримує документ HTML, він аналізує теги та використовує їх для формування елементів, які ми бачимо та з якими можемо взаємодіяти. Іншими словами, теги - це цеглинки, які будують вебсторінку. Поточна специфікація HTML5 включає 107 тегів. Подивіться на повний список усіх існуючих тегів на W3SchoolsUA (українською). Щоб запам’ятати їх усі, потрібен час!

Синтаксис тегів дуже простий. Ім’я елемента записується між символами < та >. Назви тегів нечутливі до регістру, але вважається хорошою практикою писати їх малими літерами (в нижньому регістрі).

Усі теги в HTML поділяються на два основних типи: парні та непарні. Розглянемо їх обидва докладніше.

§1. Парні теги

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

Як приклад ми розглянемо тег <p>. Він являє собою абзац (параграф) тексту:

Тут <p> є початковим тегом, Україна - понад усе! є вмістом, а </p> є закриваючим тегом.

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

§2. Непарні теги

Непарні теги не містять вмісту. Вони утворюють графічні елементи HTML або символи на сторінці. Отже, непарні теги HTML мають лише відкриваючий тег.

Ось приклад непарного тегу:

<hr>

Браузер намалює горизонтальну лінію, коли виявить цей тег. Іншим прикладом непарного тегу є <br>, який визначає один розрив рядка.

§3. Вкладені теги

Теги також можуть бути вкладеними:

Тут <b> використовується для виділення слова жирним (від слова "bold") шрифтом.

Цей рядок HTML відображається як:

Ви вивчили HTML теги
Вітаємо!

Вкладений тег потрібно закрити перед закриттям початкового.

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

§4. Атрибути тегів

Щоб розширити можливості окремих тегів і легше ними керувати, ми можемо використовувати атрибути. Атрибути – це пояснення для браузера щодо того, як відображати теги.

Кожен атрибут HTML складається з імен і значень. У наступному прикладі показано синтаксис атрибутів:

Тут тег <a> означає посилання, href — ім’я атрибута, а "https://hyperskill.org" є значенням. Атрибуту присвоюється значення зі знаком рівності =. HTML дозволяє вказувати значення атрибутів без лапок, якщо вони складаються з одного слова. Однак використання лапок є хорошою практикою (рекомендується!). Значення атрибута можна взяти в подвійні або одинарні лапки: ("" або '').

Ще одна важлива особливість синтаксису атрибутів HTML полягає в тому, що атрибут має бути записаний у кутових дужках:

У цьому прикладі зображення додається до вебсторінки за допомогою непарного тегу <img>. Посилання на файл вказано в атрибуті src. Значенням атрибута є посилання на потрібне зображення.

Є багато атрибутів. Можливо, варто перевірити їх.

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

§5. Висновок

У цій темі ми розглянули кілька корисних тегів і деяких атрибутів. Теги надають браузеру інформацію про структуру вебсторінки. Пам’ятайте, що назва тегу укладена між < та > у нижньому регістрі. Вони поділяються на відкриваючі та закриваючі, парні та непарні. Кожен підвид має своє призначення. Атрибути тегів також відіграють важливу роль. Вони вдосконалюють теги, надають додаткову інформацію про теги та допомагають вашому браузеру "зрозуміти", що знаходиться на вебсторінці. HTML містить велику кількість тегів і атрибутів; деякі з них поширені, інші – ні. Але пам’ятайте — практика робить досконалим!

Ви також можете переглянути Урок на hyperskill.org.

Практичні завдання та відповіді

Подаються завдання та варіанти відповідей. Правильний варіант виділено синім кольором.

№1. Ім’я тега

Запитання: Заповніть фразу. Назви тегів нечутливі до регістру, але вважається хорошою практикою писати їх...

Виберіть один варіант зі списку:

• uppercase (верхній регістр)
• lowercase or uppercase (малі чи великі літери)
• camelCase
• lowercase (нижній регістр) ✔
• uppercase and under_score (верхній регістр та підкреслення)
• under_score (підкреслення)

Пояснення. Назви тегів нечутливі до регістру, але вважається хорошою практикою писати їх малими літерами (в нижньому регістрі).

№2. Теги

Запитання: Виберіть усі відкриваючі теги.

Виберіть один або кілька варіантів зі списку:

• <a> ✔
• <p> ✔
• </p>
• href="#"

№3. Хороший синтаксис

Питання: Виберіть правильно написаний тег із правильним атрибутом:

Виберіть один варіант зі списку:

• <img src="image.jpg"></img>
• <img src"img.jpg"></img>
• <img src="img.jpg"> ✔
• <img src=image.jpg>

№4. Вкладені теги

Питання: Який код потрібно написати, щоб отримати результат, як на зображенні нижче?

Hello, learner!
How is it going?

Виберіть один варіант зі списку:

• <p>Hello, <b>learner!<br>How is it going?</p></b>
• <p>Hello, <b>learner!<br>How is it going?</b></p>
• <p>Hello, <b>learner</b>!<br>How is it going?</p> ✔
• <p>Hello, <b>learner</b>! How is it going?</p>

№5. Параграф тексту

Питання: Пригадайте, який тег використовується для написання параграфів (абзаців) тексту та відображення тексту на веб-сторінці. Виділіть деякі частини тексту жирним шрифтом за допомогою тегу <b>. Нарешті, додайте горизонтальну лінію на сторінку. Додайте лише один параграф із текстом.

Напишіть код HTML та CSS:

№6. Тег h1

Запитання: Додайте наступний текст I like to learn new things! у парному тегу заголовка <h1> першого рівня.

Введіть короткий текст: <h1>I like to learn new things!</h1> ✔

№7. Малювання елементів HTML

Питання: що допомагає веббраузеру зрозуміти, які елементи вебсторінки відображати?

Виберіть один варіант зі списку:

• теги ✔
• атрибути
• значення
• властивості

№8. Декодування HTML елемента img

Питання: Розгляньте наступний фрагмент HTML-коду. Які твердження є точними щодо тегів і атрибутів?

Виберіть один або кілька варіантів зі списку:

• Атрибут 'src' визначає URL-адресу зображення, атрибут 'alt' надає альтернативний текст, а атрибут 'class' призначає клас CSS елементу ✔
• Елемент є самозакриваючим тегом із трьома атрибутами: src, alt та class ✔
• Атрибут 'src' призначає клас CSS, атрибут 'alt' визначає посилання, а атрибут 'class' надає альтернативний текст
• Елемент є початковим тегом із трьома атрибутами: src, alt та class
• Елемент є початковим тегом без будь-яких атрибутів, після якого слід закривати тег