Основи HTML

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

Що таке HTML і як його писати

Для того, щоб опублікувати інформацію в інтернеті у вигляді веб-сторінки достатньо звичайного тексту, бо веб-сторінка — це текстовий файл.

Клацніть сюди і подивіться самі: https://ebaboon.me/lol/plain-text.txt

Звичайного тексту достатньо, допоки наша інформація — виключно простий текст. А що робити, якщо нам потрібно публікувати інформацію не тільки текстового характеру, а щось із посиланнями, світлинами, таблицями, заголовками тощо? Як їх розмістити в текстовому файлі? Тут і приходить на допомогу HTML — він допомагає пояснити браузеру, яку саме інформацію треба відобразити і в якому вигляді.

Так що ж таке HTML? Звернемось до Вікіпедії:

HTML (англ. HyperText Markup Language, укр. мова розмітки гіпертексту) — стандартизована мова розмітки документів для перегляду веб-сторінок у браузері

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

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

Подивіться на цей приклад 👇

See the Pen HTML basic example by Epic Baboon (@ebaboon) on CodePen.

Ліворуч ви бачите, як виглядає, власне, HTML, а справа — як він виглядає в браузері.

В цьому прикладі є три теги, що певним чином трансформують звичайний текст:

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

Вся сила 💪 і сутність HTML в тегах! З них і починається дивовижний світ ✨ веб-розробки 🦄.

Тег

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

Анатомія тегу

Теги формуються за допомогою відкритої і закритої кутових дужок, між якими пишеться назва тегу латиницею в нижньому регістрі (малими буквами):

< + назва тегу латиницею + >

Наприклад, ось так виглядає тег для розмітки посилання:

<a>

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

Елемент

На основі тегів будуються елементи або HTML-елементи — це складові HTML-сторінки. Якщо звернутися до аналогій із людської мови, то теги — це слова, а елементи — це речення.

Це вже знайомий вам тег <p>:

<p>

А це вже елемент абзацу — частина HTML-документа, що поєднує в собі тег і контентну інформацію:

<p>Поєднання HTML-тегу і контенту називається <em>елемент</em> або HTML-елемент.</p>

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

• з подвійним тегом (з парними тегом)
• з одинарним тегом (з пустим тегом)

Анатомія елемента з подвійним тегом

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

<p>Поєднання HTML-тегу і контенту називається <em>елемент</em> або HTML-елемент.</p>

Для всіх елементів з подвійним тегом характерна така структура:

• Відкриваючий тег (в прикладі — <p>).
• Контент. Знаходиться між відкриваючим і закриваючим тегом, буде відображений на веб-сторінці.
• Закриваючий тег (в прикладі — </p>). Кожен закриваючий тег має знак / після першої кутової дужки.

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

See the Pen HTML Element by Epic Baboon (@ebaboon) on CodePen.

Що ж, давайте тепер і ви спробуєте торкнутися магії ✨ фронтенду. Я підготував для вас простеньке завдання, в якому вам потрібно створити два HTML-абзаци із наведеного тексту.

See the Pen HTML First Steps by Epic Baboon (@ebaboon) on CodePen.

Певен, що у вас все вийде!

Анатомія елемента з одинарним тегом

Поряд із подвійними тегами, в HTML інують і одинарні, також їх ще називають “пусті”. Найпростішим представником таких тегів є тег <br>, що переносить строку і працює, як Enter на клавіатурі. Він буде з’являтися в наступних прикладах і ви зможете побачити як він працює.

Щоб краще уявити, як виглядають і працюють одинарні теги, розглянемо HTML-елемент світилини <img>:

<img src="cat.jpg" alt="Fluffy Cat">

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

До цих параметрів ми ще повернемось згодом, а поки що подивимось, як працює такий елемент:

See the Pen HTML tag img by Epic Baboon (@ebaboon) on CodePen.

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

• src — посилання на файл картинки, яку треба буде відобразити,
• alt — текст, який з’явиться на місці картинки, якщо її чомусь не вдасться відобразити.

Окрім них, в прикладі є і один необов’язковий параметр:

• height — цей параметр задає висоту елемента в пікселях.

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

See the Pen HTML Practice: img by Epic Baboon (@ebaboon) on CodePen.

Атрибут

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

Для наглядності добре підійде приклад із атрибутом title. Подивіться на приклад і знайдіть цей атрибут в тегах <img> і <abbr>:

See the Pen HTML attribute title by Epic Baboon (@ebaboon) on CodePen.

Цей атрибут надає елементу нового функціоналу, якого раніше у нього не було, тобто змінює його поведінку. Якщо навести курсор на світлину або на абревіатуру “HTML” і не ворушити ним, то через секунду-дві з’явиться підказка з текстом із атрибута title.

