Image default
Front-end HTML

HTML-атрибути

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

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

Атрибут Опція Функція
align right, left, center Горизонтальне вирівнювання тегів.
valign top, middle, bottom Вертикальне вирівнювання тегів.
bgcolor числове, шістнадцяткове, RGB значення Встановалює фоновий колір за елементом.
background URL Встановлює зображення за елементом.
id Визначається користувачем Ідентифікує для одноразового використання елементу з CSS.
class Визначається користувачем Класифікує елемент для використання с CSS.
width Числове (рх або em) або відсоткове значення Задає ширину таблиць, зображень, блоків.
height Числове (рх або em) або відсоткове значення Задає висоту таблиць, зображень, блоків.
title Визначається користувачем «Випливаючий» заголовок до елементів.
hidden Визначається користувачем Показує браузеру інформацію, чи прихований блок, чи ні.

Наведені вище атрибути є загальними, вони можуть використовуватись майже з будь-якими тегами. Але є й такі, які є унікальними для деяких тегів.

Наведемо приклад

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

Вивід зображення в браузері через атрибут src

Якщо ми вкажемо невірний шлях до файлу отримаємо наступне

Результат відображення в браузері

Альтернативний текст за допомогою атрибуту alt

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

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

Таблиця 1. Список основних атрибутів

Ім’я атрибута Елемент Опис
hidden Глобальний атрибут Припиняє генерування цього елементу
high <meter> Вказує нижню границю верхнього диапазона.
href <a>, <area>, <base>, <link> URL ресурсу.
hreflang <a>, <area>, <link> Вказує мову ресурсу
icon <command> Вказує картинку,  яка будет представляти команду.
ismap <img> Показує, что зображення є частиною серверної карти зображень.
keytype <keygen> Вказує тип згенерированного ключа.
kind <track> Вказує вид доріжки тексту.
label <track> Вказує читабельний заголовок дорожки тексту.
lang Глобальний атрибут Визначає мову для використаного елементу.
language <script> Визначає мову для скрипту, використаного в елементі.
list <input> Задає список предвстановлених опцій для пропозиції користувачу.
loop <audio>, <bgsound>, <marquee>, <video> Вказує, чи треба програвати контент після закінчення доріжки.
low <meter> Вказує верхню границю нижнього діапазону.
manifest <html> Задає URL кешованого манифесту документу.
max <input>, <meter>, <progress> Вказує максимальне допустиме значення.
maxlength <input>, <textarea> Визначає максимальну кількість символів, допустимих в елементі.

 

media <a>, <area>, <link>, <source>, <style> Задає підказку медіа, для якої, пов’язаний ресурс був спроектований.
method <form> Визначає, який HTTP метод використовувати, коли пошлють дані форми. Може бути GET (за замовчуванням) або POST.
min <input>, <meter> Показує мінімальне допустиме значення.
multiple <input>, <select> Показує чи можуть бути обрані множинні значення в input типу email або file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Ім’я елемента. Наприклад, використовується сервером для визначення полів відправленої форми.
novalidate <form> Цей атрибут вказує, що форма не повинна бути перевірятися, коли передається на сервер.
open <details> Вказує деталі при завантаженні сторінки.
optimum <meter> Вказує оптимальне числове значення.
pattern <input> Визначає регулярний вираз, який перевірятиме вхідні дані елемента.
placeholder <input>, <textarea> Надає підказку користувачу, щодо того, що можна ввести в поле.
poster <video> URL вказує блок постера для показу, поки користувач програє або шукає.
preload <audio>, <video> Вказує чи завантажувати ресурс цілком, його частину або не завантажувати зовсім.
pubdate <time> Вказує, що ця дата і час є  датою найближчого елемента предка <article>.
readonly <input>, <textarea> Вказує, чи можна редагувати елемент.
rel <a>, <area>, <link> Задає відношення цільового об’єкта до об’єкта посилання.
required <input>, <select>, <textarea> Вказує, чи потрібно заповнювати цей елемент чи ні.
reversed <ol> Вказує чи список за спаданням, замість того, щоб показувати його по зростанню.
rows <textarea> Визначає кількість рядків в textarea.
rowspan <td>, <th> Визначає кількість рядків таблиці, які слід охоплювати.
sandbox <iframe>
spellcheck Глобальний атрибут Вказує, чи дозволена перевірка правопису для цього елемента.
scope <th>
scoped <style>
seamless <iframe>

Продовження Таблиці 1

