HTML будується з елементів, які задають структуру та зміст документа. У розмовній мові їх часто називають «тегами», хоча технічно тег — це лише частина запису елемента: наприклад, <p> і </p> є тегами, а весь фрагмент разом із вмістом — HTML-елементом.
Для початківця ця різниця не критична, але важливо розуміти сучасну модель: одні елементи містять текст або інші елементи, інші є void-елементами без вмісту, а семантичний тег потрібно вибирати за призначенням блока, а не за тим, як він виглядає за замовчуванням.
З чого складається HTML-елемент
Більшість елементів мають відкривальний тег, вміст і закривальний тег. Наприклад:
Наочний приклад. Тут кілька поширених HTML-тегів працюють разом у невеликому фрагменті сторінки.
HTML-теги в дії
Це звичайний <p> із важливим фрагментом, змістовим акцентом і внутрішнім посиланням.
- пункт списку всередині
<li>; - ще один елемент списку;
Браузер показує результат, але зміст елементів залишається в самій розмітці. Нижче показано, як ті самі конструкції записуються кодом і чим семантичні теги відрізняються від нейтральних контейнерів.
<p>Звичайний абзац тексту.</p>Усередині відкривального тега можуть знаходитися атрибути:
<a href="https://example.com" class="external-link">
Приклад посилання
</a>Тут href задає адресу посилання, а class дозволяє звернутися до елемента з CSS або JavaScript. Атрибути не варто вигадувати довільно: у HTML є глобальні атрибути та атрибути, дозволені конкретним елементам.
Звичайні та void-елементи
Умовний поділ на «парні» та «одиночні» теги зручний для навчання, але сучасна термінологія точніше говорить про звичайні та void-елементи. Void-елемент не може містити дочірні вузли й не повинен мати закривального тега.
До поширених void-елементів належать:
<img>— зображення;<br>— перенесення рядка;<hr>— тематичний розрив;<input>— поле форми;<meta>— метадані документа;<link>— зв’язок документа із зовнішнім ресурсом.
Запис <br /> або <img ... /> трапляється часто й допустимий як синтаксичний стиль, але слеш не перетворює елемент на «самозакривальний» у XML-сенсі та у звичайному HTML не потрібен.
Семантичні елементи структури
HTML має за можливості описувати призначення контенту. Замість набору безіменних div сучасна розмітка використовує семантичні елементи там, де вони підходять за змістом.
Часто використовуються такі елементи:
<header>— вступна частина сторінки або розділу;<nav>— блок основної навігації;<main>— основний вміст документа;<article>— самостійний матеріал;<section>— тематичний розділ;<aside>— додатковий пов’язаний контент;<footer>— завершальна частина сторінки або розділу.
Семантичний елемент не вибирають через зовнішній вигляд: браузерні стилі можна повністю змінити CSS. Наприклад, section не є універсальною заміною кожному div, якщо блок не має власного змістового розділу.
Текстові елементи та заголовки.
Для тексту використовуються p, заголовки h1–h6, посилання a, елементи важливості strong, змістового акценту em, цитати, код та інші елементи.
Рівні заголовків формують структуру документа. H1 зазвичай позначає головний заголовок сторінки, H2 — великі розділи, H3 — підрозділи всередині H2. Не варто вибирати H3 замість H2 лише тому, що він менший: розмір задається CSS, а рівень — логікою документа.
Правильна вкладеність елементів.
Елементи мають коректно вкладатися один в один. Якщо спочатку відкривається p, а потім strong, закривати їх потрібно у зворотному порядку.
<p>Це <strong>важливий</strong> текст.</p>Перехресні теги змушують браузер виправляти розмітку на власний розсуд і можуть призводити до неочікуваного DOM. Особливо помітно це в таблицях, списках, формах і вкладених інтерактивних елементах.
Які старі теги більше не варто використовувати
У старих підручниках можна зустріти елементи, які відповідали лише за оформлення: <font>, <center>, <big>, <strike> та інші застарілі конструкції. Їхню роль давно перебрали CSS або більш доречні семантичні елементи.
Під час модернізації старої сторінки корисно дотримуватися кількох правил:
- колір, шрифт, вирівнювання та розміри переносити в CSS;
- не використовувати застарілі елементи лише тому, що браузер і досі їх показує;
- замінювати тег не за зовнішньою схожістю, а за змістом;
- перевіряти розмітку після автоматичної конвертації старого HTML;
- не видаляти семантику заради зменшення кількості тегів.
Підтримка браузером і коректність за сучасним стандартом — не одне й те саме. Застарілий елемент може продовжувати працювати заради сумісності зі старим вебом, але це не робить його хорошим вибором для нового коду.
HTML, CSS і JavaScript: поділ ролей
Спрощено HTML задає структуру та зміст, CSS — зовнішній вигляд, JavaScript — поведінку. Межа не завжди абсолютна, але це корисна модель для початківця. Наприклад, посилання створюється елементом a, його колір змінюється CSS, а складна логіка відкриття модального вікна може додаватися JavaScript.
Що менше презентаційних рішень зашито безпосередньо в розмітку, то простіше змінювати дизайн сайту й повторно використовувати контент у різних шаблонах.
Як перевірити HTML.
Навіть валідний HTML не гарантує хорошої доступності чи зручності, але перевірка синтаксису допомагає знаходити незакриті елементи, помилкову вкладеність і недопустимі атрибути. Після правок варто додатково перевірити сторінку в браузері, на мобільному екрані та з клавіатурною навігацією.
Для навчальної практики корисно не просто копіювати готовий код, а відкрити інструменти розробника й подивитися, який DOM побудував браузер. Це особливо наочно, коли вихідна розмітка містить помилку й браузер автоматично її виправляє.
Атрибути та дані для скриптів.
Окрім стандартних атрибутів на кшталт id, class, title і lang, у HTML існують глобальні data-*-атрибути. Вони дозволяють зберігати невеликі значення, пов’язані з конкретним елементом, які потім може прочитати JavaScript. Наприклад, data-product-id="42" краще передає призначення значення, ніж спроба ховати службову інформацію в нестандартному атрибуті.
При цьому не потрібно перетворювати HTML на сховище великих JSON-структур лише тому, що data-* доступні. Атрибути зручні для компактних параметрів компонента, а великі набори даних зазвичай краще зберігати там, де ними керує застосунок.
Клас і id вирішують різні завдання.
class можна повторювати в багатьох елементів і використовувати для спільних CSS-правил. id має бути унікальним у документі й часто потрібен для якірної навігації, прив’язки label до поля форми або точного звернення з JavaScript. Звичка призначати кожному блоку випадковий id не робить розмітку кращою: ідентифікатор потрібен там, де є конкретна причина.
Підсумок
HTML-теги — це синтаксичні частини елементів, з яких будується документ. Для сучасного HTML важливі правильна вкладеність, семантика та відокремлення оформлення від структури. Void-елементи не мають вмісту, а застарілі презентаційні теги краще замінювати CSS і актуальними елементами.
Ширший контекст розібрано у статті «Що таке HTML», а практичні приклади є в матеріалах про списки та якірний зміст.
