Довідник з HTML

Теги

  • !DOCTYPE

    !DOCTYPE

    <!DOCTYPE> (від англ. document type - тип документа) призначений для вказівки типу поточного документа - DTD (document type definition, опис типу документа). Це необхідно, щоб браузер розумів, як слід інтерпретувати поточну вебсторінку, оскільки HTML існує в кількох версіях, крім того, є XHTML (EXtensible HyperText Markup Language, розширена мова розмітки гіпертексту), схожий на HTML, але відмінний від синтаксису. Щоб браузер «не плутався» і розумів, за яким стандартом відображати вебсторінку, необхідно в першому рядку коду задавати <!DOCTYPE>.

  • a

    a

    Елемент <a> (від англ. Anchor — якір) є одним з важливих в HTML і призначений для створення посилань. Для цього необхідно повідомити браузер, що є посиланням, а також вказати адресу документа, на який слід зробити посилання. Як значення атрибута href використовується адреса документа, на який відбувається перехід. Адреса посилання може бути абсолютним та відносним. Абсолютні адреси працюють скрізь і всюди, незалежно від імені сайту або веб-сторінки, де прописано посилання. Відносні посилання, як випливає з назви, побудовані щодо поточного документа або кореня сайту.

  • abbr

    abbr

    Елемент <abbr> (від англ. abbreviation — абревіатура) вказує, що послідовність символів є абревіатурою. За допомогою атрибута title надається розшифровка скрочень, що допомагає розуміти абревіатуру тим людям, котрі з нею знайомі. Окрім того, пошукові системи індексують повнотекстовий варіант скорочень, що може бути використаним для підвищення рейтингу документа.

  • acronym

    acronym

    Елемент <acronym> (від англ. acronym — акронім) вказує на те, що текст є акронімом. На відміну від абревіатури акронім - це усталене скорочення, котре вживається як самостійне слово. До акронімів, наприклад, можна віднести такі слова: СНІД, лікнеп, замполіт, США, DOS тощо.

  • address

    address

    Елемент <address> (від англ. address — адреса) призначений для зберігання контактної інформації автора (адреса, телефон, e-mail, посилання на сайт тощо) і може містити будь-які елементи HTML на зразок тексту, виділень тощо. Планується, що пошукові системи аналізуватимуть вміст цього елемента для збору інформації про авторів.

  • applet

    applet

    Елемент <applet> (від англ. application — "додаток" та зменшувально-пестливого суфікса -let) призначений для вставки на сторінку аплетів - невеликих програм, написаних мовою Java. Між відкриваючим та закриваючим тегом можна додати текст, котрий відображатиметься у браузері, якщо той підтримує аплети. Інакше текст не виводиться.

  • area

    area

    Кожен елемент <area> (від англ. area — область, регіон) визначає активні області зображення, котрі є посиланнями. Малюнок із прив'язаними до нього активними областями називається в сукупності картою-зображенням. Така карта за за зовнішнім виглядом нічим не відрізняється від звичайного зображення, але при цьому воно може бути розділеним на видимі зони різної форми, де кожна з областей э посиланням. Елемент <area> задає форму області, її розміри, встановлює адресу документа, який слід зробити посилання. <area> завжди розташовується в контейнері <map>, котрий пов'язує координати областей із зображенням.

  • article

    article

    Елемент <article> (від англ. article — стаття) є незалежним фрагментом вебсторінки і, як правило, містить "шапку", основний зміст та "підвал", в яких розташовуються такі частини, як заголовок, текст, ім'я автора, дата публікації, мітки, рейтинг статті тощо. <article> зазвичай застосовується для статей сайту, повідомлень у блозі чи на форумі, коментарів.

  • aside

    aside

    Елемент <aside> (від англ. aside — у стороні, відступ) - це розділ сторінки, який має непряме відношення до вмісту сторінки і може бути розглянутим окремо від цього вмісту. <aside> застосовується для бічних панелей, рекламних блоків, посилань на архів, міток та іншої інформації, відокремленої від основного вмісту сторінки.

  • audio

    audio

    Елемент <audio> (від англ. audio — звук) додає, відтворює та керує налаштуваннями аудіозапису на вебсторінці. Шлях до файлу задається через атрибут src або вкладений елемент <source>. Всередині контейнера <audio> можна написати текст, який буде виводитися в браузерах, що не працюють із цим елементом.

  • b

    b

    Елемент <b> (від англ. bold — жирний) використовується для привернення уваги до тексту, при цьому важливість тексту чи зміст тексту не мають значення. Текст усередині <b> відображається жирним зображенням.

  • base

    base

    Елемент <base> (від англ. base — база, основа) вказується всередині <head> та інструктує браузер відносно повної базової адреси поточного документа. <base> призначений для документів, у яких використовується відносна адреса, і які можуть переноситися в іншу папку або навіть на інший комп'ютер без втрати зв'язку. Браузер шукає елемент <base>, визначає повну адресу документа та коректно завантажує його.

  • basefont

    basefont

    Елемент <basefont> (від англ. base font — базовий шрифт) призначений для завдання шрифту, розміру та кольору тексту за замовчуванням.

  • bdi

    bdi

    Елемент <bdi> (від англ. bidirectional isolate — ізоляція двоспрямованості) вказує фрагмент тексту, котрий має бути ізольованим від зміни напряму виведення тексту. Така поведінка важлива для текстів, що одночасно містять різні мови й читаються зліва направо та справа наліво.

  • bdo

    bdo

    Елемент <bdo> (від англ. bidirectional override — перевизначення двоспрямованості) встановлює напрямок виведення тексту та переважно призначений для використання відносно мов, де читання відбувається справа наліво. Наприклад, арабська мова.

  • bgsound

    bgsound

    Елемент <bgsound> (від англ. background sound — фонова музика) визначає музичний файл, який програватиметься на вебсторінці під час її відкриття. Гучність, тривалість звучання музики та інші характеристики визначаються атрибутами, а також можуть керуватися через скрипти. Цей елемент повинен розміщуватись лише у контейнері <head>.

  • big

    big

    Елемент <big> (від англ. big — великий) збільшує розмір шрифту на одиницю порівняно зі звичайним текстом.

  • body

    body

    Елемент <body> (від англ. body — тіло) призначений для збереження вмісту вебсторінки (контенту), що відображається у вікні браузера. Інформацію, яку слід виводити в документі, варто розміщувати саме всередині контейнера <body>. До такої інформації належать текст, зображення, теги, скрипти JavaScript і т.д.

  • blink

    blink

    Елемент <blink> (від англ. blink — миготіння, мерехтіння) встановлює мерехтіння тексту.

  • blockquote

    blockquote

    Елемент <blockquote> (від англ. block quote — блок з цитатою) призначений для виділення довгих цитат всередині документа. Текст всередині <blockquote> відображається як вирівняний блок з відступами ліворуч і праворуч (по 40 пікселів), а також з відбивкою зверху та знизу.

  • br

    br

    Елемент <br> (від англ. line break — перенесення рядка) встановлює переведення рядка в тому місці, де він знаходиться. На відміну від елемента <p>, використання <br> не додає порожній відступ перед рядком.

  • button

    button

    Елемент <button> (від англ. button — кнопка) створює на вебсторінці кнопки і за своєю дією нагадує результат, який отримується за допомогою <input> (з атрибутом type="button | reset | submit"). На відміну від цього елемента <button> пропонує розширені можливості створення кнопок. Наприклад, на подібній кнопці можна розміщувати будь-які елементи HTML, включно із зображення. Використовуючи стилі, можна визначити вид кнопки шляхом зміни шрифту, кольору фону, розмірів та інших параметрів.

  • canvas

    canvas

    Елемент <canvas> (від англ. canvas — полотно) створює область, де за допомогою JavaScript можна малювати різні об'єкти, виводити зображення, трансформувати їх і змінювати властивості. За допомогою <canvas> можна створювати малюнки, анімацію, ігри та ін.

  • caption

    caption

    Елемент <caption> (від англ. caption — заголовок) призначений для створення заголовка до таблиці і може розміщуватися тільки всередині контейнера <table> причому відразу після тега. Такий заголовок - це текст, що за замовчуванням відображається перед таблицею і описує її зміст.

  • center

    center

    Елемент <center> (від англ. center — центр, середина) вирівнює вміст контейнера по центру відносно батьківського елемента.

  • cite

    cite

    Елемент <cite> (від англ. cite — цитувати) - назва творчої роботи (книги, статті, поеми, сценарії, фільми, пісні, опери, ігри та ін.). Це може бути твір, на який посилаються в цитаті, або просто робота, згадана мимохіть. <cite> зазвичай поєднується з цитатами, зокрема, з елементом <blockquote> та вказує назву твору, з якого взято цитату. Зверніть увагу, що для посилання на першоджерело <cite> не підходить, для цього є атрибут cite. Браузери зазвичай виділяють текст всередині курсивом.

  • code

    code

    Елемент <code> (від англ. code — код) призначений для відображення одного або декількох рядків тексту, що є програмним кодом. Сюди належать імена змінних, ключові слова, тексти функції і т. д. Браузери зазвичай відображають вміст контейнера <code> як моноширинний текст зменшеного розміру.

  • col

    col

    Елемент <col> (від англ. column — колонка) визначає ширину та інші характеристики однієї або декількох колонок таблиці. За наявності цього елемента браузер починає показувати вміст таблиці, не чекаючи повного завантаження. <col> можна використовувати спільно з елементом <colgroup>, який визначає групу колонок, що мають спільні характеристики.

  • colgroup

    colgroup

    Елемент <colgroup> (від англ. column group — група колонок) призначений для задання ширини та стилю однієї або декількох колонок таблиці. Цей елемент дозволяє зменшити код таблиці за рахунок скорочення атрибутів, що повторюються, також за його наявності браузер починає показувати вміст таблиці, не чекаючи її повного завантаження. Елемент <colgroup> можна використовувати у комбінації з <col>, який визначає характеристики однієї або кількох колонок.

  • command

    command

    Створює команду у вигляді перемикача, прапорця чи звичайної кнопки. Елемент <command> (від англ. command — команда) повинен розташовуватися всередині <menu>, інакше його не буде показано.

  • comment

    comment

    Додає коментар до коду документа, він не відображається у браузері. <comment> (від англ. comment — коментар) можна використовувати тільки всередині <body>.

  • data

    data

    Представляє вміст у машиночитаному вигляді, призначений для зовнішніх автоматизованих систем або скриптів на самому сайті. Усередині <data>(від англ. data — дані) , наприклад, може зберігатися ідентифікатор товару, але не дата чи час.

  • datalist

    datalist
    HTML5

    Елемент <datalist> (від англ. data list - список даних) створює список варіантів, які можна вибирати при наборі в текстовому полі. Спочатку цей список прихований і стає доступним при отриманні полем фокусу або набору тексту.

  • dd

    dd

    Елемент <dd> (від англ. description list description - опис списку описів) входить до трійки елементів <dl>, <dt>, <dd>, призначених для створення списку описів. Кожен такий список починається з контейнера <dl>, куди входить елемент <dt>, створює термін і елемент <dd>, який визначає опис цього терміна.

  • del

    del

    Елемент <del> (від англ. delete — видалити) використовується для виділення тексту, видаленого в новій версії документа. Подібне форматування дозволяє відстежити, які зміни у тексті документа було зроблено. Браузери зазвичай позначають текст у контейнері <del> як перекреслений.

  • details

    details
    HTML5

    Елемент <details> (від англ. details - подробиці, дані) використовується для зберігання інформації, яку можна приховати або показати на вимогу користувача. За замовчуванням вміст елемента не відображається, для зміни статусу застосовується атрибут open.

  • dfn

    dfn

    Як правило, у документі, коли новий згадуваний термін виділяється курсивом а також надається його визначення. При використанні цього терміна надалі він вважається вже відомим читачеві. Елемент <dfn> (від англ. definition - визначення) застосовується для виділення таких термінів при їх першій появі в тексті.

  • dialog

    dialog
    HTML5

    Елемент <dialog> (від англ. dialog - діалог) створює діалогове вікно, в якому можна виводити повідомлення або форму, наприклад, для входу на сайт.

  • dir

    dir

    Елемент <dir> (від англ. directory - директорія) створює список, що містить назви директорій (системні папки). Подібно до елементів <ol> та <ul> усередині контейнера <dir> список формується за допомогою <li>.

  • div

    div

    Елемент <div> (від англ. division - розділ, секція) є універсальним блоковим елементом і призначений для групування елементів документа з метою зміни виду вмісту через стилі. Для цього додається атрибут class або id з іменем класу чи ідентифікатора.

  • dl

    dl

    Элемент <dl> (от англ. description list — список описаний) входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.

  • dt

    dt

    Елемент <dt> (від англ. description list term - визначення списку описів) входить до трійки елементів <dl>, <dt>, <dd>, призначених для створення списку описів. Кожен такий список починається з контейнера <dl>, куди входить елемент <dt>, створює термін і елемент <dd>, який визначає опис цього терміна.

  • em

    em

    Призначений для тексту, що має особливе значення, або такого, на якому слід зробити акцент. Текст всередині <em> (від англ. emphasis - акцент) відображається у формі курсиву.

  • embed

    embed

    Елемент <embed> (від англ. embed — вставити, впровадити) використовується для завантаження та відображення об'єктів (наприклад, відеофайлів, флеш-роликів, деяких звукових файлів тощо), які спочатку браузер не розуміє. Переважно такі об'єкти вимагають підключення до браузера спеціального модуля, який називається плагін, або запуску допоміжної програми.

  • fieldset

    fieldset

    Елемент <fieldset> (від англ. form field set - набір полів форми) призначений для групування елементів форми. Таке групування полегшує роботу з формами, що містять велику кількість даних, наприклад, один блок може бути призначений для введення текстової інформації, а інший - для прапорців.

  • figcaption

    figcaption
    HTML5

    Містить опис елемента <figure>. <figcaption> (від англ. figure caption - підпис до малюнка) повинен бути першим або останнім елементом у групі.

  • figure

    figure
    HTML5

    Використовується для групування будь-яких елементів, наприклад, зображень та підписів до них. <figure> (від англ. figure - малюнок, ілюстрація) не повинен бути пов'язаний безпосередньо з основним вмістом документа, і при його переміщенні в інше місце зміст тексту не повинен змінюватися. Зазвичай застосовується для ілюстрацій, фрагментів коду, схем, графіків, діаграм та інших.

  • font

    font

    Елемент <font> (від англ. font-шрифт) - це контейнер для зміни характеристик шрифту, як-от: розмір, колір і гарнітура.

  • footer

    footer

    Елемент <footer> (від англ. footer — нижній колонтитул, підвал) задає «підвал» сайту або розділу вебсторінки, в ньому може розміщуватись ім'я автора, дата документа, контактна та правова інформація.

  • form

    form

    Елемент <form> (від англ. form -форма) встановлює форму на вебсторінці. Форма призначена для обміну даними між користувачем та сервером. Область застосування форм не обмежена надсиланням даних на сервер, за допомогою клієнтських скриптів можна отримати доступ до будь-якого елемента форми, змінювати його та застосовувати на свій розсуд.

  • frame

    frame

    Елемент <frame> (від англ. frame – рамка, каркас) визначає властивості окремого кадру, куди ділиться вікно браузера. Цей елемент повинен розміщуватись у контейнері <frameset>, який також визначає спосіб розмітки сторінки на окремі області. У кожну з таких областей завантажується самостійна вебсторінка, яка визначається за допомогою атрибута src. Хоча обов'язкових атрибутів <frame> немає, рекомендується задавати кожному кадру його ім'я через атрибут name. Це особливо важливо, якщо за посиланням одного кадру потрібно завантажувати документ в інший.

  • frameset

    frameset

    Визначає структуру кадрів на вебсторінці. Фрейми розділяють вікно браузера на окремі області, розташовані впритул один до одного. У кожну з таких областей завантажується самостійна вебсторінка, яка визначається за допомогою елемента <frame>. За допомогою кадрів вебсторінка ділиться на два або більше документи, які зазвичай містять навігацію по сайту та його контент. Механізм кадрів дозволяє відкривати документ в одному кадрі за посиланням, натиснутим в іншому кадрі. Елемент <frameset> (від англ. frame set — набір рамок) замінює собою <body> на вебсторінці. Допустимо використовувати вкладену структуру елементів, це дозволяє розбити один кадр на дві та більше областей.

  • h1

    h1

    HTML пропонує шість заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка. Так елемент <h1> (від англ. heading — заголовок) є найбільш важливим заголовком першого рівня, а <h6> служить для позначення заголовка шостого рівня і є найменш значним. За замовчуванням заголовок першого рівня відображається найбільшим шрифтом жирного зображення, заголовки наступного рівня за розміром менше. Елементи <h1>,...,<h6> відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком та після нього додається порожній простір.

  • h2

    h2

    HTML пропонує шість заголовків різного рівня, які показують відносну важливість розділу, розташованого після заголовка. Так, елемент <h1> є найважливішим заголовком першого рівня, а <h6> служить для позначення заголовка шостого рівня і є найменш значним. За замовчуванням заголовок першого рівня відображається найбільшим шрифтом жирного зображення, заголовки наступного рівня за розміром менше. Елементи <h1>,...,<h6> відносяться до блокових елементів, вони завжди починаються з нового рядка, а після них інші елементи відображаються на наступному рядку. Крім того, перед заголовком та після нього додається порожній простір.

  • h3

    h3

    Встановлює заголовок третього рівня.

  • h4

    h4

    Встановлює заголовок четвертого рівня.

  • h5

    h5

    Задає заголовок п'ятого рівня.

  • h6

    h6

    Задає заголовок шостого рівня.

  • head

    head

    Елемент <head> (від англ. head - голова) призначений для зберігання інших елементів, мета яких - допомогти браузеру в роботі з даними. Також усередині контейнера <head> знаходяться метатеги, які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатегів для отримання опису сайту, ключових слів та інших даних.

  • header

    header
    HTML5

    Елемент <header> (від англ. header - верхній колонтитул, шапка) задає «шапку» сайту або розділу вебсторінки. Усередині «шапки» сайту зазвичай розташовується логотип, назва сайту, пошукова форма, навігаційні посилання та ін.

  • hgroup

    hgroup

    <hgroup> (від англ. heading group - група заголовків) використовується для групування заголовків вебсторінки або розділу. Усередині розташовуються заголовки від <h1> до <h6>.

  • hr

    hr

    <hr> (від англ. horizontal rule — горизонтальна лінійка) малює горизонтальну лінію, яка за своїм виглядом залежить від параметрів, що використовуються, а також від браузера.

  • html

    html

    Елемент <html> є контейнером, який містить у собі весь вміст вебсторінки, включно з елементами <head> і <body>. Відкриваючий та закриваючий теги <html> у документі не обов'язкові, але хороший стиль диктує неодмінне їх використання. Як правило, <html> йде в документі другим після визначення типу документа (Document Type Definition, DTD), що встановлюється через <!DOCTYPE>. Закриваючий тег <html> завжди стоїть у документі останнім.

  • i

    i

    Елемент <i> (від англ. italic - курсив) використовується для тексту, який з різних причин відрізняється від звичайного тексту. Це може бути термін, іноземне слово, назва та ін. Текст усередині <i> (від англ. italic - курсив) відображається курсивним зображенням.

  • iframe

    iframe

    Елемент <iframe> (від англ. inline frame — вбудований кадр) створює вбудований кадр, який знаходиться всередині звичайного документа, він дозволяє завантажувати в область заданих розмірів будь-які інші незалежні документи.

  • img

    img

    Елемент <img> (від англ. image - зображення) призначений для відображення на вебсторінці зображень у графічному форматі GIF, JPEG, SVG або PNG. Адреса файлу з зображенням задається через атрибут src. Якщо необхідно, малюнок можна зробити посиланням на інший файл, помістивши <img> у контейнер <a>.

  • input

    input

    <input> (від англ. input - введення) -один з різнобічних елементів форми, що дозволяє створювати різні частини інтерфейсу та забезпечувати взаємодію з користувачем. Головним чином <input> призначений для створення текстових полів, різних кнопок, перемикачів та прапорців.

  • ins

    ins

    Елемент <ins> (від англ. insert — вставити) призначений для виділення тексту, який було додано у нову версію документа. Подібне форматування дозволяє відстежити, які зміни у тексті документа було зроблено.

  • isindex

    isindex

    Елемент <isindex> призначений для пошуку в поточному документі. Відповідно до специфікації <isindex> слід розміщувати всередині контейнера <head>, але браузери коректно виводять <isindex> навіть якщо він знаходиться в іншому місці коду. Сам елемент відображається як текстовий рядок, зверху та знизу якого виводяться лінії, що додаються через <hr>.

  • kbd

    kbd

    Елемент <kbd> (від англ. keyboard - клавіатура) використовується для позначення тексту, котрий набирається на клавіатурі, або для назви клавіш. Браузери зазвичай позначають текст у контейнері <kbd> моноширинним шрифтом.

  • keygen

    keygen

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

  • label

    label

    Елемент <label> (від англ. label — мітка) встановлює зв'язок між певною міткою, якою зазвичай є текст, і елементом форми (<input>, <select>, <textarea>). Такий зв'язок необхідний, щоб змінювати значення елементів форми при натисканні курсором миші на текст. Крім того, за допомогою <label> можна встановлювати гарячі клавіші на клавіатурі та переходити на активний елемент подібно до посилань.

  • legend

    legend

    Елемент <legend> (від англ. legend - легенда, напис) застосовується для створення заголовка групи елементів форми, яка визначається за допомогою <fieldset>. Група елементів позначається у браузері за допомогою рамки, а текст, який знаходиться всередині контейнера <legend>, вбудовується у цю рамку.

  • li

    li

    Елемент <li> (від англ. list item - пункт списку) визначає окремий пункт списку. Зовнішній елемент <ul> або <ol> встановлює тип списку - маркований або нумерований.

  • link

    link

    Встановлює зв'язок із зовнішнім документом на кшталт файлу зі стилями або шрифтами. Елемент <link> (від англ. link — посилання) зазвичай розміщується всередині контейнера <head> і створює посилання, на відміну від елемента <a>.

  • listing

    listing

    Призначений для виведення лістингу програм чи коду. Відображає вміст моноширинним шрифтом зменшеного розміру.

  • main

    main
    HTML5

    Елемент <main> (від англ. main - основний, головний) призначений для основного вмісту документа. На сторінці може бути лише один <main> і він не повинен розташовуватися всередині елементів <article>, <aside>, <footer>, <header>, <nav> або <section>.

  • map

    map

    Елемент <map> (від англ. map — карта) є контейнером для елементів <area>, які визначають активні області для карт-зображень. Такі області встановлюють невидимі зони зображення, які є посиланнями на HTML-документи. Мета використання <map> - зв'язати елемент <img> з клієнтською картою-зображенням. Цей зв'язок визначається застосуванням єдиного ідентифікатора як <img>, що задається атрибутом usemap, так і <map>, встановлюваного атрибутом name.

  • marquee

    marquee
    Нестандартний

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

  • mark

    mark
    HTML5

    Елемент <mark> (від англ. mark - позначка) позначає текст як виділений. У браузері фоновий колір тексту всередині <mark> виділяється жовтим.

  • menu

    menu
    HTML5

    Елемент <menu> (від англ. menu — меню) призначений для відображення списку пунктів меню. Аналогічно елементам <ol> та <ul> усередині контейнера <menu> список формується за допомогою <li>.

  • menuitem

    menuitem

    Задає команду, яку користувач може викликати через контекстне меню. Команда має вигляд текстової мітки, а також може містити невелику картинку. Сама команда пов'язана із програмою на JavaScript.

  • meta

    meta

    Елемент <meta> (від англ. metadata - метадані) визначає дані (вони називаються ще метатеги), які використовуються для зберігання інформації, призначеної для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатегів для отримання опису сайту, ключових слів та інших даних. Дозволяється використовувати більш ніж один метатег, вони розміщуються в контейнері <head>. Як правило, атрибути будь-якого метатегу зводяться до пар «ім'я=значення», імена яких визначаються ключовими словами content, name або http-equiv.

  • meter

    meter
    HTML5

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

  • multicol

    multicol
    Нестандартний

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

  • nav

    nav

    Елемент <nav> (від англ. navigation -навігація) задає навігацію по сайту. Якщо на сторінці кілька блоків посилань, то <nav> зазвичай поміщають пріоритетні посилання. Також можна використовувати кілька <nav> у документі. Забороняється вкладати <nav> усередину <address>.

  • nobr

    nobr

    Елемент <nobr> (від англ. no line break - немає перенесення рядка) повідомляє браузер відображати текст без переносів. Без нього текст вирівнюється лівим краєм вікна браузера або батьківського елемента. При цьому браузер перекладів рядків розставляє автоматично, щоб текст повністю помістився по ширині вікна. Використання <nobr> змушує відображати текст без переносів одним рядком, що може призвести до появи горизонтальної стрічки прокручування. Користувачам доведеться прокручувати текст по горизонталі, щоб побачити його повністю.

  • noembed

    noembed

    Елемент <noembed> призначений для відображення інформації на вебсторінці, якщо браузер не підтримує роботу з плагінами. В інших випадках вміст контейнера <noembed> буде проігноровано.

  • noindex

    noindex

    Пошуковий робот «ходить» сайтами, переглядає та аналізує їх вміст, після чого зберігає вказівник на текст та зображення в пошукову базу даних. Такий процес називається індексуванням. Частину вебсторінки можна закрити від індексування, помістивши її всередину елемента <noindex>. Тоді при наступному відвідуванні вебсторінки пошуковий робот проігнорує такий вміст і не додаватиме його до своєї бази даних. Це робиться з різних причин, наприклад, закриті від індексації посилання не передають ТІЦ (тематичний індекс цитування).

  • noframes

    noframes

    Вміст елемента <noframes> відображається у браузері, коли він не підтримує фрейми та не вміє їх інтерпретувати. Браузери, які працюють із фреймами, повністю ігнорують вміст <noframes>. Як правило, всередині цього елемента розміщується текст, що інформує користувача про те, що його браузер фрейми не підтримує або з пропозицією перейти на сторінку без фреймів.

  • noscript

    noscript

    Контейнер <noscript> показує свій вміст, якщо браузер не підтримує роботу зі скриптами або їхню підтримку вимкнено користувачем. В інших випадках браузер ігнорує цей елемент і все, що знаходиться всередині нього.

  • object

    object

    Елемент <object> (від англ. object — об'єкт) повідомляє браузеру, як завантажувати та відображати об'єкти, які вихідно браузер не розуміє. Як правило, такі об'єкти вимагають підключення до браузера спеціального модуля, який називається плагін, або запуску допоміжної програми.

  • ol

    ol

    Елемент <ol> (від англ. ordered list - впорядкований список) встановлює нумерований список. Кожен елемент списку має починатися з <li>. Якщо <ol> застосовує таблицю стилів, то елементи <li> успадковують ці властивості.

  • optgroup

    optgroup

    Елемент <optgroup> (від англ. option group - група варіантів) являє собою контейнер, всередині якого розташовуються елементи <option>, об'єднані в одну групу. Особливістю <optgroup> є те, що він не виділяється як звичайний елемент списку, акцентується за допомогою жирного зображення, а всі елементи, що входять в цей контейнер, зміщуються вправо від свого вихідного положення.

  • option

    option

    Елемент <option> (від англ. option - варіант, вибір) визначає окремі пункти списку, створюваного за допомогою контейнера <select>. Ширина списку визначається найширшим текстом, вказаним у <option>, і може змінюватися з допомогою стилів. Якщо планується надсилати дані списку на сервер, потрібно помістити елемент <select> всередину форми. Це також необхідно, коли до даних списку йде звернення через скрипти.

  • output

    output

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

  • p

    p

    Визначає текстовий абзац. Елемент <p> (від англ. paragraph - абзац, параграф) є блоковим, завжди починається з нового рядка, абзаци тексту йдуть один за одним розділяються між собою відбивкою. Величиною відбивки можна керувати за допомогою стилів. Якщо тег, що закриває, відсутній, вважається, що кінець абзацу збігається з початком наступного абзацу або іншого блокового елемента.

  • param

    param

    Елемент <param> (від англ. parameter — параметр) призначений для передачі значень параметрів Java-аплетам або об'єктам вебсторінки, створеним за допомогою елементів <applet> або <object>. Такий підхід дозволяє у коді HTML-документа змінювати характеристики об'єкта без його додаткової компіляції. Кількість елементів <param>, що одночасно використовуються, може бути більше одного і для кожного з них задається пара «ім'я=значення» через атрибути name і value.

  • picture

    picture

    Являє собою контейнер для зберігання декількох елементів <source>, які підтримують елемент <img>. Це дозволяє вказувати різні зображення з урахуванням розміру екрана, щільності пікселів, формату зображення та інших параметрів. Ось кілька сфер застосування <picture> (від англ. picture — картинка, зображення):

  • plaintext

    plaintext

    Елемент <plaintext> (від англ. plain text — простий текст) відображає вміст контейнера «як є». Поки тег <plaintext> не закритий, усі теги всередині нього відображаються як звичайний текст. Незважаючи на те, що всі браузери підтримують цей тег, він не входить до специфікації HTML, а його використання засуджується.

  • pre

    pre

    Елемент <pre> (від англ. preformatted text — форматований текст) визначає блок попередньо форматованого тексту. Такий текст зазвичай відображається моноширинним шрифтом з усіма пробілами між словами. За замовчуванням будь-яка кількість пробілів, що йдуть у коді поспіль, на вебсторінці відображається як один. Елемент <pre> дозволяє обійти цю особливість та відображати текст так, як потрібно розробнику.

  • progress

    progress

    Використовується для відображення прогресу завершеності завдання. Зміна значення відбувається через JavaScript.

  • q

    q

    Елемент <q> (від англ. quotation - цитата, лапки) використовується для виділення в тексті цитат. Вміст контейнера автоматично відображається у браузері у лапках.

  • rp

    rp

    Використовується для виведення тексту у браузерах, які не підтримують <ruby>. В інших браузерах текст, укладений у контейнер <rp> (від англ. ruby parenthesis - дужки рубіна), не відображається. Елемент <rp> має йти до або після <rt>.

  • rt

    rt

    Елемент <rt> (від англ. ruby text - текст рубіна) додає анотацію зверху або знизу від тексту, укладеного в контейнер <ruby>. Сама анотація виводиться зменшеним шрифтом.

  • rtc

    rtc

    Елемент <rtc> (від англ. ruby text container - текстовий контейнер рубіна) позначає текстовий контейнер всередині <ruby>. В основному застосовується як описова частина або анотація для ієрогліфів.

  • ruby

    ruby

    Елемент <ruby> (від англ. ruby - рубін) призначений для додавання невеликої анотації зверху або знизу від заданого тексту. Така форма запису переважно використовується для ідеографічної писемності на зразок китайської мови, але може застосовуватися і для інших мов, якщо потрібно написати один текст над іншим.

  • s

    s

    Елемент <s> (від англ. strikethrough - закреслений) використовується для вмісту, який вже не є точним чи актуальним. Браузери відображають такий текст як перекреслений. Елемент <s> не повинен застосовуватися для видаленого тексту, для цього є елемент <del>.

  • samp

    samp

    Елемент <samp> (від англ. sample - приклад, зразок) використовується для відображення тексту, який є результатом виведення комп'ютерної програми або скрипта. Браузери зазвичай відображають текст у контейнері <samp> за допомогою моноширинного шрифту.

  • script

    script

    Елемент <script> (від англ. script - сценарій) призначений для опису скриптів, може містити посилання на програму або її текст певною мовою. Скрипти можуть розміщуватися у зовнішньому файлі та зв'язуватися з будь-яким HTML-документом. Такий підхід дозволяє використовувати ті самі спільні функції на багатьох вебсторінках і прискорює їх завантаження, тому що зовнішній файл кешується при першому завантаженні, і скрипт викликається швидше при наступних викликах.

  • section

    section

    Задає розділ документа, може застосовуватися для блоку новин, контактної інформації, розділів тексту, вкладок у діалоговому вікні та ін. Розділ зазвичай містить заголовок. Допускається вкладати один елемент <section> (від англ. section — розділ) всередину іншого.

  • select

    select

    <select> (від англ. selection — вибір) дозволяє створити елемент інтерфейсу у вигляді списку, що розгортається, а також список з одним або множинним вибором. Кінцевий вид залежить від використання атрибута size, який встановлює висоту списку. Ширина списку визначається найширшим текстом, вказаним у елементі <option>, і може змінюватися з допомогою стилів. Кожен пункт створюється за допомогою елемента <option>, який має бути вкладеним у контейнер <select>. Якщо планується відправляти дані списку на сервер, потрібно помістити <select> всередину форми. Це також необхідно, коли до даних списку йде звернення через скрипти.

  • small

    small

    HTML4 <small> (від англ. small — маленький) зменшує розмір шрифту на одиницю проти звичайним текстом.

  • source

    source

    Вставляє звуковий або відеофайл для елементів <audio> та <video>. Узагальнено такі файли називаються медійними. Також застосовується для додавання зображень у контейнер <picture>

  • spacer

    spacer

    Создаёт пустое пространство по вертикали или горизонтали.

  • span

    span

    Універсальний рядковий елемент <span> (від англ. span — охоплювати) призначений для виділення окремих рядків, символів чи інших малих елементів для подальшої зміни їх оформлення за допомогою стилів. Наприклад, всередині абзацу (<p>) можна змінити колір і розмір першого слова, якщо його виділити за допомогою елемента <span> і задати йому бажаний стиль.

  • strike

    strike

    Элемент <strike> (от англ. strikethrough — зачёркнутый) отображает текст как перечёркнутый. По своему действию аналогичен <s>, который имеет сокращённую форму записи.

  • strong

    strong

    Элемент <strong> (от англ. strong — сильный) выделяет важный текст, отображается жирным начертанием. Важное предложение имеет большое значение для всей веб-страницы, указывает на что-то серьёзное или срочное. Важное слово или словосочетание показывает, что оно имеет большее значение по сравнению с окружающим текстом. Браузеры отображают текст внутри <strong> жирным начертанием.

  • style

    style

    <style> (від англ. style - стиль) застосовується для визначення стилів елементів веб-сторінки. Елемент <style> необхідно використовувати всередині контейнера <head>. Можна задавати кілька <style>.

  • sub

    sub

    Елемент <sub> (від англ. subscript - нижній індекс) відображає шрифт у вигляді нижнього індексу. Текст при цьому розташовується нижче за базову лінію інших символів рядка і зменшеного розміру.

  • summary

    summary

    Вказує заголовок для <details>, яким можна натискати для розгортання/згортання інформації. Елемент <summary> має йти першим усередині <details>.

  • sup

    sup

    Елемент <sup> (від англ. superscript - верхній індекс) відображає шрифт у вигляді верхнього індексу. Шрифт при цьому відображається вище базової лінії тексту та зменшеного розміру.

  • table

    table

    <table> (від англ. table - таблиця) служить контейнером для елементів, що визначають вміст таблиці

  • tbody

    tbody

    Елемент <tbody> (від англ. table body - тіло таблиці) призначений для зберігання одного або кількох рядків таблиці. Це дозволяє створювати структурні блоки, відносно яких можна застосовувати єдине оформлення через стилі, і навіть управляти їх виглядом через скрипти.

  • td

    td

    Призначений для створення одної комірки таблиці. Елемент <td> (від англ. table data cell - комірка з даними таблиці) повинен розміщуватися всередині контейнера <tr>, який у свою чергу розташовується всередині <table>.

  • template

    template
    HTML5

    Елемент <template> являє собою механізм для зберігання вмісту на стороні клієнта, який не відображається в процесі завантаження сторінки, але згодом може бути заповнений за допомогою JavaScript.

  • textarea

    textarea

    <textarea> є елементом форми для створення області, в яку можна вводити кілька рядків тексту. На відміну від елемента <input> у текстовому полі допустимо робити перенесення рядків, вони зберігаються при надсиланні даних на сервер.

  • tfoot

    tfoot

    Элемент <tfoot> (от англ. table foot — подвал таблицы) представляет собой «подвал» таблицы и отображается внизу таблицы. Предназначен для информации о колонках таблицы.

  • th

    th

    Елемент <th> (від англ. table header cell - комірка заголовка таблиці) призначений для створення однієї комірки таблиці, яка позначається як заголовна. Текст у такій комірці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру. Елемент <th> повинен розміщуватись усередині контейнера <tr>, який у свою чергу розташовується всередині <table>.

  • thead

    thead

    Елемент <thead> (від англ. table head - голова або шапка таблиці) призначений для зберігання одного або декількох рядків, які представлені вгорі таблиці. Допустимо використовувати не більше одного елемента <thead> в межах однієї таблиці, і він повинен йти у вихідному коді відразу після тега <table> або <caption> (якщо він є).

  • time

    time
    HTML5

    Позначає текст всередині елемента <time> (від англ. time - час) як дата, час або обидва значення. Може вказуватися безпосередньо всередині контейнера <time>, або задаватися через атрибут datetime.

  • title

    title

    Визначає заголовок документа. Елемент <title> (від англ. title - назва, заголовок) не є частиною документа і не показується безпосередньо на веб-сторінці. Текст заголовка відображається, як правило, на вкладці браузера (рис. 1). Допускається використовувати тільки один <title> на документ і розміщувати його в контейнері <head>.

  • tr

    tr

    Елемент <tr> (від англ. table row - рядок таблиці) слугує контейнером для створення рядка таблиці. Кожна комірка в межах такого рядка встановлюється за допомогою елемента <th> або <td>.

  • track

    track
    HTML5

    Елемент <track> (від англ. track - доріжка) дає змогу авторам вказати текстову доріжку для медійних елементів <audio> і <video>. Така доріжка зазвичай містить субтитри різними мовами, коментарі, заголовки тощо.

  • tt

    tt

    Элемент <tt> (от англ. teletype text — текст телетайпа) отображает текст моноширинным шрифтом.

  • u

    u

    Елемент <u> (від англ. unarticulated - невиразний) використовується для розмітки тексту, який має відрізнятися стилістично від звичайного тексту. Наприклад, так можна позначати помилки в тексті, власні імена, іноземні слова. Текст у <u> виділяється підкресленням.

  • ul

    ul

    Елемент <ul> (від англ. unordered list - невпорядкований список) встановлює маркований список. Кожен пункт списку повинен починатися з <li>.

  • var

    var

    Елемент <var> (від англ. variable - змінна) використовується для виділення змінних з комп'ютерних програм. Браузери зазвичай позначають текст у контейнері курсорним накресленням.

  • video

    video

    Додає, відтворює та керує налаштуваннями відеоролика на веб-сторінці. Шлях до файлу задається через атрибут src або вкладений елемент <source>. Список підтримуваних браузерами аудіо- та відеокодеків обмежений і наведений у табл. 1.

  • wbr

    wbr

    Елемент <wbr> (від англ. word break - перенесення слів) вказує браузеру місце, де допускається робити перенесення рядка в тексті, якщо цього вимагає ширина батьківського елемента.

  • xmp

    xmp

    Елемент <xmp> (від англ. example - приклад) відображає вміст контейнера "як є" і шрифтом фіксованої ширини. Поки елемент <xmp> не закритий, усі теги всередині нього відображаються як звичайний текст.

  • <!-- -->

    <!-- -->

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

Універсальні атрибути

  • Атрибут accesskey

    Атрибут accesskey

    Дає змогу отримати доступ до елемента за допомогою заданого поєднання клавіш.

  • Атрибут class

    Атрибут class

    Визначає ім'я класу, яке дає змогу пов'язати елемент зі стильовим оформленням.

  • Атрибут contenteditable

    Атрибут contenteditable

    Повідомляє, що елемент доступний для редагування користувачем.

  • Атрибут contextmenu

    Атрибут contextmenu

    Встановлює контекстне меню для елемента.

  • Атрибут data-*

    Атрибут data-*

    Дозволяє створювати свої атрибути для зберігання довільної інформації.

  • Атрибут dir

    Атрибут dir

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

  • Атрибут draggable

    Атрибут draggable

    Вказує, чи можна перетягувати елемент, використовуючи Drag and Drop API.

  • Атрибут dropzone

    Атрибут dropzone

    Визначає, що робити з перетягуваними користувачем даними - скопіювати їх, перетягнути або зв'язати.

  • Атрибут hidden

    Атрибут hidden

    Приховує вміст елемента від перегляду.

  • Атрибут id

    Атрибут id

    Вказує ім'я стильового ідентифікатора.

  • Атрибут itemid

    Атрибут itemid

    Визначає унікальний глобальний ідентифікатор елемента для мікроданних.

  • Атрибут itemprop

    Атрибут itemprop

    Використовується для додавання властивостей словника мікроданних до елемента.

  • Атрибут itemref

    Атрибут itemref

    Пов'язує властивості елемента з атрибутом itemscope.

  • Атрибут itemscope

    Атрибут itemscope

    Задає область дії словника в структурі даних.

  • Атрибут itemtype

    Атрибут itemtype

    Вказує адресу словника, який застосовуватиметься для визначення властивостей елемента в структурі даних.

  • Атрибут lang

    Атрибут lang

    Браузер використовує значення атрибута для правильного відображення деяких національних символів.

  • Атрибут spellcheck

    Атрибут spellcheck

    Вказує браузеру чи перевіряти правопис і граматику в тексті.

  • Атрибут style

    Атрибут style

    Застосовується для визначення стилю елемента за допомогою правил CSS.

  • Атрибут tabindex

    Атрибут tabindex

    Встановлює порядок отримання фокуса при переході між елементами за допомогою клавіші Tab.

  • Атрибут title

    Атрибут title

    Описує вміст елемента у вигляді спливаючої підказки

Події

Значення

  • MIME-типи

    MIME-типи

    MIME (Multipurpose Internet Mail Extension, Багатоцільові розширення пошти Інтернету) - специфікація для передавання мережею файлів різного типу: зображень, музики, текстів, відео, архівів тощо. Зазначення MIME-типу використовується в HTML зазвичай під час передачі даних форм і вставки на сторінку різних об'єктів.

  • Адреса

    Адреса

    Адресою називається шлях до документа, наприклад, до графічного файлу. Адреса необхідна в тих випадках, коли робиться посилання на веб-сторінку або завантажується певний файл. Наприклад, в елементі <img> адреса використовується як значення атрибута src, він задає шлях до файлу із зображенням.

  • Коди мов

    Коди мов

    Код мови застосовується для атрибутів, що задають мову, якою написаний весь документ або окремі його блоки. У HTML мова зазвичай задається через атрибут lang.

  • Назви кольорів

    Назви кольорів

    Крім шістнадцяткового представлення кольору як значення допускається вказувати ключові слова, що позначають колір.

  • Відсотки

    Відсотки
    Застаріло

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

  • Скрипт

    Скрипт

    Скриптом називається програма (зазвичай мовою JavaScript), що виконується в браузері. Скрипт як значення застосовується до подій і викликається в разі настання зазначеної події. Якщо скрипт невеликий, його код можна вказати прямо в значенні, а для об'ємних скриптів пишеться функція, яку викликають у значенні події.

  • Текст

    Текст

    Звичайний текстовий рядок.

  • Колір

    Колір

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

  • Число

    Число

    Значением атрибута тега может выступать целое число, содержащее цифры от 0 до 9. Число может быть отрицательным, тогда перед ним ставят знак минус без пробелов (-10).

Типи елементів

  • Аудіо та відео

    Аудіо та відео

    Елементи для програвання та управління аудіо та відеороликами на сторінці.

  • Документ

    Документ

    Елементи, що формують структуру HTML-документа.

  • Зображення

    Зображення

    Елементи для додавання картинок на сторінку.

  • Об'єкти

    Об'єкти

    Додавання на сторінку аплетів або об'єктів, які браузер розуміє за допомогою плагінів.

  • Скрипти

    Скрипти

    Вставка на сторінку програмних скриптів, зазвичай мовою JavaScript.

  • Списки

    Списки

    Нумеровані та марковані списки.

  • Посилання

    Посилання

    Посилання на інші сторінки та навігація сайтом.

  • Таблиці

    Таблиці

    Створення та керування табличними даними.

  • Текст

    Текст

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

  • Форми

    Форми

    Інтерактивні елементи для взаємодії з користувачем і надсилання даних на сервер для їх подальшого опрацювання.

  • Фрейми

    Фрейми

    Фрейми поділяють вікно браузера на окремі області, розташовані впритул одна до одної. У кожну з таких областей завантажується самостійна веб-сторінка, яка визначається за допомогою елемента <frame>. За допомогою фреймів веб-сторінка ділиться на два або більше документи, які зазвичай містять навігацію по сайту і його контент. Механізм фреймів дає змогу відкривати документ в одному фреймі за посиланням, натиснутим у зовсім іншому фреймі. Припустимо також використовувати вкладену структуру елементів, це дає змогу дробити фрейми на дрібні області.