Типи контенту в HTML
- Тип контенту в HTML
- — це класифікація елементів за їх призначенням, роллю та поведінкою в структурі веб-сторінки. Це допомагає корректно визначити, де і як їх можна використовувати в документі, зрозуміти, як браузер їх обробляє, дотримуватись коректної структури HTML.
Контент метаданних (Metadata content)
- Контент метаданних
- використовуються для того, щоб надати додаткову інформацію про веб-сторінку, її автора, ключові слова, опис, посилання на інші сторінки та інші важливі деталі. Ці метадані не відображаються на веб-сторінці, але браузер використовує їх для оптимізації та аналізу веб-сторінки.
До метаданих відносяться наступні елементи:
Перечислені вище теги можуть належити до декількох типів контенту. Наприклад, тег <script> може бути використований як контент метаданих, фразовий контент або для підтримки скриптів.
Потоковий контент (Flow content)
Більшість елементів мають саме цей тип контену
Елементи, які є (або можуть бути, якщо виконані умови) потоковим контентом:
<a><abbr><address><area>(якщо є нащадком<map>)<article><aside><audio><b><bdi><bdo><blockquote><br><button><canvas><cite><code><data><datalist><del><details><dfn><dialog><div><dl><em><embed><fieldset><figure><footer><form><h1><h2><h3><h4><h5><h6><header><hgroup><hr><iframe><img><input><ins><kbd><label><link>(якщо дозволено у тілі документа)<main><map><mark><math><menu><meta>(якщо присутній атрибутitemprop)<meter><nav><noscript><object><ol><output><p><picture><pre><progress><q><ruby><s><samp><script><search><section><select><slot><small><span><strong><sub><sup><svg><table><template><textarea><time><u><ul><var><video><wbr>- автономні елементи користувача (autonomous custom elements)
- текстові вузли
Секційний контент (Sectioning content)
Заголовочний контент (Heading content)
- Заголовочний контент
- визначає заголовок розділу документа з використанням елементів секційного контенту.
Фразовий контент (Phrasing content)
- Фразовий контент
- — це текст документа, а також елементи, які розмічають цей текст на рівні параграфа. Послідовності фразового контенту формують абзаци.
Елементи, які належать до фразового контенту:
<a><abbr><area>(якщо є нащадком елемента<map>)<audio><b><bdi><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><i><iframe><img><input><ins><kbd><label><link>(якщо дозволено у тілі документа)<map><mark><math><meta>(якщо присутній атрибутitemprop)<noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><var><video><wbr>- автономні елементи користувача (autonomous custom elements)
- текст
Більшість елементів, які належать до фразового контенту, можуть містити лише інші елементи фразового контенту, але не потокового.
У контексті моделей контенту текст означає або нічого, або текстові вузли (Text nodes). Текст іноді використовується як модель контенту сам по собі, а також є фразовим контентом і може бути міжелементним пробілом (якщо текстові вузли порожні або містять лише ASCII-пробіли).
Текстові вузли та значення атрибутів мають складатися зі скалярних значень, виключаючи некодувальні символи та керуючі символи, окрім ASCII-пробілів. Ця специфікація містить додаткові обмеження щодо точного значення текстових вузлів і значень атрибутів залежно від їх контексту.
Вбудований контент (Embedded content)
- Вбудований контент
- — це зовнішні ресурси або медіа-елементи, які інтегруються безпосередньо в HTML-документ за допомогою спеціальних тегів. Цей контент зберігається на зовнішніх або на ваших серверах та відображається як частина веб-сторінки.
Інтерактивний контент (Interactive content)
- Інтерактивний контент
- — це елементи веб-сторінки, з якими користувачі можуть взаємодіяти, надавати вхідні дані, керувати відображенням або навігацією. Ці елементи реагують на дії користувача (кліки, введення тексту, переміщення миші і т. д.) та можуть змінювати свій стан або поведінку.
<a>(якщо присутній атрибутhref)<audio>(якщо присутній атрибутcontrols)<button><details><embed><iframe><img>(якщо присутній атрибутusemap)<input>(якщо атрибутtypeне має значенняhidden)<label><select><textarea><video>(якщо присутній атрибутcontrols)
Перед тим як роботи кнопку з <div>'a перевірте, раптом існує тег, який зніме з вас частину роботи :)
Відчутний контент (Palpable content)
- Відчутний контент
- це контент, який має видимий або відчутний ефект на веб-сторінці. Це елементи, які не є порожніми і мають реальне значення або вплив на документ. Відчутний контент включає елементи, які містять текст, зображення або інші елементи, що безпосередньо сприймаються користувачем.
Елемент вважається відчутним, якщо:
- Містить текстовий контент (крім пробілів)
- Є заміщуваним елементом (replaced element)
- Має видимі розміри та не прихований
- Має семантичне значення для документа
Їхній перелік:
<a><abbr><address><article><aside><audio>(якщо присутній атрибутcontrols)<b><bdi><bdo><blockquote><button><canvas><cite><code><data><del><details><dfn><div><dl>(якщо має хоча б одну пару термін-опис)<em><embed><fieldset><figure><footer><form><h1><h2><h3><h4><h5><h6><header><hgroup><i><iframe><img><input>(якщо атрибутtypeне має значенняhidden)<ins><kbd><label><main><map><mark><math><menu>(якщо містить<li>)<meter><nav><object><ol>(якщо містить<li>)<output><p><picture><pre><progress><q><ruby><s><samp><search><section><select><small><span><strong><sub><sup><svg><table><textarea><time><u><ul>(якщо містить<li>)<var><video>(якщо присутній атрибутcontrols)- автономні кастомні елементи
- текст, що не є міжелементними пробілами
Елементи підтримки скриптів (Script-supporting elements)
- Елементи підтримки скриптів
- — це спеціальні HTML-теги, призначені для включення, виконання та керування скриптами на веб-сторінках. Ці елементи забезпечують інтеграцію JavaScript та інших скриптових мов у HTML-документи, а також надають альтернативний контент для браузерів, які не підтримують скрипти.
Прозорий контент (Transparent content)
- Прозорий контент
- — це особлива категорія елементів, які наслідують дозволений контент від свого батьківського елемента. Такі елементи не мають власних обмежень щодо типу контенту, який вони можуть містити, а замість цього дозволяють той же контент, що й їхній батьківський елемент.