10 HTML тегов, которые вы могли и не использовать

Как разработчик переднего плана, вы, несомненно используете HTML и, вероятно, чувствуете, что он больше не имеет неизвестных. Тем не менее то, как он развивался (в частности с появлением HTML5) может удивлять вас время от времени. В этой статье мы покажем вам 10 HTML тегов, которые вы возможно не используете или даже не в курсе, что они помогают увеличению семантики и ремонтопригодности ваших веб-страниц.

1. <meter>

В определённый момент нам может быть нужно выразить меру на веб-странице. Это может быть что угодно – от результатов экзамена до использования дискового пространства. HTML5 ввёл новый элемент &lt;meter&gt; , который представляет собой скалярное изменение в пределах известного диапазона или дробного значения.

На основании определения этого элемента в спецификации &lt;meter&gt; не очень хорош для измерения чего-то наподобие температуры, т.к. она не имеет фиксированного диапазона (вы можете определить его, но это произвольная). Этот элемент имеет несколько атрибутов. Наиболее распространёнными из них являются: значение, минимум и максимум. Первый используется для указания меры, в то время как два других используются для обозначения диапазона. Так, если вы хотите указать, что в жёстком диске 300Gb из 500Gb заняты, вы можете написать так:

<meter value="300" min="0" max="500">300Gb of 500Gb</meter> occupied.

2. <progress>

С незапамятных имен разработчики создали виджеты для уведомления пользователей о ходе загрузки или задачи. Сегодня в HTML5 есть родной тег &lt;process&gt;. У него есть два атрибута: value (указывает состояние прогресса) и максимум (указывает максимально достижимое значение). Если максимальное значение не установлено, предполагается диапазон 0-1 и любое значение в пределах этого диапазона. Так, чтобы показать прогрессбар для задачи, завершенной на 50%, вы можете написать:

<progress value="50" max="100">50%</progress>

Или аналогичное:

<progress value="0.5">50%</progress>

Текст внутри элемента используется в качестве запасного варианта для старых браузеров. Как правило, этот элемент не будет использоваться в статистике, а будет использован в сочетании с JavaScript или CSS анимацией для указания текущего процесса.

3 & 4. <cite> и <q>

Во время написания мы часто встречаемся со ссылкой на книгу, статью или лицо. На бумаге мы обычно используем двойные кавычки (“…”), чтобы ограничить часть цитаты вместе с предлогами или указать ссылку на источник.

В HTML5 есть &lt;q&gt;, чтобы указать цитату и &lt;cite&gt; для источника. Обратите внимание на то, что до недавнего времени &lt;cite&gt; мог использоваться только для указания в рабочем заголовке (книга, статья, фильм и т.д.), но не для человека. Тем не менее, сейчас это обновлено и мы можем использовать его для “ссылки” на человека тоже. Тег &lt;q&gt; имеет атрибут, позволяющий нам указывать ссылку на источник.

Сейчас для примера, скажем, что мы хотим цитировать известную цитату Ezra Pound. Используя HTML, мы должны написать:

We should fight for our rights because, as <cite>Ezra Pound</cite> said,
<q>If a man isn't willing to take some risk for his opinions, either his 
opinions are no good or he's no good.</q>

5. <pre>

Элемент &lt;pre&gt; позволяет нам показать предварительно отформатированный текст, как будто он появляется в источнике. Это означает, что несколько пробелов не будут соединены воедино (измение по умолчанию, браузеры обрабатывают пробелы). Этот тег идеально подходит тогда, когда нужно показать фрагмент кода, так как он помогает сохранить отступы. Например, на странице у нас может быть нечто подобное:

<pre><code>
function sayHello(name) {
    for (var i = 0; i < 3; i++) {
        console.log('Hi ' + name + '!');
    }
}
 
sayHello('Aurelio');
</code></pre>

6 & 7. <kbd> и <samp>

Если вы пишете о технологиях, вы, возможно, часто обсуждаете инструменты и методы, требующие использование команд терминала или оболочки. Также есть вероятность, что вы хотите показать результат этих команд. Идеальным решением этой ситуации являются &lt;kbd&gt; и &lt;samp&gt;. &lt;kbd&gt; представляет собой пользовательский ввод, не ограниченный вводом с клавиатуры. &lt;samp&gt; является образцом выхода из программы или вычислительной системой. Эти элементы хорошо сочетаются с предыдущим &lt;pre&gt;. Пример использования этих элементов аналогичен примеру, используемому в спецификации, имеет следующий вид:

<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 элемент &lt;small&gt; был единственным презентационным, используемым для написания слов меньшим шрифтом. В HTML5 &lt;small&gt; имеет немного семантическое значение. Теперь &lt;small&gt; представляет тексты, часто расположенные мелким шрифтом, например правовые оговорки, юридические ограничения или авторские парава. Пример такого использования приведен ниже:

This article is offered to you by Aurelio De Rosa <small>Copyright © 2014</small>

9. <output>

Тег &lt;output&gt; представляет собой результат вычислений. Его главный атрибут – for, который содержит разделенный пробелами список ID элементов , вошедших в расчёт или каким-либо образом повлиявших на него. Этот элемент – то, что вам нужно, если у вас есть сайт, предлагающий подобие цен на автомобили или котировок страхования жизни.

Чтобы увидеть его в действии, предположим, что на сайте вашей компании есть виджет, где пользователи могут указать сумму инвестиций в вашу компанию, в обмен на определённый ежегодный процент. Взяв за основу эту ситуацию, вы можете иметь формулу, используя &lt;output&gt; так, как показано ниже:

<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 id="total" for="amount percentage years"></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>

Элемент &lt;dfn&gt; позволяет определить термин. В своей простейшей форме он содержит термин, который вы хотите определить, а затем оберните им пункт или раздел, содержащий определение. Чтобы понять концепцию, давайте скажем, что мы пишем страницу, где мы описываем HTML и хотим определить его.

В этом случае мы определили термин HTML, который является аббревиатурой. Таким образом, мы могли бы повысить нашу верстку дальше, написав:

<dfn>HTML</dfn> is the primary language for marking up web content.

<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the primary language for marking up web content.

Чтобы выбрать, какой термин определяется, стандартный перечень определяет первоочередность мер, состоящих из трёх пунктов. Приоритет отдается указанному в заголовке тегу &lt;dfn&gt;. Тогда у нас есть все, что определяется abbr (аббревиатурами) элементов (как показано во втором примере). В последнюю очередь приоритет отдаётся тексту dfn элемента (как показано в первом примере).

Завершение

В этой статье мы обсудили несколько HTML тегов, которые мало используются или часто забываются. Мы предлагаем вам прочитать полный перечень HTML тегов, чтобы освежить память и, возможно, найти сюрприз на этом пути.