10 майже напевно не застосовуються вами тегів HTML

11

Від автора: Безсумнівно, в якості розробника користувальницького інтерфейсу ви постійно користуєтеся HTML і, можливо, думаєте, що в ньому для вас не залишилося нічого незвіданого. Тим не менш, його розвиток (особливо при настанні ери HTML5) іноді здатне дивувати. У цій статті я покажу вам 10 тегів HTML, якими ви не користуєтеся, і навіть не знаєте, як вони допомагають поліпшити семантику і сопровождаемость ваших веб-сторінок.

meter

Рано чи пізно вам може знадобитися впровадити в сторінку одиницю виміру. Це може виявитися все, що завгодно – від результатів іспиту до коефіцієнта завантаження диска. HTML5 знайомить нас з новим елементом під назвою meter, що представляють скалярний вимір у відомому діапазоні або дробову величину.

Як визначає цей елемент специфікація, meter не підходить для вимірювання чого-небудь на зразок зовнішньої температури — тому що у нього відсутній постійний діапазон (його можна поставити, але він випадковий). У цього елемента є кілька атрибутів. Звичайні: value, min і max. Перший застосовується для позначення одиниці вимірювання, тоді як два інших використовуються для визначення діапазону. Так, якщо потрібно позначити, що у жорсткого диска місткістю 500Gb, а зайнято 300Gb, то можна написати:

300Gb of 500Gb occupied.

progress

З незапам’ятних часів розробники створювали віджети для повідомлення користувачів про хід завантаження або виконання завдання. Зараз для цього є «рідний» тег HTML5 з назвою progress. У нього два атрибути: value (для визначення стану виконання) і max (для позначення максимально досяжного значення). Якщо значення max не встановлено, передбачається діапазон від 0 до 1 та значення може коливатися між ними. Так, щоб показати індикатор виконання завдання на 50%, можна написати:

50%

Або еквівалент:

50%

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

і q cite

При написанні текстів нам часто потрібно процитувати книгу, статтю або чиєсь висловлювання. На папері ми зазвичай користуємося подвійними лапками («…») для визначення меж цитування разом з прийменниками з, або відповідно, визначають, кого ми цитуємо або з якого джерела взята цитата.

Для позначення цитати в HTML5 є q, а джерела — cite. Зверніть увагу, що до останнього часу cite можна було використовувати тільки для позначення назви роботи (книги, статті, фільми тощо), але не автора. Однак цей недолік усунутий, і тепер його можна також використовувати для цитування людей. У тега q є атрибут з назвою cite, який дає змогу позначати посилання на джерело цитати.

Тепер для прикладу давайте припустимо, що нам потрібно послатися на знамениту цитату Езри Паунда (Ezra Pound) (мою улюблену). За допомогою HTML ми написали б:

Ми повинні боротися за свої права, тому що, як сказав Езра Паунд,
Якщо людина не збирається ризикувати за свої переконання, то або його переконання нічого не коштують, або він сам – нестоящий людина.

pre

Елемент pre дає можливість показати попередньо відформатований текст таким, яким він з’являється в джерелі. Це означає, що безліч символів пробілу не згорнуться в один (змінюючи при цьому метод за замовчуванням, яким браузери обробляють пробіли). Цей тег ідеальний, коли вам потрібно показати фрагмент коду, так як зберігає відступи. Наприклад, у вас на сторінці може бути щось на зразок цього:

function sayHello(name) {
for (var i = 0; i < 3; i++) {
console.log(‘Hi’ + name + ‘!’);
}
}
sayHello(‘Aurelio’);

kbd і samp

Якщо ви – технічний автор, то часто обговорюєте інструменти і методики, що вимагають застосування терміналу або командного рядка. Цілком можливо, що вам знадобиться показати результат таких команд. Ця ситуація ідеально підходить для kbd і samp. Перший являє користувальницький введення даних, але не обмежується введенням з клавіатури. Останній являє зразок виведення комп’ютерної програми або системи. Ці елементи добре працюють з поданим вище елементом pre. Приклад їх використання, аналогічний наведеному у специфікації, наступний:

[email protected]:~$ ssh demo.example.com
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
[email protected]:~$ _

small

До появи HTML5 елемент small був лише презентаційним, застосовуваним для написання слів за допомогою дрібного шрифту. В HTML5 у small є певне семантичне значення. Тепер елемент small являє дрібний текст, що означає відступу, попередження, обмеження або авторські права. Нижче наведено приклад його використання:

Ця стаття представлена вам Aurelio De Rosa Copyright © 2014

output

Тег output представляє результат обчислення. Його основний атрибут — for, що містить список відокремлених пробілами ID елементів, задіяних в обчисленні, або впливають на нього іншим чином. Цей елемент – саме те, що потрібно вебсайту, пропонує що-небудь на зразок вартості автомобілів або розцінок на страхування життя.

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

Amount:
Percentage:
Years:
Total:
function calculateTotal(amount, percentage, years) {
for(var i = 0; i < years; i++) {
amount += amount * percentage / 100;
}
return amount;
}
document.getElementById(‘form-calculation’).addEventListener. (‘submit’, function(event) {
event.preventDefault();
document.getElementById(‘total’).textContent = calculateTotal(
Number(document.getElementById(‘amount’).value),
Number(document.getElementById(‘percentage’).value),
Number(document.getElementById(‘years’).value)
);
},
false
);

dfn (На десерт)

Перед обговоренням цього елемента хочу дещо вам зізнатися. Вирішивши написати цю статтю, я почав думати, які варто включити в неї теги. Дійшовши до 9-го пункту свого списку, я вирішив, що було б непогано додати під кінець що-небудь особливе. Тому переглянув список тегів HTML5 і ось вам моя реакція.

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

HTML-це основна мова розмітки веб-контенту.

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

HTML-це основна мова розмітки веб-контенту.

Щоб вибрати, чим є визначений термін, стандарт встановлює пріоритетний список з трьох пунктів. Пріоритет віддається тому, що визначається в атрибуті title тега dfn. Потім йде те, що визначається в елементі abbr, дочірньому dfn (як видно з другого прикладу). Останній пріоритет віддається тексту елемента dfn (показано в першому прикладі).

Висновок

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