selected <option> Визначає значення, яке буде виділено при завантаження сторінки.
shape <a>, <area>
size <input>, <select> Визначає ширину елемента (в пікселях). Якщо у елемента значення атрибута type – text або password, тоді це кількість символів.
sizes <link>
span <col>, <colgroup>
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> URL вбудованого вмісту.
srcdoc <iframe>
srclang <track>
srcset <img>
start <ol> Визначає перший номер, якщо це не 1.
step <input>
style Глобальний атрибут Визначає CSS стилі, які перепишуть встановлені раніше стилі.
summary <table>
tabindex Глобальний атрибут Переписує порядок Tab за замовчуванням браузера.
target <a>, <area>, <base>, <form>
title Глобальний атрибут Текст, який буде відображатися в підказці, коли на нього наведуть курсор.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Визначає тип елемента.
usemap <img>,  <input>, <object>
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Визначає значення елемента за замовчуванням, яке буде відображатися після завантаження сторінки.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Примітка: в деяких випадках, таких як <div>, це застарілий атрибут, в цьому випадку використовуйте властивість CSS width замість нього. В інших випадках, таких як <canvas>, ширина повинна бути задана цим атрибутом.
wrap <textarea> Вказує, чи слід переносити текст.
border <img>, <object>, <table> Ширина границі.

Закінчення Таблиці 1

buffered <audio>, <video> Містить відрізок часу вже буферизованного медіа
challenge <keygen> Рядок виклику, який передається разом з публічним ключем.
charset <meta>, <script> Визначає кодування сторінки або скрипта.
checked <command>, <input> Вказує, чи слід зазначити елемент при завантаженны сторінки.
cite <blockquote>, <del>, <ins>, <q> Містить URI, який вказує на джерело цитати або зміни.
class Глобальний атрибут Часто використовується разом з CSS, щоб стилізувати елементи з загальними властивостями.
code <applet> Вказує URL файлу класу аплета для завантаження і виконання.
codebase <applet> Цей атрибут надає абсолютний або відносний URL директорії, файли аплета .class, на які посилаються в доглянутому атрибуті коду.
color <basefont>, <font>, <hr> Цей атрибут встановлює колір тексту, використовуючи або назва кольору, або шістнадцятковий формат #RRGGBB.
cols <textarea> Визначає кількість стовпців в textarea.
colspan <td>, <th> Визначає діапазон кількості стовпців комірки.
content <meta> Значення, асоційоване з http-equiv або name залежить від контексту.
contenteditable Глобальний атрибут Вказує, чи редагується вміст елемента.
contextmenu Глобальний атрибут Визначає ID елемента <menu> який послужить, як контекстне меню елемента.
controls <audio>, <video> Вказує, чи слід відображати користувачеві кнопки відтворення.
coords <area> Набір значень, що задає координати області для активної ділянки.
datetime <del>, <ins>, <time> Вказує дату і час, що асоціюється з елементом.
default <track> Вказує, що доріжка повинна бути доступна, якщо призначені для користувача настройки не говорять про зворотне.
defer <script> Вказує, що скрипт повинен бути запущений, після того як сторінка буде проаналізована.
dir Глобальний атрибут Визначає напрямок тексту. Допустимі значення ltr (Зліва направо) або rtl (Справа наліво).
dirname <input>, <textarea>
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Вказує, чи може користувач взаємодіяти з елементом.
download <a>, <area> Вказує, що посилання використовується для завантаження.
draggable Глобальний атрибут Визначає, чи можна перетягувати елемент.
dropzone Глобальний атрибут Вказує, що елемент приймає вміст елемента, який перетягують на нього.
enctype <form> Визначає тип вмісту для даних форми, коли method – POST.
for <label>, <output> Описує елементи, які належать їм.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Вказує форму, яка є власником елемента.
formaction <input>, <button> Вказує дію елемента, перезаписуючу дію, вказане в формі <form>.
headers <td>, <th> ID елементів <th>, які застосовуються до цього елементу.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Примітка: в деяких примірниках, таких як <div>, це застарілий атрибут, в цьому випадку використовуйте властивість CSS height. В інших примірниках, таких як <canvas>, висота повинна бути задана цим атрибутом.
accept <form>, <input> Список типів, які приймає сервер, зазвичай тип файлу.
accept-charset <form> Список підтримуваних наборів символів.
accesskey Глобальний атрибут Визначає клавішну комбінацію для активізації або додавання фокуса до елементу.
action <form> URI адреса програми, яка опрацює дані, передані через форму.
align <applet>, <caption>, <col>, <colgroup>,  <hr>, <iframe>, <img>, <table>, <tbody>,  <td>,  <tfoot> , <th>, <thead>, <tr> Задає горизонтальне вирівнювання елемента.
alt <applet>, <area>, <img>, <input> Альтернативний текст, в разі, якщо зображення не може бути відображене.
async <script> Вказує, що скрипт повинен бути виконаний асинхронно.
autocomplete <form>, <input> Показує, чи можуть керуючі елементи в формі за замовчуванням мати власні значення для автодоповнення в формі.
autofocus <button>, <input>, <keygen>, <select>, <textarea> На цьому елементі потрібно  автоматично сфокусироватись після завантаження сторінки.
autoplay <audio>, <video> Аудіо и відео потрібно відтворити якомога скоріше.
autosave <input> Попереднє значення потрібно зберегти в випадаючому списку після перезавантаження.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr> Задає фонований колір. Атрибут застарілий, але все, ще функціонує.

Related posts

Початок роботи з Bootstrap

Just_Programmer

Початок роботи з HTML. Структура веб-документа

Admin_Black.Prince

31 коментар

Leave a Comment