Розглянемо ще один приклад застосування атрибутів — посилання на сайт “Притомного фронтенду”:

See the Pen HTML tag a by Epic Baboon (@ebaboon) on CodePen.

Ви можете клацнути на посилання і воно спрацює — браузер в правому вікні перейде на сторінку, вказану в посиланні. Спробуйте! Щоб знову побачити посилання, замість сторінки, на яку воно перейшло, натисніть кнопку Rerun на нижній панелі прикладу.

Зверніть увагу, елемент посилання має як контентну частину, так і атрибут:

• href="https://ebaboon.me" — це атрибут, що повідомляє браузеру, на яку адресу треба перейти, якщо клацнути по посиланню. Текст із атрибута не видно на сторінці.
• Назва посилання — “Притомний фронтенд”, яку видно на сторінці.

Анатомія атрибута

Частіше зустрічаються атрибути, що складаються з імені і значення, розділених знаком =. Ви вже це бачили, наприклад, в елементі <img>:

<img src="cat.jpg" alt="Fluffy Cat">

Тут ви бачите два атрибута: src="cat.jpg" і alt="Fluffy Cat". Перший інформує, який файл картинки треба відобразити, а другий каже, який текст треба відобразити, якщо картинка не завантажилась.

Структура будь-якого атрибута така:

• ім’я атрибута (тут це src і alt),
• знак =,
• значення атрибута ("cat.jpg" і "Fluffy Cat" відповідно), завжди береться в лапки.

Але іноді можна зустріти атрибут, що складається тільки із імені. Наприклад, атрибут disabled, що виключає будь-яку взаємодію із кнопкою:

<button disabled>Click me!</button>

Ніякої магії тут немає. Такі атрибути приймають значення тільки true або false і називаються булевими. І це їх коротка форма запису, яка означає disabled="true". В повній формі вони виглядають так само, як і звичайні:

<button disabled="true">Click me!</button>

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

Особливі атрибути role і aria-*

В рамках веб-технологій інсує такий стандарт як ARIA — це дуже крута ініціатива, яка робить доступнішим світ вебу для людей із сенсорними порушеннями; це стандарт по веб-доступності.

В HTML стандарт ARIA реалізований за допомогою атрибутів role та aria-*, перший часто називають просто терміном “роль”, замість терміну “атрибут”. Цій темі присвячено окремий туторіал, а зараз коротко пройдемось по цим атрибутам.

• Ролі додають HTML-елементам додатковий зміст, що допомагає скрінрідерам і схожим програмам краще розуміти, що є що в документі. Тобто пояснює, яку роль виконує той чи інший елемент, а які взагалі можна проігнорувати як декоративні або несуттєві. Записується як звичайний атрибут:

  role="тип ролі"

• Елементи з ролями можуть мати стани й властивості, які записуються через атрибути із префіксом aria-*. Наприклад, є кнопка “Пауза” зі станом “натиснута”, щоб скрінрідер зміг описати цей стан людині із сенсорними порушеннями, потрібно додати такий атрибут:

  <button aria-pressed="true">Пауза</button>
  

Все разом

• HTML-документ або ж HTML-сторінка складається із HTML-елементів.

• Елементи, в загальному, будуються за такою схемою:

  <abbr title="World Wide Web">WWW</abbr>
  

  • <abbr title="World Wide Web"> — відкриваючий або початковий тег,
  • WWW — контент,
  • </abbr> — закриваючий або кінцевий тег,
  • title — назва атрибута,
  • "World Wide Web" — значення атрибута.

• Одинарні елементи не мають контенту і закриваючого тегу.

• Атрибути додатково конфігурують елемент або змінюють його поведінку.

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

• Веб-доступність важлива!

Окрім цього, HTML-сторінка має певну структуру і про неї поговоримо в наступній статті — “Структура HTML-документа”.

Корисні посилання

• Довідник тегів по категоріям від W3C
• Перелік тегів по категоріям від MDN
• Приклади використання HTML-тегів від W3C
• Довідник атрибутів від W3C
• HTML — корисна і докладна стаття про HTML від MDN
• HTML Підручник — переклад сайту www.w3schools.com українською. Багато корисних матеріалів для початківців. Але будьте обережні, часто так буває, що перекладачі перестають оновлювати свої проекти, тому завжди звіряйте з оригіналом!

Домашнє завдання

1. Виконайте всі практичні завдання в цій статті.

2. Виконайте наступні завдання від W3Schools:

• HTML Атрибути з 1 по 4
• HTML Абзац 1, 2
• HTML Світлина 1, 5, 6