Якщо ви front-end розробник, то, без сумніву, ви використовуєте HTML і не відчуваєте брак знань. Проте, іноді ми навіть не здогадуєтесь про деякі можливості мови. Ця стаття про 10 HTML тегів, які мало хто використовує, не дивлячись на те, що вони можуть суттєво допомогти процесу розробки та покращити семантику та рівень підтримки веб-сторінки.
1)meter
Бувають випадки, коли нам потрібно виразити певну величину на сторінці. Це може бути будь-чим: результатом екзамену або відсотком використання дискового простору. В HTML5 з'явився новий елемент - meter, який може бути використаний для представлення певної скалярної величини без прив'язки до діапазону вимірювання та дробових значень.
Основуючись на специфікації елемента,
meter value="300" min="0" max="500">300Gb of 500Gb occupied.
2)progress>
З незапам'ятних часів, розробники створювали віджети для повідомлення користувачів про прогрес завантаження або завдання. Сьогодні для цього є HTML5 тег під назвою progress. Вона має два атрибути: value (щоб вказати стан прогресу) і max ( для вказання максимального значення, яке потрібно досягти). Якщо максимальне значення не встановлено, використовується значення в діапазоні 0-1. Так, щоб показати індикатор завершення виконання завдання на 50%, ви можете написати:
<progress max="100" value="50">50%</progress>
Або еквівалент:
<progress value="0.5">50%</progress>
Текст всередині елемента використовується в якості запасного варіанту для старих браузерів. Як правило, цей елемент не буде використовуватися статично, і скоріше буде задіяний в поєднанні з JavaScript або CSS-анімацією для позначення безперервного прогресу.
3 і 4)cite та q
При написанні, ми часто цитуємо книгу, статтю, або людину. Зазвичай використовуються подвійні лапки ( " ... " ) і поряд вказується джерело.
В HTML5 ми маємо q, щоб вказати цитату, і cite для джерела. Зверніть увагу, що до недавнього часу cite можуть бути використані тільки вказати назву (книги, статті, фільму, тощо), але не особистість. Однак, після оновлення, ми можемо використовувати цей тег для посилання на людину. q має атрибут cite, що дозволяє нам вказати посилання на джерело цитати.
Тепер для прикладу, давайте припустимо, що ми хочемо привести відому цитату Василя Симоненка. Використовуючи HTML, ми повинні написати:
Ми повинні любити свою країну, бо як <cite>Василь Симоненко</cite> писав, <q>Можна все на світі вибирати, сину, вибрати не можна тільки Батьківщину.</q>
5)pre
Елемент pre дозволяє показати форматований текст, як він вказаний в джерелі. це означає, що кілька відступів, не будуть згорнуті в один. Цей тег є ідеальним рішенням, якщо Вам необхідно продемонструвати фрагмент коду, тому що він допомагає зберегти відступи. Наприклад, на сторінці ми можемо мати щось на зразок цього:
<pre><code>
function sayHello(name) {
for (var i = 0; i < 3; i++) {
console.log('Hi ' + name + '!');
}
}
sayHello('Aurelio');
</code></pre>
6 і 7)kbd та samp
Якщо ви працюєте з технічною літературою, то часто стикаєтесь з інструментами або техніками, які потребують використання команд терміналу (командного рядка). Також, вам іноді потрібно відобразити результат цих команд. В цьому випадку теги kbd і samp є ідеальним вирішенням проблеми. Перший використовуються, щоб відобразити те, що ввів користувач, але не обмежуючись введенням з клавіатури. Останній являє приклад вихідних даних програми або обчислювальної системи. Ці елементи добре працюють в комбінації з pre. Приклад використання:
<samp><span>jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com
<span class="prompt">jdoe@demo:~$</span> _</samp>
8)small
До HTML5, елемент small був презентаційним і використовувався для написання слів зі шрифтом меншого розміру. В HTML5 small має певне смислове значення. Тепер елемент використовується для виділення застережень, обмежень або авторських прав. Приклад використання:
Новини зі світу ІТ. Актуальні статті, а також все про програмування, інформаційну безпеку, стартапи, соціальні мережі. Корпоративні блоги та колонки експертів. <small>Copyright © 2014</small>
9)output
Тег output представляє собою результат розрахунку. Головний атрибут цього тегу - for, який містить список розділених комами ідентифікаторів елементів, які увійшли в розрахунок, або певним чином на нього впливають. Цей елемент буде корисним, якщо на вашому сайті є форма розрахунку чого-небудь.
Щоб побачити його у дії, уявіть собі, що існує віджет, де користувачі можуть вказати суму інвестицій в вашу компанію і дізнатись, який прибуток вони отримають в кінці року. Виходячи з даної ситуації, ви можете створити форму з використанням елемента output, наприклад:
<form id="form-calculation">
<label for="amount">Amount:</label> <input id="amount" type="number">
<label for="percentage">Percentage:</label>
<input id="percentage" type="number">
<label for="years">Years:</label>
<input id="years" type="number">
<input type="submit" value="Submit">
<label for="total">Total:</label>
<output for="amount percentage years" id="total"></output>
</form>
<script>
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
);
</script>
10)dfn
dfn елемент дозволяє визначити термін. Давайте скажемо, що ми пишемо сторінку, де ми описуємо HTML і ми хочемо зазначити. Щоб це зробити, використовуючи цей тег, ми можемо написати:
<dfn>HTML</dfn> is the primary language for marking up web content.
У цьому випадку, ми визначили термін HTML, який є абревіатурою. Ми могли б розширити нашу розмітку, написавши:
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the primary language for marking up web content.
Щоб вибрати, який термін визначено, стандарт визначає пріоритетний список з 3 пунктів. Пріоритет йде на все, що вказується в атрибуті title тегу. Потім, на те, що визначається abbr, дочірнім елементом dfn (як показано в другому прикладі). На останньому місці йде текст dfn елемента (як показано в прикладі).
Ще немає коментарів