10 HTML тегів, які ми не використовуємо

7 хв. читання

Якщо ви front-end розробник, то, без сумніву, ви використовуєте HTML і не відчуваєте брак знань. Проте, іноді ми навіть не здогадуєтесь про деякі можливості мови. Ця стаття про 10 HTML тегів, які мало хто використовує, не дивлячись на те, що вони можуть суттєво допомогти процесу розробки та покращити семантику та рівень підтримки веб-сторінки.

1)meter

Бувають випадки, коли нам потрібно виразити певну величину на сторінці. Це може бути будь-чим: результатом екзамену або відсотком використання дискового простору. В HTML5 з'явився новий елемент - meter, який може бути використаний для представлення певної скалярної величини без прив'язки до діапазону вимірювання та дробових значень.

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

    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 елемента (як показано в прикладі).

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.6K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація