Довідник HTML тегів

Структура та Мета-дані

  • html: Кореневий елемент документа HTML
  • head: Контейнер для метаданих (заголовків) документа
  • title: Заголовок документа, що відображається на вкладці браузера
  • meta: Метадані про документ
  • link: Посилання на зовнішні ресурси (стилі, фавіконки тощо)
  • style: Вбудовані CSS-стилі
  • script: Вбудований JavaScript або посилання на зовнішній скрипт

Основний вміст

  • body: Основний вміст документа HTML

Розділи та Структурні Елементи

  • header: Заголовок розділу або документа
  • nav: Навігаційне меню
  • main: Основний вміст документа
  • section: Розділ документа
  • article: Самостійний фрагмент контенту
  • aside: Контент, який має непряме відношення до основного контенту
  • footer: Нижній колонтитул розділу або документа
  • address: Контактна інформація
  • h1: Заголовок 1 рівня
  • h2: Заголовок 2 рівня
  • h3: Заголовок 3 рівня
  • h4: Заголовок 4 рівня
  • h5: Заголовок 5 рівня
  • h6: Заголовок 6 рівня

Групування Контенту

  • p: Абзац
  • hr: Горизонтальна лінія
  • pre: Відформатований текст
  • blockquote: Цитата
  • ol: Нумерований список
  • ul: Маркований список
  • li: Елемент списку
  • dl: Описовий список
  • dt: Термін у описовому списку
  • dd: Опис терміна в описовому списку
  • figure: Самостійний елемент контенту (зображення з підписом тощо)
  • figcaption: Підпис до елемента figure
  • div: Блоковий елемент

Текстовий Контент

  • a: Гіперпосилання
  • em: Емфатичний (курсивний) текст
  • strong: Важливий (жирний) текст
  • small: Менший текст
  • s: Закреслений текст
  • cite: Назва твору
  • q: Інлайн цитата
  • dfn: Визначення терміна
  • abbr: Абревіатура
  • time: Час або дата
  • code: Фрагмент коду
  • var: Змінна в коді
  • samp: Вивід програми
  • kbd: Ввід з клавіатури
  • sub: Нижній індекс
  • sup: Верхній індекс
  • i: Італійський (курсивний) текст
  • b: Жирний текст
  • u: Підкреслений текст
  • mark: Виділений текст
  • ruby: Анотація для ієрогліфів
  • rt: Анотація для ієрогліфів (всередині ruby)
  • rp: Підтримка анотацій для старих браузерів (всередині ruby)

Медіа Контент

  • img: Зображення
  • audio: Звуковий контент
  • video: Відеоконтент
  • source: Джерело для мультимедійних елементів
  • track: Текстова доріжка для медіа елементів
  • map: Карта зображення
  • area: Активна область на зображенні
  • svg: Векторна графіка
  • math: Математичні формули

Вбудований Контент

  • iframe: Вбудоване вікно
  • embed: Вбудований зовнішній ресурс
  • object: Вбудований об`єкт
  • param: Параметри для вбудованого об`єкта

Скрипти

  • script: Вбудований або зовнішній скрипт
  • noscript: Вміст, який відображається, якщо скрипти вимкнені

Форми

  • form: Форма для вводу
  • input: Поле вводу
  • textarea: Текстова область
  • button: Кнопка
  • select: Випадаючий список
  • optgroup: Група варіантів у випадаючому списку
  • option: Вибір у випадаючому списку
  • label: Мітка для елементів форми
  • fieldset: Група елементів форми
  • legend: Заголовок групи елементів форми
  • datalist: Попередньо визначені варіанти для поля вводу
  • output: Результат обчислень
  • progress: Індикація прогресу виконання завдання
  • meter: Вимірювальний прилад

Інтерактивні Елементи

  • details: Блок з додатковою інформацією, яку можна розгорнути
  • summary: Заголовок блоку details
  • dialog: Діалогове вікно

Таблиці

  • table: Таблиця
  • caption: Заголовок таблиці
  • thead: Зміст таблиці
  • tbody: Тіло таблиці
  • tfoot: Нижній колонтитул таблиці
  • tr: Рядок таблиці
  • th: Заголовок комірки таблиці
  • td: Комірка таблиці
  • col: Визначення стовпця таблиці
  • colgroup: Група стовпців таблиці

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

Структура та Мета-дані: Цей розділ включає основні елементи, що визначають структуру HTML-документа, такі як <html>, <head>, <title>, <meta>, <link>, <style> та <script>. Вони відповідають за метадані, підключення зовнішніх ресурсів, стилізацію та скрипти.

Основний вміст: Тег <body> містить весь видимий контент вашої веб-сторінки. Він є контейнером для всього вмісту, який користувач бачить на екрані.

Розділи та Структурні Елементи: В цьому розділі описані теги, що допомагають структурувати контент на веб-сторінці, такі як <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <address>, та заголовки від <h1> до <h6>.

Групування Контенту: Ці теги допомагають організовувати контент у вигляді абзаців (<p>), списків (<ol>, <ul>, <li>), цитат (<blockquote>), та інших структурних елементів (<hr>, <pre>, <figure>, <figcaption>, <div>).

Текстовий Контент: Описані теги, що використовуються для форматування тексту, такі як гіперпосилання (<a>), емфатичний текст (<em>), важливий текст (<strong>), та інші теги для стилізації та семантики тексту (<small>, <s>, <cite>, <q>, <dfn>, <abbr>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <ruby>, <rt>, <rp>).

Медіа Контент: Включає теги для вбудовування медіа, такі як зображення (<img>), аудіо (<audio>), відео (<video>), та додаткові ресурси для медіа елементів (<source>, <track>, <map>, <area>, <svg>, <math>).

Вбудований Контент: Описані теги для вбудовування зовнішніх ресурсів і об'єктів, такі як <iframe>, <embed>, <object>, <param>.

Скрипти: Включають теги для роботи зі скриптами (<script>, <noscript>), що дозволяють додавати динамічні елементи та функціональність на вашій сторінці.

Форми: Теги, що використовуються для створення форм та їх елементів, включаючи <form>, <input>, <textarea>, <button>, <select>, <optgroup>, <option>, <label>, <fieldset>, <legend>, <datalist>, <output>, <progress>, <meter>.

Інтерактивні Елементи: Описані теги для створення інтерактивних елементів, таких як <details>, <summary>, <dialog>.

Таблиці: Теги, що використовуються для створення та форматування таблиць, такі як <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <col>, <colgroup>.


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